ブログURLを /blog から /devblog へ完全移行した

背景

このサイトの開発ブログはこれまで /blog というURLで公開していました。今回、/blog パスに別の新機能を実装する予定が生まれたため、既存の開発ブログを /devblog へ移行することにしました。

単にページファイルのディレクトリを変えるだけでなく、blog という名前自体を完全に解放することが目標でした。将来の新機能が blog という名前のルーティングやコンテンツコレクションを自由に使えるよう、名前空間ごと空けるアプローチです。

移行した範囲

今回の変更は URL だけでなく、Astro の内部構造にも及びました。

ディレクトリの移動:

コード内の参照の変更:

意図的に変えなかったもの:

後から発覚した漏れ

初回の移行後、ブランチプレビューで確認したところ、一覧ページの記事リンクがすべて 404 になっていました。

原因は、テンプレートリテラル内の /blog パスが置換の対象から漏れていたことでした。

// 修正前(一覧ページのリンク生成部分)
`/blog/${post.slug}`
`/blog?category=${encodeURIComponent(cat)}`

// 修正後
`/devblog/${post.slug}`
`/devblog?category=${encodeURIComponent(cat)}`

通常の文字列リテラル('/blog/')は sed で一括置換できていましたが、バッククォートで始まるテンプレートリテラルはパターンに含めていなかったため見落としていました。

また個別記事ページでは、カテゴリーのリンク形式が古い /blog/category/xxx というパス形式のまま残っていました。現在のサイトではカテゴリーはクエリパラメータ形式(/devblog?category=xxx)で処理されているため、形式ごと変更する必要がありました。

// 修正前(旧パス形式)
`/blog/category/${category}`

// 修正後(クエリパラメータ形式)
`/devblog?category=${encodeURIComponent(category)}`

encodeURIComponent() を追加したのは、カテゴリー名に日本語が含まれる場合に URL エンコードが必要なためです。

Astro のコンテンツコレクションと URL の分離

今回の作業で改めて確認したのは、Astro においてページの URL とコンテンツコレクション名は別物だということです。

src/pages/devblog/ を作っただけでは getCollection('blog') は変わらず古いコレクションを参照したままになります。コードの参照も getCollection('devblog') に書き換えるとともに、src/content/devblog/ へのディレクトリ移動も必要でした。

移行後の確認ポイント