CMSを刷新した

こんにちは。久しぶりのブログ更新です。

CMSを作りたい

このブログを最後に更新したのは5か月くらい前ですね…。

更新していなかった理由としてはAIが出てきて書くことがないな～というのもありますが、CMSがなくて更新するためにわざわざPCでVSCodeを開く必要があったというのが大きいです。

かねがね、スマホなどでも簡単に記事を書けるようにCMSが欲しいとは思っていて、昨年末にHugo用のCMSを作ってはいました。

しかし、プレビュー周りの調整が面倒でしばらく放置していました。

一方で最近は日常用のブログが増えてCMSの個人的需要が増加し、AIの力も借りれるのでCMSを刷新しようとなりました。

成果物は以下です。

GitHub - kitashimauni/homecms

Contribute to kitashimauni/homecms development by creating an account on GitHub.

github.com

CMSの構成

さて、CMSを作るにあたっては以下のようにいくつか考えなければならないことがあります。

機能要件

記事の編集以外にどのような機能を置くかを考えたときに、以下があるとうれしいなと思いました。

• 複数のブログサイトの記事を編集できる
• プレビューをリアルタイムで確認することができる

プレビューの方法

このブログに使用しているHugoや日常用のブログで使用しているEleventyは静的サイトです。なので、サイト自身にCMSの機能を組み込んだとしてもサイトの見た目でリアルタイムにプレビューするのは難しいです。

妥協して単なるMarkdownの可視化でいいならSveltia CMSなどがありますが、妥協したくなかったので完全なリアルタムプレビューを目指しました。

今回はサーバーが使えるので、サーバー上でHugoなどのプレビュー用のプロセスを立てておき、それをCMS内のiframeに埋め込む方式をとっています。

このとき、CMSのドメインがcms.example.comのようになっていて、プレビュー用のプロセスには*.preview.exmaple.comのようなドメインが紐づけられています。

プレビュー用のドメインではサイトごとにサブドメインを切ることで複数サイトに対応します。

実際に使った感想

Eleventyのビルドが遅いです。まだ数記事しかないのですが、画像が重いせいかプレビューが表示されるまで数十秒かかります。Hugoがいかに速いかを思い知りました。

この記事もCMSを使って書いてますが、結構実用的なんじゃないかなと思いました。プレビューの速度も十分ありますし、スマホでも簡単に操作できます。

使っていく中で微妙な点を解消してきたいところ。