このブログは、Astro で構築されています。
Astroは、コンテンツ中心のサイトを作るためのウェブフレームワークです。ReactやVue、Svelteなどのコンポーネントをそのまま書きながら、ビルド時にHTMLとして出力されるため、デフォルトでJavaScriptがほとんどページに含まれません。「Islands Architecture」という設計思想を採用しており、インタラクティブにすべき部分だけを選んで有効化できます。
ブログに向いている理由
静的サイトのためのフレームワークはたくさんありますが、Astroがブログに特に向いていると思う理由は3点です。
JavaScriptを最小限にできる。ほとんどのブログ記事はJSが不要です。Astroはそのことを前提として設計されていて、何も設定しなければクライアントに送るJSはほぼゼロです。速さとシンプルさが最初からついてきます。
書きなれたReactをそのまま使える。べた書きのHTMLだけで全部実装するのは非現実的ですが、Astroなら.astroファイル内でReactコンポーネントを混在させられます。ヘッダーやカード一覧など、少し複雑な部品が必要なときに自然に使えます。
MDXで記事の自由度が高い。MDXはMarkdownの中にJSXを書けるフォーマットで、AstroはMDXを標準でサポートしています。記事の中にコンポーネントをそのまま埋め込めるため、表現の幅が広がります。例えばこういうことができます：
MDXでネイティブHTML要素も使える（クリックして展開）
実際のパフォーマンスを見てみる
Astroが「速い」というのは体感だけでなく、数値でも確認できます。このブログのLighthouse結果です。
JSを削ればこうなります。数値よりも「ページを開いた瞬間」に速さを感じる体験の差が大きいです。
デザインはPencilで
実装に入る前に、Pencil（ワイヤーフレームツール）でモックを組みました。いつもコードから入って途中で迷走するパターンが多かったので、今回は先にレイアウトを決めてから実装する順番にしました。
結果として、思ったよりずっと納得のいくものができました。ダークテーマ、星のアニメーション背景、記事ページのシンプルな一カラム構成。Pencilでアタリをつけてから手を動かすと、実装中に「これでいいのか」と悩む時間が減ります。次にサイトを作るときも同じ手順にします。