Netlifyでデプロイしてみる

Netlifyでデプロイしてみる

Netlifyに登録

Netlifyアカウントを用意するためNetlifyの登録ページで登録処理を済ます。
私はGitHubアカウントを持っているので会員登録ページでGitHubを選択しました。

プロジェクトを作成したGitHubへpush

簡単なプロジェクトを作成してホスティングをしてみます。
ローカルのフォルダーをアップロードする方法もありますが、
今回はGitHub上のレポジトリと連携させてホスティングさせます。

プロジェクト作成

ローカル環境にpublicディレクトリを作成してその中にindex.htmlファイルを作成します。
ディレクトリ構造

public
└── index.html
<!DOCTYPE html>↲
<html lang="ja">↲
<head>↲
  <meta charset="utf-8" />↲
  <title>Netlify test</title>↲
</head>↲
<body>↲
  <h1> Hello Netlify </h1>↲
</body>↲
</html>↲

GitHubへPush

以下コマンドでGitHubへpushします。

git init

git add .

git commit -m 'first commit'

git remote add origin git@github.com:TEST/a.git 
// TESTの部分は任意に自身のアカウント名にする

GitHubのリポジトリをNetlifyへ紐付ける

作成したリポジトリとNetlifyを紐づける。

New site from GitをクリックしてGitHubを選択する。

作成したレポジトリを選択する。

ビルド時に実行するコマンドと公開ディレクトリの設定を入力します。(今回の公開ディレクトリはpublicです)
buildコマンドは必要ないので今回のケースでは入力不要です。
設定が完了したらDeploy Siteをクリック。

無事設定が完了すると画像のような画面に切り替わります。
自身の画面に表示されているURLにアクセスするとHello Netlifyと表示されるはずです。

index.htmlを編集して変更内容をGitHubのリポジトリにpushしてから再度URLにアクセスしてみると変更内容が反映されているのを確認できます。