Github +Gatsby + Netlify CMS で個人ブログを公開する

Gatsby と Netlify CMS を使って、静的サイトを作ってみます。

Netlify公式から、Gatsby + Netlify CMSのテンプレートを使用します。[(テンプレート)](https://github.com/netlify-templates/gatsby-starter-netlify-cms)


## アプリケーション準備

```
# テンプレートをローカルにクローン
git clone https://github.com/netlify-templates/gatsby-starter-netlify-cms.git gatsby-demo-app

# モジュールをインストール
npm install

# 動作を確認
npm start
```

アプリの起動後、 localhost:8000にアクセスすると、ブログアプリが表示されます。
(アプリが起動しない場合、モジュールのインストールに失敗しているので、node_modules、.cache、publicディレクトリを削除して、もう一度インストールとアプリの起動を行うこと。)
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/0d14920f-d66e-b20b-dd9c-ca9ea18a4a22.png">

## GithubへのPush

まずは、Githubにリポジトリを作成します。
<img width="1440" alt="スクリーンショット 2019-03-19 21.54.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/36b680f9-f09d-4cf5-8caf-729a7b10f132.png">

リポジトリ名はなんでもいいです。
<img width="1440" alt="スクリーンショット 2019-03-19 22.01.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/f7c2bcbc-5328-ab96-8775-e1dfcdec3c8a.png">

アプリケーションをPushする前に、既存の.gitディレクトリを削除しておきます。
既存の.gitを削除後、新規で、git設定ファイルを作成します。

```
# プロジェクトルートで削除を実行
rm -rf .git

# 新規でgit設定ファイルを作成
git init
git remote add origin git@github.com:Kento75/gatsby-demo-app.git
```

git設定ファイルの作成後、GithubへPushします。

```
git add .
git commit -m "first commit"
git push -u origin master
```

リポジトリにコミットが反映されていることを確認しましょう。
<img width="1440" alt="スクリーンショット 2019-03-19 22.09.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/64051686-554f-8293-e1b7-9fa01e48a350.png">


## Netlifyのセットアップ

[Netlify](https://www.netlify.com/)にアクセスしてユーザー登録を済ませましょう。
サードパーティーまたは、メールでの登録ができます。
<img width="1440" alt="スクリーンショット 2019-03-20 20.59.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/1d765d39-22b0-74a4-c9f1-86452e4b0fcd.png">

<img width="1440" alt="スクリーンショット 2019-03-20 21.01.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/8e8346ee-46b1-48a7-2078-cd6ff1a2a743.png">

ログイン後、サイト公開を行うGithubリポジトリとの連携を行います。
<img width="1440" alt="スクリーンショット 2019-03-20 21.03.06.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/a1ae6360-8d41-497a-af83-1545c72bdf97.png">
<img width="1440" alt="スクリーンショット 2019-03-20 21.04.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/cddb642c-f347-5097-d962-4e48c876eb33.png">

<img width="1440" alt="スクリーンショット 2019-03-20 21.05.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/a3a3da8c-ef54-940b-ee6e-9774bb84a79e.png">

対象のリポジトリを所有するユーザーまたは、Organizationを選択しましょう。
<img width="1440" alt="スクリーンショット 2019-03-20 21.08.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/62682315-d0e8-10a9-d8f8-47308af1f951.png">

今回は、対象のリポジトリのみを選択します。
<img width="1440" alt="スクリーンショット 2019-03-20 21.10.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/077c3ff2-efc0-83ee-eb96-a07045ccd031.png">

Push、Pull Request権限を付与します。（Netlify CMSからの記事投稿はPushとなるため）
<img width="1440" alt="スクリーンショット 2019-03-20 21.12.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/8495f638-3f7c-ab90-0e19-f52fb16ca372.png">

権限付与が完了すると、対象のリポジトリが表示されるので選択します。
<img width="1440" alt="スクリーンショット 2019-03-20 21.15.07.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/b1a5efde-7c35-ebb6-08c5-4c4b2101eeb4.png">

Netlify公式のテンプレートには、netlify.toml という設定ファイルがすでに用意されているので、
その設定値が反映されます。このままデプロイできるので、「Deploy site」をクリックします。
<img width="1440" alt="スクリーンショット 2019-03-20 21.17.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/b8df56d0-acac-3feb-d189-f707f4fa96e9.png">

ホーム画面に遷移後、ビルド実行結果が赤枠内に表示されます。クリックすると、詳細画面に遷移します。
<img width="1440" alt="スクリーンショット 2019-03-20 21.20.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/0e0af9d4-8886-27ad-40c4-0d3db93d19e7.png">

デプロイが完了したら、「Preview deploy」をクリックして、サイトを確認できます。
<img width="1440" alt="スクリーンショット 2019-03-20 21.23.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/ea0ea5ff-f091-6824-ee5f-33592c543172.png">

※ トラブルシューティング
今回のリポジトリでは、デプロイに失敗しないとは思いますが、別のテンプレートや自作のアプリケーションの場合、Nodeのバージョン違いで失敗することがあります。
対処としては、NetlifyのNodeのバージョンをローカルに合わせるという方法があります。
ホーム画面から「Deploys」、「Notifications」の順に選択します。
<img width="1440" alt="スクリーンショット 2019-03-20 21.36.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/80408ba4-5818-38a0-cec1-15bed7612714.png">
<img width="1440" alt="スクリーンショット 2019-03-20 21.37.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/f6690821-ec25-3eaf-8a49-5e70e7f8480a.png">
「Build environment」にNodeのバージョンを指定することで、ビルドに使用するNodeを固定できます。
<img width="1440" alt="スクリーンショット 2019-03-20 21.40.14.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/01155166-793d-cf5f-2b66-f815fd7d2c0a.png">

ここまでトラブルシューティング

---

<img width="1440" alt="スクリーンショット 2019-03-20 21.24.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/331d9974-fcca-e3d3-e5e8-1e1d8b4917c1.png">

サイトのURLはランダムに設定されてしまうので、編集します。
ホーム画面の「Domain settings」を選択します。
<img width="1440" alt="スクリーンショット 2019-03-20 21.28.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/814690cb-b5f5-a489-926b-4eeb65098aa5.png">

ドメイン設定画面に遷移します。
「Edit site name」を選択して、好きなドメイン名をつけましょう。(.netlify.comは変更できません)
<img width="1440" alt="スクリーンショット 2019-03-20 21.29.17.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/2dff2401-c514-fc36-4f85-2245ba0846fc.png">

## 記事の投稿機能の確認と拡張

まずは、管理者画面にログインする為の設定を行います。
「Settings」を選択します。
<img width="1440" alt="スクリーンショット 2019-03-20 21.48.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/180939/8c6b4da8-af94-ce46-cf0f-87fbf9360421.png">

## 管理者画面のログイン機能設定

設定画面の 「Settings」 -> 「Identity」 -> 「Enable Git Gateway」 をクリックします。
![スクリーンショット 2019-10-14 7.36.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/e42f2cdb-4ce8-4a04-a109-0ba03587e5ac.png)
![スクリーンショット 2019-10-14 7.36.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/16d86fbe-ea47-4d5b-44c8-f2525eeadd41.png)

※ 管理者画面のログインはGoogle Chrome を使用しています。

「https://<ブログのURL>/admin」にアクセスすると、画面中央にログイン用ボタンが表示されるので、クリックします。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/de441f99-e64e-c935-ea92-997c215f7af3.png">

「Sign up」を選択して、ユーザー名、メールアドレス、パスワードを入力後、「Sign up」ボタンをクリックします。
※ サインアップ確認のメールが設定したメールアドレスに送信されます。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/1f9005b6-a826-18da-6aa3-ee76e069417d.png">

送信されてきたメールのリンクをクリックすると管理者画面に遷移します。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/bc427204-aeeb-eaaf-ba30-f17bc9e9210b.png">
以降、ログインは先ほど作成したユーザーで行うことになります。

以降、ユーザーの作成を禁止する設定を行いましょう。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/9f23b11d-30f9-b0aa-71d7-44d2a93cffe2.png">
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/28bd20c4-146c-bf00-bb90-e054a50d24c2.png">

## 記事の投稿

新たに記事を作成する場合、管理者画面から「New Blog」ボタンをクリックすることでworkpressっぽい記事作成画面に遷移します。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/84b7d2e1-2808-75d7-bd83-83d587c39c27.png">

<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/12ef9d10-196f-729b-52ef-74f7367468b2.png">

記事の投稿(GithubにPushすることになります)は、「Publish」をクリック、「Publish now」をクリックすると記事の投稿が完了します。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/edb6af0e-930e-f7e5-1ef8-a88280a3653e.png">
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/524af051-ddb9-0c2a-fb30-d4ce7e2019bd.png">


「https://<ブログのURL>」にアクセスして、記事一覧を確認しましょう。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/4f747d3d-7c37-2437-1396-248ecdb42a26.png">

記事の内容も確認しましょう。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/9b18e55c-3336-ec40-327e-dff39c1a51c5.png">

補足
記事の投稿は、GithubへのPushになるため、リポジトリのcommitログが１つ増えます。
<img width="1440" alt="スクリーンショット 2019-03-19 21.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/180939/0cb84c35-84e2-22b6-ca57-eafbc304cf67.png">

以上で、基本的な設定は完了です。
Netlifyのホスティングには、ドメインの設定やNetlify-Lambda(AWS Lambda)など、色々設定できるので試してみると良いかと思います。

今回作成したアプリケーションのリポジトリは[こちら](https://github.com/Kento75/gatsby-demo-app)
サイトは[こちら](https://gatsby-demo-app.netlify.com/?_ga=2.261656141.1109025524.1555842977-1576201322.1555842977)