GatsbyJS で構築しているサイトの一部分を Netlify CMS で編集できるようにする

ishigaki

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。

今回は、静的サイトジェネレーターである GatsbyJS で構築しているサイトの一部分を、Headless CMSの1つである Netlify CMS で編集できるようにする方法についてまとめたいと思います。

やりたいこと

弊社のコーポレートサイトは GatsbyJS + Netlify + Netlify CMS で構築されていますが、サイトを運用する上で、あるページの更新頻度の高そうな一部分だけをCMSで編集できるようにしたいという要望が社内で上がりました。

CMS 上に固定ページのような編集画面があり、そこでコンテンツを編集すればサイト側に反映されるイメージです。

「一部分だけをCMS化する」というのは WordPress などでも実現可能なことではありますが、静的サイトジェネレーター (今回は GatsbyJS) とHeadless CMS (今回は Netlify CMS) との組み合わせであれば速く簡単に実装することができます。

行った作業

1.CMS で編集できるようにしたいコンテンツのマークダウン化

最初に、ページの JSX に直接書かれているコンテンツをマークダウンに切り出しました。

以下がマークダウンのサンプルです。

---
title: CMS編集箇所サンプル
type: cms-editable-content
contents:
  - title: |-
      コンテンツ1タイトル
    content: |-
      コンテンツ1内容
  - title: |-
      コンテンツ2タイトル
    content: |-
      コンテンツ2内容
---

2.作成したマークダウンを Netlify CMS で編集できるように設定

前項で作成したマークダウンを編集できるように、 config.yml に設定を追加しました。

以下が設定のサンプルです。

collections:
  - name: 'cms-editable-content' // マークダウンの type と合致させます
    label: 'CMS編集箇所サンプル' // CMSで表示されるコレクション名です
    folder: 'src/pages/sample' // マークダウンを置いたディレクトリを指定します
    create: false // 記事ではなく、新しく作成する必要がないため、新規作成を禁止します
    slug: 'cms-editable-content' // マークダウンのファイル名と合致させます
    identifier_field: '{fields.title}'
    fields:
      - {
          label: 'Title',
          name: 'title',
          widget: 'hidden',
          default: 'CMS編集箇所サンプル',
        }
      - {
          label: 'Template type',
          name: 'type',
          widget: 'hidden',
          default: 'cms-editable-content', // マークダウンの type と合致させます
        }
      - label: 'コンテンツ' // 以下、編集可能にするコンテンツのフィールド設定です
        name: 'contents'
        widget: 'list'
        fields:
          - { label: 'タイトル (必須)', name: 'title', widget: 'markdown' }
          - {
              label: '内容 (必須)',
              name: 'content',
              widget: 'markdown',
            }

3.ページのJSXから直接書かれていたコンテンツを削除し、GraphQLで取得して反映させるように置き換える

以下のGraphQLでマークダウンのデータを取得し、ページに反映しました。

src/pages/sample/index.jsx

contentsList: allMarkdownRemark(
  filter: { frontmatter: { type: { eq: "cms-editable-content" } } }
) {
  edges {
    node {
      id
      frontmatter {
        contents {
          title
          content
        }
      }
    }
  }
}

4.作成したマークダウンと追加した設定を本番に反映する

最後に config.yml で設定したCMS用の本番ブランチに以上の作業を反映しました。

出来たこと

本番に反映後、マークダウンの編集がCMSから可能になります。

作成したマークダウンのCMSでの編集画面

これで任意の箇所をNetlify CMSで編集可能にすることが出来ました。

まとめ

今回は、GatsbyJS で構築しているサイトの一部分を Netlify CMS で編集できるようにする方法についてまとめました。

GatsbyJS + Netlify CMSの組み合わせで Jamstack を採用しようと考えている方、興味を持っている方の参考にしていただけるとありがたいです。

シリーズ「Netlify CMSを実践で使ってみた」として、他にもNetlify CMSの感触・知見・TIPSについて書いた記事をまとめています。Netlify CMSやNetlify関連の周辺トピックに興味のある方は、シリーズの他の記事もぜひ読んでいただけたらと思います!

Gaji-Laboでは、JavaScriptフレームワーク経験が豊富なパートナーさんを募集しています

Gaji-Laboでは、開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。

現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。React + TypeScript、Vue.js、Next.js、Nuxt.js など、あなたの得意なフレームワークを教えて下さい!

パートナー契約へのお問い合わせもお仕事へのお問い合わせも、どちらもいつでも大歓迎です。まずはオンラインでのリモート面談からはじめましょう。ぜひお気軽にお問い合わせください!

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

アシスタントエンジニアとしてHTML/CSS/JavaScriptの実装やRailsの組み込み、スタイルガイドの構築などを担当しています。 業務の中でさまざまな学びを吸収しながら、文書構造やアクセシビリティに目を向けたマークアップの学習やJavaScriptの学習などを行っています。チームに貢献できるエンジニアとなるために日々奮闘中です。