なぜリニューアルしたのか

これまでは、大雑把に言うと React, Tailwind CSS, Vite といった技術スタックだったのですが、依存も多かったですし、React をこの程度の規模で利用するのはオーバースペック感がありました。
軽量なテンプレートエンジンで小さく書き直したいというモチベーションから、リニューアルを決断しました。

要件

テンプレートエンジン化する上での Must 要件は、ブログを Zenn 形式の Markdown で書けるということでした。
Zenn は下記のパッケージを MIT ライセンスで公開しており、これまでも利用してきました。

1. zenn-markdown-html: Zenn 記法の Markdown を HTML に変換するもの
2. zenn-content-css: Zenn 記法の Markdown から変換された HTML に適用する CSS

そのため、これらを利用できる技術スタックという前提で探しました。

技術スタック

11ty

テンプレートエンジンには 11ty を採用しました。他の候補としては Astro も検討しましたが

• Astro の独自フォーマットである .astro へのロックインを避けたかった
• この規模であれば CSS, HTML を愚直に書く戦略で十分だった
• とはいえ全ページ手書きで書くのは嫌だった

以上の理由から、テンプレートエンジンに任せたいことと自前でやりたいことのバランスが最も取りやすそうだった 11ty (HTML + Liquid) を選択しました。

Bun

これは別に Node.js でも良かったのですが、せっかくなので Bun を採用してみました。
Bun はデフォルトで ts のトランスパイラを内蔵しているため、特に追加のパッケージを入れなくてもいいというのは、メリットに感じました。
また ci でのパッケージのインストール速度は Node.js を使っていた時の 7x ぐらい速くなりました。

課題

CSS が太り過ぎていることです。今回は全て自前で書いているため、どうしてもコード量が増えてしまいます...
この辺りはほとんど AI に書かせているのですが、自分が好きでやっている趣味プロジェクトで自分が追いきれていないコードがあるのは嫌なので、リファクタリングしていこうと思っています。