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

こんにちは、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 を採用しようと考えている方、興味を持っている方の参考にしていただけるとありがたいです。

Gaji-Labo は Jamstack 開発の知見があります

高パフォーマンス、表示が早く、SEO についての不安も少ない Jamstack。フロントエンド開発の専門家として、技術選定からサーバーサイド開発側との調整まで対応が可能です。「Jamstack にしたいが、社内調整ができるか不安」「Jamstack 開発がわかるエンジニアがいない」などのお困りごとに対して、メリット/デメリットの判断からお手伝いできます。まずは一度お気軽に Gaji-Labo にご相談ください。

オンラインでのヒアリングとフルリモートでのプロセス支援にも対応しています。

フロントエンドの相談をする!

投稿者 Ishigaki Shotaro

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