headlessCMSを触ってみた！

コーディングデザインのフロントエンドHTML&CSSデベロッパー森です。

10月16日のてげWebはもくもく会にしていて、あらかじめheadlessCMSを触ることにしていたのでちょいとそのまとめを書いておきます。

そもそもheadlessCMSって何？

ざっくりというとサーバでページの組み立てをしてクライアントに送る仕組みじゃなくて、
サーバからはAPIに応じてデータを渡し、クライアントでページを組み立てる仕組みのようです。

こちらのQiitaをどうぞ。

学習コスト、開発コストが高いとのこと。むむ。

Netlifyなら1クリックでheadlessCMSを導入できる

WordPress、Jimdo、Tumblrなどの既存のCMSじゃなくて静的サイトジェネレーターというのがよく聞かれるようになって、どんなのがあるのかなと調べていて出てきたのが、StaticGen。
これは静的サイトをホスティングできるNetlifyが運用しているWebサービスで1クリックでNetlifyに静的サイトを導入できるボタンがついてる。

StaticGenのナビゲーションに「Need a Static CMS?」とあり、クリックして表示されたのがheadlessCMSというWebサービスでした。こちらにもNetlifyに1クリックで導入できるNetlify CMSというのがありました。

Netlify CMSは静的サイトジェネレーターにGUIの管理画面をつけることができるということで、既存のCMSのかわりに導入できるのでは？と思った次第。静的サイトジェネレーターはDBを使わず、markdownファイルでページを作り出すようになってます。

さて、先に現時点の話をします。
扱うファイルが多すぎて、オリジナルテーマを作るのは結構ハードルが高い。

基本のテンプレートでのサイト作成はたしかに数クリックくらいだけどすぐできる（gitリポジトリの設定がある）。
ただ、GUIの管理画面の導入はあともう1手、Netlify Identityの設定が必要でした。
詳しくは逆引きマニュアル: Netlify CMS + Hugo + GitLabの導入方法の「Netlify Identityの設定」を参照。
ほんとにここを書いてくださった方に感謝。

これで無事GUIの管理画面も見られるようになりました。
ローカル環境では npm install と npm run start であっという間に環境ができあがり。
gitでリポジトリのmasterブランチにpushすれば自動でビルドがかかってNetlify環境に公開されます。

configファイルで設定をいろいろいじれるのはOK、でもテーマを作るのにはちょっとファイルが多すぎて、もくもく会では時間が足りず、むむむむむむ、となりました。

とはいえDBを介さないのでシンプルに作れるのは魅力的。
落ち着いたらもう少し突っ込んで手を動かしたいとおもったことでした。