Netlify CMSを使っている環境で、CMSでのコンテンツ作成とCMSを介さないコンテンツ作成を同時に行っている際に気をつけたいこと

ishigaki

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

今回は GatsbyJS + Netlify CMS の環境で、Netlify CMS を使用してのコンテンツ作成と、CMSを介さずファイルを直接編集してのコンテンツ作成を同時に行っている際に気をつけたいことについてまとめたいと思います。

Netlify CMSの仕様について

Netlify CMSGatsbyJSなどの静的サイトジェネレーターと組み合わせて使用するHeadless CMSの1つです。Netlify CMSについてはこちらの記事「Gaji-LaboのコーポレートサイトはNetlify CMSを使っています」もご覧ください。

通常、静的サイトジェネレーターは Markdown ファイルなどを追加してコンテンツを作成しますが、Netlify CMSを使用すると直接ファイルを触ることなくコンテンツを作成することができます。

Netlify CMS上でコンテンツを作成・更新すると、連携したGitHubのリポジトリに作業が自動的に push されるという形で反映されます。

その作業内容自体は単に Markdown ファイルの作成・修正を行っているだけなので、CMS上で行ったことと同等の作業を直接ファイルを編集することで行うことも出来ます。

Markdown を書くことに慣れており、Git 操作に長けた人であればCMSを使うより直接更新した方が早い時があるかもしれません。

しかし、Netlify CMSを使った更新と直接ファイルを編集しての更新を併用して行っている場合、気をつけなければいけない点が数点あります。

注意点

直接 Markdown ファイルを追加した場合、 CMSの config.yml で設定した branch にアップしないとCMSで確認ができない

Netlify CMS は以下のように、config.yml で指定した branch 上を基準に動いています。

static/admin/config.yml

backend:
  name: git-gateway
  branch: master # ここで指定した branch がCMSの Production branch になる

この branch にファイルが存在しないとCMSに認識されず、CMS上で確認することができません。

そのため、作業を該当 branch にマージするなどして、ファイルをこの branch に存在させる必要があります。

CMSが自動作成したPRに直接作業を追加し、更にCMSで変更を加えると、force-push されて直接追加した方の作業が消える

Editional Workflow 機能を使っている際、CMSでコンテンツを下書き保存するとPRが自動で作成されます。

作られたPRの branch に移動すればその branch 上で更に作業を行うこともできますが、作業追加後に更にCMSで変更を加え、保存するとPRに force-push が自動的に行われ、直接追加した方の作業が消えてしまうという仕様があります。

そのため、CMSにより自動作成されたPRと、直接ファイルを編集して作成したPRは完全に切り分けるのが無難です。

直接 Markdown を編集した時にCMSの編集画面に古い入力がキャッシュで残っていることがある

CMS上に既に上がっている Markdown ファイルを編集した際、Production Branch に反映した後でも編集画面に古い入力がキャッシュで残っていることがあります。

少し時間を置くと解消されますが、これはブラウザのキャッシュではなく、CMSの方で保持しているデータが残ってしまっているようです。

まとめ

今回は Netlify CMS を使っていて、なおかつCMSを介さない直接編集も行っている時に気をつけたいことについてまとめました。参考にしていただけると嬉しいです。

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

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

現在、Gaji-Laboの開発チームの一員としてプロジェクトに一緒に取り組んでくれる業務委託のパートナーさんを募集しています。現在は特にJavaScriptフレームワーク実践と業務経験が豊富なWebフロントエンドエンジニアを必要としています。

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

お問い合わせしてみる!


ishigaki

投稿者 石垣 祥太郎

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