【Netlify編】Nuxt.js + Contentful + NetlifyでSPAブログを自作する

# はじめに
Nuxt.jsとContentfulとNetlifyでモダンな（？）SPAブログを作りました。[こちら](https://thinkshake.net/blog/)
何回かにわけて構築の記録を残しているシリーズの最終回です。
前回までつくったSPAブログをNetlifyにあげて公開していきます。

【シリーズの予定】
- [まえがき編](https://qiita.com/hitsuji-haneta/items/9fb971855026386fa5c5)
- [Nuxt.js編](https://qiita.com/hitsuji-haneta/items/7e41bf5cdfde55b826a4)
- [Contentful編](https://qiita.com/hitsuji-haneta/items/6be4745b9bd6b098843f) 
- Netlify編 ← この記事

# 事前準備
- 独自ドメインを使用したい方は取得しておいてください
- GitHubにリポジトリを作っておいてください（GitLabやBitbucketでも大丈夫です）

# リポジトリの作成
まずはローカルリポジトリを作成し、GitHubにプッシュしていきます。
「そんなのもうやっとるわ！！」という方には失礼しました。どうぞ読み飛ばしてください。

まずは`.gitignore`の修正から。ContentfulのAPIKeyを公開リポジトリにあげてしまうのはまずいので、設定ファイルを外しておきます。

```diff:.gitignore
# 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日現在の設定方法となります**
まずは[公式サイト](https://www.netlify.com/)からユーザー登録しましょう。
「New site from Git」から新しいサイトを作成します。 
![サイト作成.png](https://qiita-image-store.s3.amazonaws.com/0/133447/be4c25cc-996c-bba8-396a-b5bac8bbcb02.png)

GitプロバイダからGitHuBを選択し、リポジトリを選択します。

デプロイ用のブランチはこだわりがなければmasterでよいかと。
Build commandは`npm run generate`です。これはNuxt.jsが静的サイトを作成するためのコマンドで、デフォルトだと`/dist`ディレクトリにファイルを吐いていきます。(ちなみにですが、yarnも使えました)
**まだデプロイボタンは押さないでください！**
![コマンド設定.png](https://qiita-image-store.s3.amazonaws.com/0/133447/b24a7348-c29b-f4e4-5f31-f6b9f391b593.png)


## 環境変数の設定
デプロイの前にShow advancedで環境変数の設定をする必要があります。
「show advanced」のボタンをクリックするとフォームが展開し、環境変数が設定できるようになります。
ここにgitignoreした`.env`から環境変数を持ってきて設定してください。こんな感じ。
![キー設定.png](https://qiita-image-store.s3.amazonaws.com/0/133447/ee461567-a79c-d121-66b7-5d3bdc3bbf6a.png)


終わったら「Deploy site」をクリックしましょう！
しばらくすると「Getting started １」が「Your site is deployed」に変わるので、そうなればOKです！
![デプロイ完了.png](https://qiita-image-store.s3.amazonaws.com/0/133447/2c0ab49f-8964-5505-ab2c-9f74916518ca.png)


## 独自ドメインの設定
上記まででサイトは公開されましたが、今はNetlifyが割り振ったドメインが設定されています。
独自ドメインに変更していきましょう。
「Set up a custom domain」をクリックするとドメインの入力画面になりますので、持っている独自ドメインを入力してください。
(Netlify上でも買えるみたいですが、やったことないです)

次はDNSの設定です。Domainsの欄にある「Check DNS configuration」をクリック。
![DNS設定.png](https://qiita-image-store.s3.amazonaws.com/0/133447/19a8d881-e469-9f62-7075-f5d290f4daa4.png)

モーダルがでてくるので、「Set up Netlify DNS for <あなたのドメイン名>」に進んでください。
![DNS設定②.png](https://qiita-image-store.s3.amazonaws.com/0/133447/08a4ea75-8d69-6f2b-b6cb-47756b1f3deb.png)


ずんずん進んでいくと、ネームサーバーが出力されます。これをメモしましょう。
![ネームサーバー.png](https://qiita-image-store.s3.amazonaws.com/0/133447/f85a8f7c-5e95-d86c-e044-3a15b508d42c.png)
 

あとはドメイン取得先の管理サイトに戻ってネームサーバー情報を変更してあげます。
私はお名前.comで取得したのでこんな感じでした。
![お名前.png](https://qiita-image-store.s3.amazonaws.com/0/133447/b8735170-436b-3c0b-520c-1f9df46d6782.png)

ネームサーバーの反映には24時間くらいかかることもあるので、気長に待ちましょう！

## HTTPS化
超簡単です。HTTPSの欄から「Verify DNS configuration」をクリックするだけ。
[Let's Encrypt](https://letsencrypt.org/)を通してHTTPS化できます。
こちらも数時間かかります。
![HTTPS.png](https://qiita-image-store.s3.amazonaws.com/0/133447/ac630f0e-6f17-cfff-7788-cb505048cf52.png)


# 完成
というわけで無事に公開できましたー！
あとはお好みでデザインをいじってみてください。
<img width="849" alt="完成版.png" src="https://qiita-image-store.s3.amazonaws.com/0/133447/71b476b2-0ef0-90bb-56af-d994016cddae.png">


# おわりに
何回かにわけてSPAブログの作り方を紹介していきました。
ブログサービスを使ってもいいですが、こういうのも面白いんじゃないでしょうか。
完成版のコードは[GitHub](https://github.com/hitsuji-haneta/spa_blog_demo)で公開しておきます。
気が向いたらタグの付け方とかも追加解説するかもです。

ではではー。