Gatsbyでのコンテンツ管理方法

Gatsbyではマークダウン、Googleスプレッドシート、Wordpressなどの従来のCMSなどの様々なデータソースを選択することができます。
そして、１つのデータソースに限る必要もなく、複数のデータソースを組み合わせることもできます。

Contentfulについてについて

Contentful】入門。Conentfulとは？導入方法・設定手順の解説
https://fromscratch-y.work/ja/blog/technology/other/start-contentful/

【画像解説】Contentfulの使い方【活用方法も紹介】
https://colorfree-map.com/howto-contentful

GraphQLでContentfulのデータを扱うための準備

プラグインの準備

yarn add gatsby-plugin-contentful

gatsby-config.jsにプラグインの設定を追加します。 optionsではContentfulのSpaceID,AccessToken, HOSTを指定する。
ただし、ファイルを直接記述せず環境変数を利用します。（ファイル中にトークンを残したくないため、環境変数を使用する）

＊環境変数とは、OSが設定値などを永続的に保存し、利用者や実行されるプログラムから設定・参照できるようにしたもの。プログラムの実行時などに必要となる、利用者やコンピュータごとに内容が異なる設定値などを記録するために用いられる。

{
resolve: `gatsby-source-contentful`,
options: {
  spaceId: process.env.CONTENTFUL_SPACE_ID;
  accessToken: process.env.CONTENTFUL_ACCESS_TOKEN;
  host: process.env.CONTENTFUL_HOST;
 },
},

開発サーバーの起動

環境変数にした３つの値を指定して、開発サーバーを起動します。（デプロイ時にも環境変数が必要になる）

CONTENTFUL_SPACE_ID=***** CONTENTFUL_ACCESS_TOKEN=***** CONTENTFUL_HOST=cdn.contentful.com gatsby develop -H 0.0.0.0

GraphiQLで確認する

GraphiQLにアクセスして、プラグインが機能していることを確認します。

参考文献：
Webサイト高速化のための静的サイトジェネレーター　GatsbyJSで実現する高速＆実用的なサイト構築
IT用語辞典：http://e-words.jp/w/%E7%92%B0%E5%A2%83%E5%A4%89%E6%95%B0.html