今回の記事では、知っておきたいNetlifyの基本的な情報や、サイトを公開するときにどういった作業が必要になるのかを紹介していきたいと思います。
Netlifyって何？
はじめにNetlifyがどういったものなのか見ていきましょう。
Netlify（ネットリファイ）は高機能なサーバーを無料でも使えるホスティングサービスです。
Netlifyの創業者は、JAMstackという言葉を使い始めた@Matt Biilmannさん。
それもあってか Netlify は JAMstack アプリケーションに便利な機能がとても豊富。SSLを無料で使えたりHTTP/2にも対応していたりと、至れり尽くせりです。
※ JAMstackのJAMは、JavaScript、APIs、Markupの頭文字です。
無料でもしっかり運用できる
Netlifyは無料プランでも運用することができます。
無料プランではチームで開発ができなかったり（1 チーム 1 メンバーまで）、ビルド時間などの制限もありますが、複雑な機能を持たせなければ企業サイトでもポートフォリオサイトでもちゃんと運用することができます。
GitHub Actions を使えばビルド時間 0 で運用可能！?
GitHub Actions では公開リポジトリなら無料でビルド時間無制限となるので、GitHub Actionsと組み合わせればNetlifyのビルド時間制限を気にせず運用できるようです。
自動でデプロイできる
NetlifyではFTPなどを使わなくても、Gitコマンドを使ってサイトを公開したり更新することができます。
NetlifyではGitリポジトリにプッシュがあると、自動でビルドやデプロイが始まります。
つまり…Netlify だけで CI/CD 環境ができ上がることに！
git pushコマンドを実行するだけでサイトの公開や更新に必要なビルドが始まるように設定できるので、PCでビルドしてFTPでアップして…といった作業が必要なくなります。
コミットごと/ブランチごとのサイトが自動生成される
Netlifyではビルドごとや、（masterやtestブランチなど）それぞれのブランチごとに自動でサイトを生成することができます。
設定をしなくても、ビルドごとのプレビューサイトが自動で生成されます。これでテスト環境の構築もいらなくなる！？
設定しておけば、master以外のブランチもサブドメインで公開することができます。
ブランチを選択してサイトを公開する方法については、こちらで紹介しています????
高性能サーバーNetlifyの知っておきたい便利な機能まとめ
オープンソースのCMS（Netlify CMS）もある
Netlifyの開発チームはNetlify CMSというオープンソースのCMSも公開しています。
Netlify と名前がついているだけあって Netlify との相性は抜群。
CMSで運用しながら静的サイトを構築できる
Netlify CMSではGatsbyやHugoのような静的サイトジェネレーターと組み合わせて、CMS上で記事を書きながら静的サイトの運用ができます。
Netlify CMSは無料だけどNetlifyの利用にお金がかかることも
Netlify CMS自体はオープンソースなので無料で利用することができますが、Netlifyのサーバーを使うときにNetlifyの方で利用料がかかる場合があります。
サイト公開までの基本的な流れ
では、Netlifyを使う場合、サイト公開までにどういったった作業が必要になるのか、作業の流れについても見ていきましょう。
ステップ1：まずは Netlify に登録
まずはNetlify の Sign Up ページに移動します。
登録にはGitホスティングサービスのアカウントか、メールアドレスを選択できます。
Git レポジトリと連携する場合が多いと思うので、GitHub などのアカウントで登録すると便利です。
ステップ2：Git レポジトリと連携
Netlifyを利用するときはGitと連携させることが多いので、今回はGitを使ったサイトの公開方法について見ていきましょう。
まずは新規サイトの作成ボタンをクリック
Netlifyにログインできたら、Gitレポジトリと連携させましょう。
管理画面の右上に「New site from Git」ボタンが表示されています。
このボタンをクリックすると、新規サイト用のプロジェクトが作られます。
利用するGitホスティングサービスを選択
新しいサイトを開設するためのCreate a new siteの画面に移動するので、利用したいGitホスティングサービスを選択します。
ここではGitHubを選択してみます。
Git レポジトリと連携
連携するサービスを選択すると、Gitレポジトリとの連携画面が表示されます。
ポップアップが表示されるので、認証ボタンをクリックします。
よくある認証画面ですね。
あとは連携したいレポジトリを選択します。これで連携完了です。
ステップ3：サイトを公開
連携が完了すると、ビルドの設定画面に移動します。
オーナー名やブランチ名を選択し、ビルド時のコマンドと公開するディレクトリを入力します。
「Show Advanced」ボタンを押せば、環境変数の設定もできます。
入力が完了したら、Deploy siteボタンをクリックします。
デプロイが始まり、サイトの管理ページに移動します。
ビルドが成功すれば公開完了
デプロイしたばかりの状態では、サイトタイトルの近くにBuildingと書かれたラベルが表示されますが、少し待つとPublishedのラベルに変わります。
「Building」のラベルが、
「Published」に なれば公開完了！
デプロイが完了すると画面左上に URL が表示されます。
リンクをクリックすれば、サイトが表示されます。
ステップ4：カスタムドメインの設定
では、次にカスタムドメインを登録しましょう。
サイト管理画面トップページにある「Set up a custom domain」をクリックします。
カスタムドメインを入力し、「verify」ボタンを押します。
カスタムドメインの設定では、「お名前ドットコム」などドメイン側の設定も必要になります。設定方法はこちらのページが分かりやすいと思います。
ステップ5：常時 SSL 化
Netlify では、Let’s Encrypt の証明書を簡単に利用できます。
常時 SSL 化する方法については、下のリンク先で詳しく紹介されています。
ステップ6：Google Search Console に登録
ウェブサイトを運用するとなるとGoogle Search Consoleに登録する方が多いと思いますが、Netlify でDNSレコードを設定する方法が少しわかりにくいので、こちらについても紹介したいと思います。
Google Search Console での作業
まずは Google Search ConsoleでTXTレコードを取得しましょう。
Google Search Console にログインしたら、プロパティを追加ボタンをクリックします。
「プロパティタイプの選択」画面が表示されるので、「ドメイン」を選択します。
「TXT レコード」が表示されるので、コピーします。
これでSearch Consoleでの作業はおしまいです。
Netlify での作業
次はNetlifyでの作業です。
TXT レコードは DNS パネルで編集できるので、DNS パネルに移動します。
DNS パネルに移動
サイト管理画面トップにある「Domain settings」をクリックします。
登録したカスタムドメインが表示されます。ドメインの右側にある「Options」をクリックします。
表示されたポップアップの「Go to DNS panel」をクリックすると、DNS レコードに移動できます。
TXT レコードを追加
DNS パネルに移動したら、DNS recordsにあるAdd new recordをクリックします。
ポップアップが表示されるので、先ほどSearch Consoleでコピーした情報を入力します。
あとは「Save」ボタンを押して保存すれば、TXTレコードの追加完了です！
ステップ7：サイトの内容を更新するとき
サイトの内容を更新するときには、リモートレポジトリにプッシュすればOKです。
次のようなコマンドを入力するとビルドが始まり、新しい方のサイトに更新されます。
# master ブランチを公開git push origin master
補足：自動ビルドせずにサイトを更新するには？
Netlify を使っていると、自動ビルド時間の制限気になりますよね。
そんなときに便利なのが、自動ビルドせずにサイトを更新する方法です。ここではGatsby.jsを例に、自動ビルドせずにサイトを更新する方法を紹介したいと思います。
Gatsby.jsって何？知っておきたい基礎知識やメリットを徹底解説
public ディレクトリを Git 管理の対象にする
Gatsbyでは通常publicディレクトリを公開することになるので、.gitignoreを編集してpublicディレクトリをGit管理の対象に含めます。
# これを↓public# このように↓# public
ビルドコマンドを空欄に
次に Netlify 管理画面のビルド設定から、ビルドコマンド（Build command）を空欄にします。これで自動ビルドが無効になりました。
変更があるときはローカルでビルドしてからプッシュ
サイトの内容に変更があるときには、次のようにビルドしてからプッシュします。これでビルド時間を気にせずサイトを更新することができます。
# ビルドコマンドを実行 （Gatsby.jsの場合）gatsby build# master ブランチをリモートにプッシュgit push origin master
