Astro + Bun に移行しました

素の HTML を手書きしていたこのサイトを Astro + Bun 構成に移行しました。見た目や挙動は変えずに、ビルド周りだけ整理した形です。記事の追加も Markdown を置くだけになって、だいぶ書きやすくなりました。

手書き HTML の限界

最初期のこのサイトは、HTML ファイルを2枚手書きしてそのまま配信するだけの構成でした。潔くて気に入っていたのですが、ページが増えるにつれて head の共通部分のコピペ、リンクの張り替え、ブログ記事を JSON からクライアントサイドで描画する処理など、細かい無理が積み重なってきました。特に「記事を書くたびに JSON を編集して HTML の整合性を気にする」のは、更新の腰を確実に重くしていました。

なぜ Astro にしたか

候補は Astro、Next.js、素の Vite の3つでした。決め手は、Astro が「基本は静的 HTML を吐くだけ」という思想だったことです。このサイトはインタラクティブな部分がほぼ CSS アニメーションなので、React のようなランタイムを常駐させる理由がありません。Astro なら既存の HTML/CSS/JS をほぼコピペで .astro ファイルに移せて、出力も以前と同じただの静的ファイル。移行コストが最小でした。

Content Collections で Markdown 記事に型が付くのも地味にうれしいポイントです。frontmatter のフィールドを typo すると、ビルド時に Zod スキーマがエラーで教えてくれます。

Bun の使い心地

パッケージマネージャ兼タスクランナーとして Bun を使っています。bun install が体感一瞬で終わるので、CI のビルド時間も短くなりました。Astro との組み合わせで困ったことは今のところ一度もありません。lockfile(bun.lock)をコミットしておけば、Cloudflare のビルド環境でも同じ依存関係が再現されます。

移行して変わったこと

見た目は1ピクセルも変わっていないのに、記事を書くハードルが劇的に下がりました。Markdown を1ファイル置いて push すれば、ビルドとデプロイが勝手に走って本番に反映されます。「仕組みを整えると更新頻度が上がる」とよく言いますが、本当でした。この記事もその仕組みの上で書いています。