Gatsby.jsでcontentfulを使うstarter-gatsby-blog スターターのインストール方法

WEB serviceGatsby.js

この記事では、静的サイトジェネレータの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/

  1. contentful にアカウントを開設する。
  2. contentful に スペースを構築する。
  3. contentful の Space ID、Content Delivery API – access token、Management API access token を取得する。
  4. starter-gatsby-blog をローカル環境にインストールする。
    npx gatsby new starter-gatsby-blog https://github.com/contentful/starter-gatsby-blog
  5. starter-gatsby-blog のセットアップスクリプトを起動する。
    npm run setup
  6. ローカル環境に構築した 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 など資料はそれなりに揃っているので、少しの粘り強さがあれば導入はできるであろう。

タイトルとURLをコピーしました