HugoからAstroへ移行した

2025-08-31

長年運用してきた Hugo 製サイトを、Astro へ載せ替えた。技術的な仕様（URL や表示規約など）は今のままとして、使い勝手はこれまでどおりに保っている。狙いは保守性の向上と生成 AI の活用の2つ。

技術スタック

Node.js / TypeScript
Astro
Tailwind CSS

スクラッチ → AI実装

最初は AI を使わず、Astro を学びながら自分でコーディングしていった。そうしないと、AIの成果物のクオリティを自分でもチェックできないからね。数週間かけて作成した成果物を元に、Claude Codeを使ってREADME.mdとCLAUDE.mdに変換してもらった。

次に、AIによるコーディングの出番。作成したスクラッチのソースは捨てて、README.mdとAGENTS.md (Claude CodeからCodex CLIに乗り換えた) を使って新たにサイトを構築してもらった。結果として、スクラッチ時は Astro の習熟も含めて約 1 週間かかったのに対し、Codex を使った再構築は数時間で完了した。この規模のサイトだとCodexとのやりとりはスムースで、特に詰まるところもなかった。

AGENTS.mdの一部を抜粋しておく。

## URL構造とリダイレクト

- 旧URL: `/diary/YYYYMMDD.html`
- 新URL: `/posts/YYYYMMDD/` または `/posts/YYYYMMDD/pNN`

同じ日に複数エントリがある場合は日付ページへ、単一エントリの場合は直接そのエントリへリダイレクトします。

## 表示ルール（UI）

- 日付の表示形式: 画面表示は `YYYY-MM-DD`、URLは `YYYYMMDD` を維持。
- 一覧（トップ / タグ詳細 / 日付ページ）: タイトルの右端にタグバッジを横並びで表示。タイトルにのみ hover 下線、タグバッジではタイトルに下線が付かない。
- 年詳細（`/years/YYYY`）: 日付見出しは `YYYY-MM-DD`。各エントリはタイトルの右端にタグバッジ表示。
- エントリ（`/posts/YYYYMMDD/pNN`）: タイトル直下にタグバッジ、次行に日付を表示。
- タグ一覧（`/tags`）: 段組レイアウト（`columns-2` 〜 `md:columns-4`）でバッジ表示。各タグ名の右に件数の小バッジを表示。

## タグの正規化（大小区別なし）

- 目的: Life と life のような表記揺れを同一タグとして扱う。
- ルール: `trim().toLowerCase()` により小文字に正規化。
- 実装: `src/lib/tags.ts` の `normalizeTag()` を使用し、
  - パス生成（`/tags/:tag`）は小文字スラグのみを出力
  - タグ一覧の件数は大小を合算
  - タグ詳細の絞り込みも正規化して比較
  - どのページでもタグリンクは小文字スラグに統一

学びとこれから

ロジックがシンプルなこともあり、AIでの爆速開発を体験できた。一方で爆速であるからこそ、作成したコードの意図（AIに意図があればだが）を理解し、レビューするのは、物量的にも大変。対話した後にはREADMEやAGENTSを更新してもらうようにしていた。

また、静的なブログサイト構築という定番中の定番の要件だからこそうまくいった面はありそう。複雑な開発要件で、仕様や意図を正しく伝え、アウトプットをどう評価していくかは、今後の課題かな。

とはいえ、簡単にアウトプットができてくるのは楽しくてやっぱりいいね。Rubyが登場したときの「オレってばスゲー感」を思い出したよ。