この記事では、Aulvem サイトを Astro でゼロから構築する過程と、その中で得た判断のポイントを記録します。 構成選定の理由、ハマった箇所、運用にあたって最初に決めておいたルールまでをまとめます。
結論
- Astro 5 (
output: "static") + MDX + Tailwind + Cloudflare Pages の構成に落ち着いた - 検索は Pagefind、サイトマップ・RSS は Astro 公式統合で十分
- Content Collections を最初から導入したことで、フロントマターのゆれを潰しやすくなった
前提
- 個人で運用する小さなブランドサイト兼メディアという用途
- 派手なインタラクションは不要で、文章と画像中心の表示が大半
- 運用は自分一人、CI はあるが手作業のデプロイもありうる
採用構成と選んだ理由
Astro を選んだ理由
- 静的 HTML 出力で十分な要件に対し、必要なときだけアイランドを使えるバランスが良い
- MDX とコンテンツコレクションが標準でしっかり整っている
- ビルドが速く、Cloudflare Pages との相性が良い
Tailwind を選んだ理由
- デザインを後追いで揃えやすく、必要な部分だけクラスを足していける
- 書く文章中心のサイトで、ユーティリティクラスのコストが負担にならない
詰まった点
Content Collections の slug を schema に書きそうになった
slug は Astro がファイルパスから自動推論するため、スキーマには 入れない のが正解でした。
スキーマに書こうとすると型エラーになり、しばらく原因に気付かず時間を溶かしました。
trailingSlash: "always" と内部リンクの不整合
Astro の設定で末尾スラッシュを必須にしたあと、自分が書く内部リンクが
/blog/foo のままだとリダイレクトが必要になります。
書き始めの段階で すべての内部リンクを /.../ 形式に揃える ルールを敷きました。
まとめ
- 「派手な機能を作る前に、運用ルールを先に決める」のが個人サイトでは効いた
- フロントマターのスキーマと URL の正規化は、初日に決めておくと後で困らない
- 続く記事では、Content Collections の細かい運用 Tips を Build にまとめていきます
このサイトを通じて公開している代表作の一つに ふたりの家計簿（Excel / Google Drive 版） があります。