Nuxt.js/GitHubをNetlifyと連動させる

前回は、Nuxt.jsをインストール後にGitHubで管理できるように環境構築を進めたことを書きました。今回は、GitHubへpushしたら自動でNetlifyに反映できるようにした記事を書きたいと思います。
> 前回の記事

1. Netlifyのアカウント作成

> Netlifyページ

■ 下記のページに移動し、右上の「Sign Up」を押し、自身がコード管理で使用しているサービス（GitHub,GitLabなど）のボタンを押しましょう。

■ 下記のページではGitHubと連携するけど問題ない？的なことを聞かれますが、気にせずに緑のボタンを押しましょう。ページを進むとポップアップが出ますがこちらも気にせずにNextボタンを押して進みましょう。

■ 右上の「New site from Git」を押し次へ進みましょう。

■ 使用しているサービスのボタンを押しましょう。（GitHub,GitLabなど）

■「Only select....」を選択し、事前に作成しておいたリポジトリを選びましょう。

■「Basic build settings」セクション内の2点を記述しましょう。

Build command：npm run generate
Publish directory：dist
※ いつでも変更することが可能です。

Build command
Netlifyでデプロイ（サイトを更新する的なこと）を実行し、フレームワークでHTMLなどを生成（ビルド）させるためのコマンドです。本来は自身でターミナルを叩いて実行させるようなものですが、デプロイしたときにNetlify側でビルドさせて自動で反映させることが出来ます。

※ 事前にローカルでnpm run generateをコマンドで叩いて、distディレクトリをビルドしGItHubにpushしておいてください。
GitHubを参照してNetlifyが動いてくれてますので、ログでdistってディレクトリないんですけど？みたいなお叱りを受けます。。。

Publish directory
公開させるディレクトリのことを指しています。「npm run generate」で生成されるdistディレクトリにしておきましょう。

2. GitHubのmasterリモートへpushしたらNetlifyに自動で反映させたい

■ 「Production deploys」をクリックして、デプロイページへ移動しましょう。次のページでTrigger deploy内の「 Deploy site」を選択します。

■ デプロイ中のログが画面に表示されるので、状況を確認できます。
「Site is live」というログが出たら、更新完了です。
※ 先ほど設定した「Basic build settings」の部分が関わっています。

3. Netlifyで反映の確認

TOPページへ移動し、https://〜リンクをクリックし表示を確認しましょう。
デプロイに問題なければ表示されているはずです。

4. 最後に

今回はNetlifyをGitHubと連携させる方法を記載しました。様々な方法あり更に簡単な方法があるかと思いますし、間違ったことを記載している可能性もありますので、何かあればご指摘いただけると助かります。
次回は、Contentfulについて記載していきたいと思います。