この記事では、静的サイトジェネレータのGatsby.jsからヘッドレスCMSのContentfulのサービスを利用するためのアプリケーションをローカル環境にインストールして動作させるまでの手順をまとめている。
アプリケーションはGatsby Starterのstarter-gatsby-blogを使ってローカル環境に構築する。
一般に公開するまでの説明はしていません。悪しからず。
Gatsby.js だけでなくcontentful の知識もある程度必要になる点にご留意ください。
事前に必要な準備
contentful にアカウントを開設している必要がある。
更に、contentful の下記情報が事前に必要になる。
- Space ID
- Content Delivery API – access token
- Management API access token
starter-gatsby-blog スターターをインストールする手順
Gatsby.jsのcontentfulに対応したスターターはこちら。https://www.gatsbyjs.com/starters/contentful/starter-gatsby-blog/
- contentful にアカウントを開設する。
- contentful に スペースを構築する。
- contentful の Space ID、Content Delivery API – access token、Management API access token を取得する。
- starter-gatsby-blog をローカル環境にインストールする。
npx gatsby new starter-gatsby-blog https://github.com/contentful/starter-gatsby-blog - starter-gatsby-blog のセットアップスクリプトを起動する。
npm run setup - ローカル環境に構築した starter-gatsby-blog を起動する。
http://localhost:8000/
starter-gatsby-blog の設定ファイル
starter-gatsby-blog スターターのインストールコマンド「npm run setup」が正常終了すると、starter-gatsby-blog の導入ディレクトリに下記ファイルが生成されている。
- .env.development
- .env.production
それぞれのファイルには、contentful の space ID と Content Delivery API – access token が記述されている。
starter-gatsby-blog のセットアップスクリプト(npm run setup)はこれらファイルの生成とブログに表示するサンプルデータを contentful に挿入する機能を提供する。
contentful の操作に知見があれば、starter-gatsby-blog のセットアップスクリプト(npm run setup)を使用しなくても starter-gatsby-blog にコンテンツを表示させることは出来るはず。
Gatsby.jsとcontentfulの連携アプリを取り敢えず動作させた感想
Gatsby.js をブログとして利用したいという需要は多いように感じている。
今回は、ヘッドレスCMSである contentful と Gatsby.js の連携について、starter-gatsby-blog というスターターキットを使って試してみた。
Gatsby.js および contentful どちらの知識も乏しいとハードルは高くなると感じられる。
しかし、自動翻訳でも十分に理解できる Readme など資料はそれなりに揃っているので、少しの粘り強さがあれば導入はできるであろう。
