[Astro] WordPressからAstro + Cloudflare Pagesに移行した話
Tech![[Astro] WordPressからAstro + Cloudflare Pagesに移行した話](/images/blog/covers/wordpress-to-astro.svg)
長らく WordPress で運用していたこのブログを、Astro（静的サイトジェネレーター）+ Cloudflare Pages に移行しました。 やったことが多かったので、まずは全体像をまとめておきます。細かい手順は記事ごとに分けて書いていきます。
なぜ移行したか
- WordPress は管理・更新・セキュリティ対応が地味に重い（PHP / DB / プラグインのアップデート）
- 個人の技術ブログで動的機能はほぼ不要。完全静的で十分
- 記事を Markdown + Git で管理したい
- サーバー代を抑えたい（Cloudflare Pages は静的配信が無料枠で完結）
構成（技術スタック）
| 役割 | 採用したもの |
|---|---|
| サイト生成 | Astro 6（output: 'static'） |
| スタイル | Tailwind CSS v4（@tailwindcss/vite）+ Typography |
| コードハイライト | Shiki（github-light / github-dark のデュアルテーマ） |
| 全文検索 | Pagefind（ビルド後にインデックス生成） |
| ホスティング | Cloudflare Pages（Git push で自動デプロイ） |
| 記事管理 | Markdown + Astro Content Collections（glob loader） |
記事は src/content/blog/ に YYYY-MM-DD-slug.md で置き、frontmatter でタイトルやカテゴリを管理する形にしました。
---
title: "記事タイトル"
pubDate: 2026-06-17
category: tech
tags: ["Astro"]
thumbnail: /images/no-image.png
---
本文（Markdown）移行でやったこと
ざっくり、こんな順番で進めました。
- 記事データの移行 — WordPress のエクスポート（WXR）を Markdown に変換
- デザインの作り直し — Tailwind CSS v4 でテーマを再構築
- 検索の用意 — Pagefind で全文検索を後付け
- 旧URLの引き継ぎ — Cloudflare Pages の
_redirectsで 301 リダイレクト - 収益化 — Google AdSense を再設置
それぞれ別記事に書いていきます。
- WordPressエクスポート(WXR)を turndown でMarkdownに変換する
- Tailwind CSS v4 を設定ファイルなしで Astro に導入する
- Pagefind で静的サイトに全文検索を後付けする
- _redirects で旧WordPressの /投稿ID/ を301リダイレクトする
- Astro(静的サイト)に AdSense の自動広告と手動ユニットを入れる
そのほか、構築まわりで書いたものはこちら。
- Content Collections + glob loader で Markdown ブログを作る
- @astrojs/rss と @astrojs/sitemap で RSS・サイトマップを出力する
- Markdownのコードハイライトを Shiki でライト/ダーク両対応にする
移行してどうだったか
- ページ表示が速くなった（静的HTML配信）
- 記事を手元のエディタ + Git で書けるのが快適
- DB もプラグイン更新も無いので運用が軽い
- デプロイは push するだけ
動的機能が要らない個人ブログなら、Astro + Cloudflare Pages はかなり相性が良いと感じました。
Astro, WordPress, Cloudflare Pages