このサイトは、以下の構成で実装されています。

• Gatsby
• Netlify

実際に着手してから公開するまで、トータルで８時間も掛かっていないです。

今回は、構想から公開までのフローを、数回に渡って紹介したいと思います。

前回の記事は こちら です。

この記事ではNetlifyを使ってサイトを公開する方法について説明します。

Netlify is 何？

公式サイトは こちら

Netlifyは静的なサイトを超高速で提供できるWebサービスです。

また、フロントエンドのビルド、デプロイ、ホスティングの全てを行ってくれます。

完全無料のSSL対応に加え、独自ドメインの利用も可能となっています。

その他、Webhookによるトリガの設定や環境変数など、静的サイトを公開するのであれば十分すぎるほど高機能で、なおかつそれらが管理画面から簡単に設定をすることが可能です。

初期設定

まずNetlifyにログインしましょう。

ログイン後、リポジトリをNetlifyと連携させます。

Sitesタブの New site from Git ボタンを押下します。

すると、以下のような画面が表示されます。

Continuous Deployment で、利用しているリポジトリのサービスを選択します。

次に、実際に利用するリポジトリを指定します。

ここでリポジトリが表示されない場合、リポジトリにNetlifyからのアクセスを許可するように設定します。

Configure the Netlify app on GitHub. というリンクが表示されているはずなので、そこからアクセスの許可を設定する画面に遷移します。

最後に、各種設定を行い、Deploy site ボタンを押下します。

gatsby new コマンドで作成したリポジトリであれば、デフォルトのままで問題ないはずです。

これで初期設定は完了です。

デプロイが完了したら、サブドメインが発行され、URLにアクセスするとページが表示されるはずです。

各種設定

サブドメインを変更

初期設定時のサブドメインはランダムな文字列になっています。

これを、Netlify内で既に利用されているものでなければ、好きな文字列に変更することが可能です。

Settings -> Domain management -> Custom domains に Default subdomain が表示されています。

これの ... を押下して、 Edit site name を押下します。

すると、以下のようなモーダルが表示されるので、ここで好きな文字列をサブドメインとして設定することが可能です。

独自ドメインを設定したければ、Add custom domain ボタンを押下すると、それの設定画面へ遷移します。

環境変数を設定

ビルドする際に参照する環境変数を設定することが可能です。

Settings -> Build & deploy -> Enviromentで設定することができます。

記事の更新

記事を作成して、Netlifyで連携したリポジトリのmasterブランチにpushすることで、自動的にNetlifyへのデプロイが実行されます。

対象とするブランチや、デプロイするタイミングなどは、Settings -> Build & deploy -> Deploy contexts で変更することができます。

Pullrequestを使ってmasterへマージする前に、Mixedcontentやビルド失敗などを検知することが可能になっています。

まとめ

今回の対応で、記事を作成して実際に公開することができるようになりました。

Netlify側の設定は、画面をポチポチ押すだけで終わるので、思っていたよりも簡単にデプロイすることができました。

静的サイトを公開するだけであれば、Netlifyは非常に安価で高速で強力なサービスとなっていると思います。

使ったことがない方は、ぜひ使ってみてください。

きっとその手軽さに驚くと思います。