Gatsbyjs + Netlify + Contentful で Blogを作ってみた。

# Gatsbyjs + Netlify + Contentful で Blogを作成

- 今回作成するサイトの[Demo](https://gcn.netlify.app/)です。
- [こちら](https://yossy-io.netlify.app/)が今回実際に作成したBlogです。

以前に[gatsby-starter-blog](https://www.gatsbyjs.org/starters/gatsbyjs/gatsby-starter-blog/ "gatsby-starter-blog")でブログを作成したのですがCMSを利用したいと思い、
新たに[gatsby-starter-gcn](https://www.gatsbyjs.org/starters/ryanwiemer/gatsby-starter-gcn/ "gatsby-starter-gcn")でブログを作成したので備忘録を残します。

## 利用したサービス

- Gatsbyjs

[Gatsbyjs](https://www.gatsbyjs.org/ "Gatsbyjs")はReactを利用したモダンなサイトを高速に作成できるオープンソースフレームワークです。
Gatsbyjsでなにか作りたい方は[テンプレート](https://www.gatsbyjs.org/starters/?v=2 "Gatsbyjs")が豊富に用意されているので、そちらを利用するといいと思います。

- Netlify

[Netlify](https://www.netlify.com/ "Netlify")は静的なサイトを高速で提供できるホスティングWebサービスです。
フロントエンドのビルド、デプロイ、ホスティングの全てを高速に行ってくれます。
また、NetlifyはGitHubリポジトリとリンクして、GitHubリポジトリにプッシュがある度にビルド・デプロイをしてくれます。

- Contentful

[Contentful](https://www.contentful.com/ "Contentful")はAPIファーストなHeadless CMS（コンテンツ管理システム）です。コンテンツとはブログ記事などのことです。
WordPressなどのCMSとは異なり、開発者はREST API経由で記事(コンテンツ)を取得し、アプリケーションやデバイスのUIに反映させるというものです。
特徴はなんといってもAPIベースでコンテンツを管理・取得できるので、表示(フロントエンド)側での制約がなくなり、管理しているコンテンツをWebからでも、モバイルからでも取得し、表示することができる、つまり、フロントエンドとバックエンド切り離すことができるということです。
今回はその管理の分離を考えて、HeadlessCMSを利用することにしました。

## ブログ作成手順
こちらからブログ作成の手順を残しておきます。

##### Gatsbyプロジェクトの作成

まずはこちらの[リンク](https://www.gatsbyjs.org/starters/?v=2 "Gatsbyjs")からGatsbyjsのテーマを選びます。
今回はGatsbyjs + contentful + Netlifyという構成にしたかったので、
[gatsby-starter-gcn](https://www.gatsbyjs.org/starters/ryanwiemer/gatsby-starter-gcn/ "gatsby-starter-gcn")を選びました。

上記リンク先のSourceから[Github](https://github.com/ryanwiemer/gatsby-starter-gcn "gatsby-starter-gcn")にとべるので、そちらのREADMEにしたがって作成していきます。

まずはプロジェクトを作成します。

```
$ gatsby new gatsby-starter-gcn(任意のプロジェクト名) https://github.com/ryanwiemer/gatsby-starter-gcn.git
```

上記コマンドでGatsbyのプロジェクトを作成します。(gatsby-cliが必要です。)

自分の場合は以下のエラーが出ましたが、現在の最新のnodejsのバージョン（14.7.0）に上げたらエラーがなくなりプロジェクトを作成できました。（エラーが確認できたnodejsのバージョンは13.2.0でした。）

```
/usr/local/lib/node_modules/gatsby-cli/node_modules/yoga-layout-prebuilt/yoga-layout/build/Release/nbind.js:53
        throw ex;
        ^

Error: No valid exports main found for '/usr/local/lib/node_modules/gatsby-cli/node_modules/@urql/core'
    at resolveExportsTarget (internal/modules/cjs/loader.js:611:9)
    at applyExports (internal/modules/cjs/loader.js:492:14)
    at resolveExports (internal/modules/cjs/loader.js:541:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:643:22)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:941:27)
    at Function.Module._load (internal/modules/cjs/loader.js:847:27)
    at Module.require (internal/modules/cjs/loader.js:1016:19)
    at require (internal/modules/cjs/helpers.js:69:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/gatsby-cli/node_modules/urql/dist/urql.js:206:12)
    at Module._compile (internal/modules/cjs/loader.js:1121:30) {
  code: 'MODULE_NOT_FOUND'
}
```

無事プロジェクトが作成できたので次にいきます。

##### ContentfulのSetup

次に[こちら](https://github.com/ryanwiemer/gatsby-starter-gcn#setup-contentful "Setup Contentful")にしたがってContetfulの設定をしていきます。

まず[contentful](https://www.contentful.com/ "contentful")のアカウントを作成し、空ページを作ります。

最初はチュートリアルページがあるかと思うので、そちらを削除し、画面左上の`+ Create space`を押して空ページを作成します。

ヘッダーのSpace Homeを押した際に以下のページが表示されていると思います。

![Contentful空ページ作成後Home](//images.ctfassets.net/tr4um6ipof78/5FGOfSmjAMtcpEd0tipe2K/dc8902a2a0bd297316997717142f4a64/____________________________2020-08-09_19.16.15.png)

次にContentfulのAPIKEYの設定をします。

```
$ npm run setup
```

上記のコマンドを叩くと

- SPACE ID
- Content Delivery API access token
- Content Preview API access token
- Content Management API access token

を聞かれるのでそれぞれContentfulのSpace Settings → API keysから取得して入力します。
Content delivery / preview tokensとContent management tokensのタブの情報が両方必要なので注意してください（tokenはなければ作成してください）。

これでContentfulの内容が反映されるようになったので、

```
$ gatsby develop
```

でローカルプロジェクトを立ち上げて http://localhost:8000/ でローカルでコンテンツの確認をすることができるようになりました。

あとはNetlifyを使ってBuild・Deployの設定をします。

## NetlifyのSetup

こちらもREADMEに沿って設定していきます。
![gatsby-starter-gcnのNetlifyの設定手順](//images.ctfassets.net/tr4um6ipof78/6ogLZzQB6pfunZElj9NxRL/fa678f659c929b9101aa4f68b479d08f/____________________________2020-08-09_19.32.32.png)

Netlifyのアカウントを作成したら[こちら](https://app.netlify.com/start "https://app.netlify.com/start")からNetlifyとgitプロジェクトの紐付けをしていきます。

リンク先の画面でGithubを選択し、該当のGithubリポジトリを選択します。
次の画面でDeploy Siteを押し、サイトのDeployを開始します。

Deployが開始されましたがそのままではビルドがこけてしまうので環境変数を設定します。
NetlifyトップページのSettings → Build & Deploy → Build Environment Variables.から
READMEにならってSPACE_IDとACCESS_TOKENを設定します。

その後Deploysから手動でDeployを実行します。
すると今度はDeployが成功していると思います。

これでプロジェクトのmasterブランチにpushすれば本番環境にbuild・deployされるようになりました。

最後にContentfulでWebhookの設定をしておきます。

## ContentfulでWebhookの設定

このままだとContentfulで記事を投稿しても手動でdeployしないといけないので、
Contentfulで記事が投稿、削除されたらNetlifyに通知し、Deployされるようにしたいと思います。

![ContentfulのWebhooksの設定](//images.ctfassets.net/tr4um6ipof78/2pxGWU6TexqaPm2YwVV2EN/b8a02eba7b1ee477d1947906262230dd/____________________________2020-08-09_19.46.18.png)

例によってこちらもREADMEどおりに進めます。

Netlifyの Settings → Build & Deploy → Build hooksからbuildhookを新たに作成します。

こちらで作成したBuildhookのURLをContentfulのWebhooksに設定します。
ContentfulでSettings→Webhooksを選択し、画面右側のNetlifyのテンプレートを選択します。
以下のNetlifyのAddを選択。
![ContentfulでNetlifyのWebhooksテンプレート](//images.ctfassets.net/tr4um6ipof78/BrwDXP69Dnz9hoIQ6NC18/e79b2b99fa39ddfe52f4e8190858b9ca/____________________________2020-08-09_19.53.10.png)

TriggersにはPublish	Unpublish	Deleteを選択しておきます。

これでWebhooksの設定も完了したのでContentful上で記事の投稿・削除をすればNetlifyに通知され
自動でDeployされるようになりました！

## [FYI]Contact Form

BlogのContactで送られたものはNetlifyのFormsで確認できますが、こちらの通知も設定できますので通知してほしいという方はREADMEにならって設定してください。
![NetlifyのFormsの通知設定](//images.ctfassets.net/tr4um6ipof78/4IyytFE0MGzilLm2wj6z2q/580c68e3cd7b92040e17e7a9a5e68d43/____________________________2020-08-09_20.46.03.png)


ブログの作成手順は以上になります。

なににおいても継続することが成功への近道だと思うので、
しっかりアウトプットしていきたいと思います！

## 参考

- https://quantum-native.com/gatsby-netlify-contentful-web/ ← 大いに参考にさせていただきましたm(_ _)m　ありがとうございます！