手順
1. gatsby-source-microcmsをインストール
yarn add gatsby-source-microcms
2. .env.developmentファイルを作成して以下を記述
.env.development
MICROCMS_API_KEY = ×××××××××××××××××××××××××
3. gatsby-config.jsに以下を記述
gatsby-config.js
module.exports = {
plugins: [
{
resolve: "gatsby-source-microcms",
options: {
apiKey: process.env.MICROCMS_API_KEY,
serviceId: "myblog",
apis: [
{
endpoint: "posts",
},
],
},
},
],
}
用語解説
microCMS
microCMSは日本製のHeadless CMSでCaaS型のCMSです。
Vue.js プロフェッショナルプログラミング p.334
CaaS型
CaaS型（CMS as a Service）は、PaaS（Platform as a Service）型のCMSを指します。
CMSをサービスとして展開している形態で、データなどはそのサービスのクラウド上で保存される形になります。
Vue.js プロフェッショナルプログラミング p.332
HeadlessCMS
HeadlessCMSは、表示部分を持たないCMSで、「ヘッドレス」のヘッドレスはCMSの「表示部分」を指します。
Vue.js プロフェッショナルプログラミング p.239
CMS
CMSとは、Content Manegement Systemの略で、Webサイトのコンテンツを構成する情報（テキスト・画像・レイアウト情報：HTML/CSS/JavaScript）や作成したコンテンツを公開するためのワークフロー（承認フロー）を管理するシステム。代表的なCMSとしては、WordPressやMovable Typeなどが挙げられます。
Vue.js プロフェッショナルプログラミング p.330