はじめに
Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。こちら
何回かにわけて構築の記録を残しているシリーズの最終回です。
前回までつくったSPAブログをNetlifyにあげて公開していきます。
【シリーズの予定】
- まえがき編
- Nuxt.js編
- Contentful編
- Netlify編 ← この記事
事前準備
- 独自ドメインを使用したい方は取得しておいてください
- GitHubにリポジトリを作っておいてください（GitLabやBitbucketでも大丈夫です）
リポジトリの作成
まずはローカルリポジトリを作成し、GitHubにプッシュしていきます。
「そんなのもうやっとるわ！！」という方には失礼しました。どうぞ読み飛ばしてください。
まずは.gitignoreの修正から。ContentfulのAPIKeyを公開リポジトリにあげてしまうのはまずいので、設定ファイルを外しておきます。
# Nuxt generate
dist
+ # dotenv
+ .env
あとは初期化してプッシュまでですね。
$ git init
$ git add .
$ git commit -m "Initial commit"
$ git remote add origin <GitHubリポジトリのURL>
$ git push origin master
Netlifyの設定
※2018年8月19日現在の設定方法となります
まずは公式サイトからユーザー登録しましょう。
「New site from Git」から新しいサイトを作成します。
GitプロバイダからGitHuBを選択し、リポジトリを選択します。
デプロイ用のブランチはこだわりがなければmasterでよいかと。
Build commandはnpm run generateです。これはNuxt.jsが静的サイトを作成するためのコマンドで、デフォルトだと/distディレクトリにファイルを吐いていきます。(ちなみにですが、yarnも使えました)
まだデプロイボタンは押さないでください！
環境変数の設定
デプロイの前にShow advancedで環境変数の設定をする必要があります。
「show advanced」のボタンをクリックするとフォームが展開し、環境変数が設定できるようになります。
ここにgitignoreした.envから環境変数を持ってきて設定してください。こんな感じ。
終わったら「Deploy site」をクリックしましょう！
しばらくすると「Getting started １」が「Your site is deployed」に変わるので、そうなればOKです！
独自ドメインの設定
上記まででサイトは公開されましたが、今はNetlifyが割り振ったドメインが設定されています。
独自ドメインに変更していきましょう。
「Set up a custom domain」をクリックするとドメインの入力画面になりますので、持っている独自ドメインを入力してください。
(Netlify上でも買えるみたいですが、やったことないです)
次はDNSの設定です。Domainsの欄にある「Check DNS configuration」をクリック。
モーダルがでてくるので、「Set up Netlify DNS for <あなたのドメイン名>」に進んでください。
ずんずん進んでいくと、ネームサーバーが出力されます。これをメモしましょう。
あとはドメイン取得先の管理サイトに戻ってネームサーバー情報を変更してあげます。
私はお名前.comで取得したのでこんな感じでした。
ネームサーバーの反映には24時間くらいかかることもあるので、気長に待ちましょう！
HTTPS化
超簡単です。HTTPSの欄から「Verify DNS configuration」をクリックするだけ。
Let's Encryptを通してHTTPS化できます。
こちらも数時間かかります。
完成
というわけで無事に公開できましたー！
あとはお好みでデザインをいじってみてください。
おわりに
何回かにわけてSPAブログの作り方を紹介していきました。
ブログサービスを使ってもいいですが、こういうのも面白いんじゃないでしょうか。
完成版のコードはGitHubで公開しておきます。
気が向いたらタグの付け方とかも追加解説するかもです。
ではではー。