【脱WordPress】Claude CodeでブログをAstroに移行したら、表示速度が約50倍になった
WordPressで運営してきたこのブログを、Astro（記事サイトを作ることに特化したツール）で作り直しました。作業は Claude Code に依頼して進めています。いま読んでいるこのページも、作り直したAstro版です。
この記事では、なぜ作り直したのか、なぜAstroを選んだのか、移行の途中で何が見つかったのかを書きます。作業手順の解説ではなく、技術選定の理由と、実際に起きたことが中心です。
この引っ越しは2本の記事に分けて書いています。 前編（この記事）：サイトをAstroで作り直すまで 後編：Cloudflare Workersに載せて、本番ドメインを切り替えるまで
なぜ作り直したのか
理由は3つあります。
1. レンタルサーバーの契約が2027年1月で切れる
このブログはClaude CodeでWordPressブログを開設したときから、レンタルサーバーで動いてきました。契約は2027年1月まで。それまでに移行を終えて、契約を更新しなければ、ブログの固定費はゼロになります。
移行先のCloudflare（Webサイトを公開できるサービス）は、個人ブログ程度のアクセスなら無料枠に収まります。
2. 記事が5本しかない今が、一番安く済む
移行の手間は記事数に比例します。記事が50本になってからやるより、5本の今やるのが一番ラクです。「いつかやろう」と思っているうちに記事が増えて、どんどん腰が重くなるのは目に見えていました。
3. 移行作業そのものが記事になる
このブログは、自分が実際に手を動かした記録を書く場所です。移行も例外ではありません。現にこうして記事になっています。
Astroを選んだ理由
前提：Next.jsしか触ったことがなかった
私がこれまで触ったことのあるのは Next.js（Webサイトやアプリを作るための枠組み）だけです。以前、別のサイトをNext.jsで作った経験があります。普通に考えれば、今回もNext.jsを選ぶのが自然でした。
それでもAstroにしたのは、Next.jsをCloudflareに載せたときの苦労を覚えていたからです。
Next.js + Cloudflareは「バージョン合わせ」がつらい
Next.jsをCloudflareで動かすには、アダプタ（枠組みと公開先の間を取り持つ変換部品）が必要です。具体的にはNext.js本体・@opennextjs/cloudflare・wranglerの3点セットで、この3つのバージョンの組み合わせを揃える必要があります。以前これでかなり苦労しました。どれかを上げると別のどれかが動かなくなる、という消耗戦です。
Astroの静的出力なら、アダプタ自体が要らない
一方Astroを「静的出力」（あらかじめ全ページを完成したファイルとして作っておく方式）で使う場合、アダプタがそもそも不要です。出来上がるのはただのHTMLファイルの束なので、置き場所を選びません。バージョン合わせの消耗戦が、構造的に発生しないわけです。
ブログは「書いた記事を表示するだけ」のサイトなので、これで困りません。
記事サイト専用の設計になっている
今回使ったAstro 7は記事サイト・コンテンツサイト向けに設計されていて、既定ではJavaScriptを配信しません。何もしなくてもページが軽くなる方向に、初期設定が倒してあります。
もうひとつ大きいのが、記事の持ち方です。WordPressは記事をデータベースに保存しますが、Astroの記事は MDXファイル（Markdownというテキスト形式の拡張版）です。ただのテキストファイルなので、git（変更履歴を管理する仕組み）がそのまま記事の履歴になります。データベースのバックアップという心配ごと自体が消えます。
実際にやったこと
移植作業はClaude Codeに任せました。やったことを列挙します。
- 記事5本をAstroの Content Collections（記事を型付きで管理する仕組み）に移植。
title/description/pubDate/eyecatch/category/legacyPathを型定義した - 画像7枚を WebP（軽い画像形式）に変換。合計7.4MBが356KBになった（95%削減）
- カテゴリ3種（Claude Code / Java学習 / 開発環境）と、サイドバー（人気記事・新着記事・カテゴリ一覧）を追加
- 目次を記事の見出しから自動生成
- サイトマップ・RSS・robots.txt（検索エンジン向けのファイル一式）を生成
移行後の記事は、たとえばこんな形のテキストファイルです。
---
title: "【マネフォ卒業】Claude Codeで家計簿アプリを自作したらコスト0円で全部解決した話"
pubDate: 2026-05-14
category: "claude-code"
legacyPath: "/2026/05/14/claude-code-kakeibo-app/"
---legacyPath は、WordPress時代の日付入りURLから新URLへ転送するための情報です（転送まわりの話は後編で書きます）。
WordPressでプラグインに任せていた部分（サイトマップ・目次・カテゴリ表示）は、すべて自前のコードに置き換わりました。プラグインの更新や相性問題からも解放されます。
移行は「引っ越し」であり「棚卸し」だった
今回いちばん予想外だったのがここです。移行のために全記事・全ページをClaude Codeと突き合わせたところ、既存サイトの不具合が4つ見つかりました。
- 運営者情報のnoteへのリンクが404になっていた。 URLを間違えたまま、公開からずっと気づいていませんでした
- プライバシーポリシーに「Googleアナリティクスを利用しています」と書いてあったが、実際には未導入だった。 定型文を貼ったまま、実態と食い違っていました
- 記事どうしの内部リンク8本が、すべて旧URLを指したままだった
- 家計簿記事のスクリーンショットが、WordPress側にしか存在しなかった。 手元の原稿には無く、移行時に気づかなければ画像ごと消えていました
どれも、管理画面を毎日見ていても気づかない類のものです。移行という機会がなければ、404のリンクは今も放置されていたと思います。サイトの引っ越しは、サイトの健康診断を兼ねる。これは今回の発見でした。
公開記事と手元の原稿のズレも確認した
もうひとつ、慎重にやったのが原稿の突き合わせです。手元に記事の原稿ファイルは残っていましたが、公開後にWordPressの管理画面上で直した箇所があると、手元の原稿だけを移行したのでは修正が消えます。
そこで、WordPressの公開記事と手元の原稿の見出し構造を突き合わせて確認しました。結果は全記事一致。手元の原稿をそのまま移行できました。
記事タイトルは、WordPress側（＝実際に検索エンジンに載っている方）を正としています。移行でタイトルが変わると、検索結果とページの中身が食い違うためです。
結果（実測値）
数字で比較します。
| 項目 | WordPress | Astro |
|---|---|---|
| トップページの表示 | 2.75秒 / 97KB | 0.05秒 / 9.3KB |
| サイト全体の容量 | ー | 616KB（画像込み） |
| ビルド | ー | 12ページを0.4〜0.9秒で生成 |
表示速度は約50倍になりました。WordPressの出来が悪いというより、アクセスのたびにデータベースからページを組み立てる方式と、完成済みのファイルを返すだけの方式の、仕組みの差です。
サイト全体で616KBというのは、スマホで撮った写真1枚より小さいサイズです。旧WordPressではトップページ1枚だけで97KBありました。
本番の切り替えは後編で
作り直したサイトはCloudflareに載せて、ドメインをWordPressから切り替えて公開しました。この「本番切り替え」はドメインの向き先の変更や旧URLからの転送設定が絡むので、後編に分けています。
🔗 後編：Claude CodeでWordPressからCloudflare Workersに引っ越した話。DNSを触らずに本番を切り替える
まとめ
- レンタルサーバー契約が切れる2027年1月に向けてWordPressを畳む。以後、ブログの固定費はゼロになる
- Next.jsではなくAstroを選んだ決め手は、静的出力ならアダプタのバージョン合わせが構造的に発生しないこと
- 記事はデータベースからテキストファイルになり、gitが履歴を持つ
- 表示速度は 2.75秒 → 0.05秒（約50倍）、サイト全体は 616KB
- 移行は棚卸しになった。404リンク・実態と違うプライバシーポリシー・旧URLのままの内部リンク8本・WordPressにしか無かった画像が見つかった
- 移行コストは記事数に比例する。記事が少ないうちにやるのが一番安い
次回は、Cloudflareへの公開と本番切り替え（ドメイン・旧URLからの転送）について書きます。