Nuxt+MarkdownのヘルプページをNetlifyCMSでもっと使いやすくした

はじめに

約半年振りの投稿になります鈴木です。

今回は半年前に書いた記事のその後を書いていきます。

times.hrbrain.co.jp

Nuxt+Markdownで仕組みを作り、PMやCSメンバーに直接Github上でMarkdownを変更することで記事の追加や更新を行なっていました。

f:id:hrb-suzuki:20191024001847p:plain

半年運用して気づいた問題点

運用していくとヘルプページなので画像を貼りたいという要望が出てきました。 Github上でMarkdownで記事を書いていたため、画像を使うためにはどこかに画像を置いてURLを参照させるようにするかGithub上でレポジトリのstaticディレクトリ以下に画像を置いてそのパスを指定する必要がありました。

エンジニアならまだしも実際に更新しているのは非エンジニアのため、辛いものがありました。

また単にマークダウンに慣れていないために表示崩れが起きてしまうことも多々ありました。

解決方法

そこでHeadless CMSの導入を考えました。 選定するに当たって考えたのが正しい確認フローが実現できるかどうかでした。

色々なHeadless CMSを調べた結果、今回の要件では一番LightそうなNetlify CMSを使うことにしました。

Netlify CMSは他の有名なHeadless CMS異なり、データベースを持たず記事などのデータを全てGitの特定のBranchにCommitすることで行います。 そのため記事の編集の履歴をgitで管理できたり、確認フローにGithub Flowを利用することができたりと開発者の管理のしやすくすることが可能になりました。 問題だった画像のアップロードもNetlify CMSを利用すると管理画面から画像をアップロードした時に、特定のDirectoryに画像を配置してGitにCommitしてくれます。

f:id:hrb-suzuki:20191024002421p:plain

まとめ

Netlify CMSを利用することで簡単に画像のアップロードができるようになりました。 また記事の内容をGitで管理することができるため管理がエンジニアのみる範囲に収まりよかったです。