Gatsbyjs + Netlify + Contentful で Blogを作成

今回作成するサイトのDemoです。
こちらが今回実際に作成したBlogです。

以前にgatsby-starter-blogでブログを作成したのですがCMSを利用したいと思い、
新たにgatsby-starter-gcnでブログを作成したので備忘録を残します。

利用したサービス

Gatsbyjs

GatsbyjsはReactを利用したモダンなサイトを高速に作成できるオープンソースフレームワークです。
Gatsbyjsでなにか作りたい方はテンプレートが豊富に用意されているので、そちらを利用するといいと思います。

Netlify

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

Contentful

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

ブログ作成手順

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

Gatsbyプロジェクトの作成

まずはこちらのリンクからGatsbyjsのテーマを選びます。
今回はGatsbyjs + contentful + Netlifyという構成にしたかったので、
gatsby-starter-gcnを選びました。

上記リンク先のSourceからGithubにとべるので、そちらの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

次にこちらにしたがってContetfulの設定をしていきます。

まずcontentfulのアカウントを作成し、空ページを作ります。

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

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

次に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に沿って設定していきます。

Netlifyのアカウントを作成したらこちらから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されるようにしたいと思います。

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

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

こちらで作成したBuildhookのURLをContentfulのWebhooksに設定します。
ContentfulでSettings→Webhooksを選択し、画面右側のNetlifyのテンプレートを選択します。
以下のNetlifyのAddを選択。

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

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

[FYI]Contact Form

BlogのContactで送られたものはNetlifyのFormsで確認できますが、こちらの通知も設定できますので通知してほしいという方はREADMEにならって設定してください。

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

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

参考

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

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