このブログは最初 Zig の静的サイトジェネレーターで動かしていた。 依存ゼロで標準ライブラリだけ、ビルドも速くてシンプルで気に入っていたけど、MDX を使いたくなったりコンポーネントを差し込みたくなったりして、だんだん Zig だけでは辛くなってきた。
それで React Router v7 + Vite+ (vite-plus) という構成に移行した。
なぜ Vite+ にしたか
Vite+ は Vite のチームが作っている統合ツールチェインで、Vite / Rolldown / Vitest / oxlint / oxfmt がまとめて入っている。
個別にバージョン管理しなくていいのが楽で、vp dev と vp build だけで開発とビルドが完結する。
React Router v7 は ssr: false でもプリレンダリングに対応していて、react-router.config.ts に prerender() を書くだけで静的 HTML を吐いてくれる。GitHub Pages へのデプロイも問題ない。
移行してよかったこと
- MDX が使える — frontmatter も remark / rehype プラグインで処理できる
- シンタックスハイライト — rehype-pretty-code + Shiki でコードブロックがきれいになった
- ホットリロード — Zig のときは毎回ビルドし直していたので、これだけでも体験が違う
- デプロイが簡単 — GitHub Actions で
pnpm install→react-router build→gh-pagesに push するだけ
ハマったところ
CI で vp build を使ったら、プリレンダリングが走らず HTML が生成されなかった。
ローカルでは問題ないのに CI だけ再現する、という地味に厄介なやつ。
結局 react-router build を直接使うことで解決した。vp build は内部で Vite 8 を使っていて、React Router プラグインのプリレンダリングステップとの噛み合わせが悪かったらしい。
ついでに CI を devenv/Nix ベースから pnpm/action-setup + setup-node に切り替えたら、ビルド時間が 1分50秒から 22秒に縮んだ。
Zig はどうするか
Zig 自体は引き続き触っていきたい。 ブログのビルドツールとしては役目を終えたけど、Zig で静的サイトジェネレーターを作った経験はそれはそれで面白かった。 アロケーターを意識しながらコードを書く感覚は、普段 JS/TS ばかり触っていると新鮮だった。
このブログは気軽に書ける場所にしたかったので、慣れた技術スタックに寄せたのは正解だったと思う。