NetlifyとGithubを連携して静的サイトを公開する

Reactで制作した静的サイトをNetlifyで公開する時の NetlifyでGithubのリポジトリを設定して、mainブランチにPushされるとサイトが公開されるようになる方法をメモしておきます。

Netlifyは、静的コンテンツをホスティングしてくれるWebサービスのことで、個人で利用するだけなら無料で使用可能です。Githubはソフトウェア開発のプラットフォームで、プログラムのソースを配置することができる。

必要なのは以下の３ステップ

1. Githubに(サイトの)コードを上げる
2. Netlifyにユーザ登録をする
3. NetlifyでGithubの(コードが上がっている)リポジトリを設定する

Githubにコードを上げる

Githubのアカウンをを取得後、新規にリポジトリを作成し、以下のような手順でgit pushする

echo "# <リポジトリ名>" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/suzukiyoshihisa/<リポジトリ名>
git push -u origin main

Netlifyにユーザ登録をする

NetlifyのサインインページでソースにGithubを選択して、連携を行ったあと登録を完了する。

NetlifyでGithubのリポジトリを設定する

■DashBoard画面でNew site from Gitボタンを押下する

■Gitプロバイダー設定画面でGithubを選択する

■Netlifyと連携したいリポジトリを選択する。 リポジトリが選択候補に表示されない場合は、連携設定がされていないので下部のリンクから設定を行う。

■適切な設定を行ったあと、Deploy siteボタンを押下する

■Site deploy in progressの文字がしばらくするとURLになるので、URLを押下するとデプロイされたサイトを見ることができる。