#6 ブログを作った話 - Netlifyでホスティングして公開する

当ブログ(sumii.io)を、Figma, Nuxt.js, Contentful, Netlifyを使って構築した方法を各パートにわけて紹介していきます。

今回は完成したブログをNetlifyを使って公開する手順を紹介します。

Netlifyとは

静的コンテンツのホスティングサービスです。
GitHub,GitLab,Bitbucketのリポジトリと連携でき、push,merge単位でのデプロイはもちろん、
フックを使用して他サービスとも連携することもできます。

Netlifyの設定

GitHub,GitLab,Bitbucketなどでリポジトリを作成して今回作成したブログを管理している前提で説明します。

Netlifyでアカウントを作成しましょう。
Emailアドレスでの登録とGitHub,GitLab,Bitbuckeでのアカウント連携の2つの登録方法がありますのでお好きな方法を選んでください。

スクリーンショット 2019-05-28 15.24.10

ログインしたらNew site from Gitをクリックします。
セットアップ画面が表示され、GitHub,GitLab,BitbucketのいずれかのGitサービスと連携し、該当のリポジトリを選択します。

スクリーンショット 2019-05-28 15.32.33

リポジトリを選択したらブランチとビルドコマンドを設定します。
リポジトリはmasterで良いでしょう。
ビルドコマンドとディレクトリは環境構築の際に設定したものを入力してください。

スクリーンショット 2019-05-28 15.49.37

次にShow advancedNew variableをクリックすると環境変数を設定できます。
ここでは#5で設定した.envファイルと同じ内容を入力してください。
最後にDeploy siteをクリックしましょう。
画面が切り替わりしばらくするとデプロイされます。

スクリーンショット 2019-05-28 16.24.25

Webhook連携

次はContentfulで記事を更新・追加したタイミングでNetlifyのデプロイが走るように、ContentfulとNetlifyを連携します。

/settings/deploys#build-hooksへ遷移するとhttps://api.netlify.com/build_hooks/文字列のようなURLが表示されています。
このURLをコピーしてください。

Contentfulの管理画面でsettings/webhooksへ移動します。
右メニューからNetlifyを選択し、先程のURLを入力してください。
Create webhookを押したら連携完了です。

ドメインとDNS設定

次にドメインの設定をしましょう。
/settings/domainで、Add custom domainをクリックし、自分が所有しているドメインを入力します。

ドメインの設定を終えると追加したドメインの欄に表示されたCheck DNS configurationをクリックし、画面を進んでいくとネームサーバーが表示されるので、こちらをドメインを取得したサービスの管理画面へ行き、ネームサーバーの設定画面で入力してください。(反映には時間がかかります。)

また、HTTPS化したい場合は、同じページにあるHTTPSのセクションでボタンを押すだけです。
こちらも反映に時間がかかりますが、とても簡単に設定できます。

最後に

以上でブログを公開することができました。
あとは自由にコンテンツやデザインをカスタマイズし自分のブログを作ってみてください。