この記事では、GithubとNetlifyを連携し”Hello World”（HTMLファイル）を表示させるまでの流れを案内します。
前準備
- Githubアカウントあり
- HTMLファイル入りのリポジトリを作っている（PrivateでもOK）
状態から始めます。
NetlifyでHello Worldを表示するまでの流れ
Netlifyの公式サイトにアクセスします。
『Get started for free』をクリック。
最初はNetlifyのアカウント作成します。 今回はGithubアカウントを使用。
『Authorize netlify』をクリックすればNetlifyアカウント作成完了です。
『Next』をクリック。
『New site from Git』をクリック。
『GitHub』をクリック。
再びGitHubの認証画面が開くので『Authorize Netlify by Netlify』をクリック。
『Only select repositories』の『Select repositories』をクリック。
GitHubに保存しているリポジトリが表示されるので選択します。
『Install』をクリック。
先程選択したリポジトリがNetlify上に表示されるのでクリック。
OwnerやBranch to deploy、Build commandなどの設定はあとで変更できます。
『Deploy site』をクリック。
以上でもうサイトができました。
画面左上をクリックしてみましょう。
"Hello World"と表示されました。
サイトを更新したい場合は、GitHubのリポジトリにPushするだけで、自動でNetlifyに反映されます。
ドメイン名は『Site settings』→『Change site name』から可能です。
カスタムドメインは設定画面の『Domain management』→『Domains』→『Add custom domain』から可能。
以上、NetlifyでHello Worldを表示するまでの流れでした。
おわりに
これ無料で使えていいの？ってくらい便利なNetlifyでした。
最初からHTTPSにも対応しているので、Lighthouseの指示に従ってタグとmanifest.jsonとService Wokerを追加し、オール100スコアをゲットして遊んでみました。
Puch通知以外を実装してMicrosoft PWA Builder 2.0のスコアは95点にしてみました。PWA対応Webサイト/SPAの雛形としてつくっておくと便利そうです。
