はじめに
2019年のタイミングでJAMstackという言葉が日本で広く使われるようになったタイミングで、Contentful+Netlify+Next.js+Reduxという構成に変更してから、記事を数回しか更新しない中、Next.jsも5年更新されないまま月日が経ちました。
こちらの記事を書くのにあたって、数式を書く必要があり、LaTeX等で表示できるようにしたくなりました。
Next.jsの5年はすごい変化で、更新をするとなったら変更が大きく大変な作業になることは目に見えていました。
そのため今回5年振りに構成を一新して、5年後、10年後も大きな変更なく使える構成を目標に作成していきました。
技術面
CMS
Contentfulの利用を継続。 Markdownで記事内容を管理できるので困っていないので継続。
テンプレートエンジン
Handlebarsを採用。 Handlebarsは軽量なテンプレートエンジンで直近5年メジャーバージョンアップはされていない
Markdown処理
markdown-itで本文をHTML化し、Prism.js でシンタックスハイライトを継続利用。KaTeX用プラグイン（markdown-it-katex）も導入し、数式サポートを実現。
ビルド
ツールらしいツールを利用せずNodeJSでデータをContentfulから取得して、その記事データを元に、HandlebarsでHTMLを作成してbuildディレクトリ配下に配置するようなスクリプトを作成した。
デプロイ
Netlifyはそのまま継続利用。Gitプッシュでビルドが走り、 /build ディレクトリを公開してもらうだけ。
デザイン面
基本的に元のものが気に入っていたので大きな変更はなし。
paddingやmarginなどは2024年の自分が良いと思った数値に微調整。 ロゴについては大きく変わらずRough.jsというライブラリを継続利用し、更新するたびに手書き風なロゴが表示される仕組み。10回に1回くらいすごい下手なロゴになるように乱数調整。
Rough NotationというRough.jsを拡張したライブラリがあることも知ったので導入。リンクの下線が手書き風に
全体的なCSSもhack.cssを継続利用。
2019年ごろから記事のタイトルが書かれるようなOGP画像が流行ってきていて一般化された気がするので文字入りのOGP画像も自動生成されるような仕組みも導入。 canvasを利用し、タイトルが簡単にわかるように。 ogpGenerator
まとめ
この構成のまま5年頑張ります。