Blog Operations

WordPressを卒業してAstro + Cloudflare Pagesに移行した話

Otama
10分で読了

長年お世話になったWordPressとさくらレンタルサーバーを解約しました。 これからは Astro + Cloudflare Pages + Git という、いわゆる「モダン」な構成でブログを運用していきます。

「なんで変えたの？」と聞かれれば、理由はいくつかあります。 サーバー代を浮かせたいとか、WordPressの管理画面に入るのが億劫になったとか、スパム多すぎとか、そもそも重すぎとか。 でも一番の理由は「全部自分の管理下に置きたい」「爆速にしたい」「Markdownで書きたい」というエンジニア特有のエゴかもしれません。

移行作業はそれなりに大変だったので、備忘録も兼ねて手順やハマったポイントを書き残しておきます。

全体的な流れ

やったことは大体こんな感じです。

  1. 脱出準備: さくらレンタルサーバー上のWordPressからデータをぶっこ抜く。Markdownに気合で変換。
  2. 開発: Astroでブログサイトを構築。ここが一番長い。
  3. デプロイ: GitHubにPushしてCloudflare Pagesにデプロイ。
  4. インフラ整備: CloudflareでDNS設定。
  5. 後始末: さくらレンタルサーバー解約。さようなら固定費。

インフラ周りは「ポチポチ」で終わるんですが、大変なのはやっぱり「2. 開発」と「データの移行」でした。

開発・移行でハマったポイント

Astroは最高ですが、WordPressのように「プラグインを入れたら終わり」ではありません。 「あ、あれがない」「これも自分で作るのか」の連続です。

1. 記事データの移行と整形

WordPressのエクスポートデータをMarkdownに変換するところまではツールで一発なんですが、中身が結構汚い。 HTMLタグが混ざっていたり、謎のショートコードが残っていたり。

特に困ったのが「記事の要約（Description）がない」問題。 元のブログではメタディスクリプションをちゃんと設定していなかったので、移行後の記事一覧が寂しいことになりました。 HTMLをスクレイピングしようにも構造がバラバラで断念。 最終的に、「過去のRSSフィードからDescriptionを引っこ抜く」という力技で解決しました。

2. デザインと実装（バイブコーディング）

今回、デザインやフロントエンドの実装は、流行りの「Vibe Coding（バイブコーディング）」で行いました。 「いい感じにして」「シュッとさせて」とAIに投げて、返ってきたコードを適用する。以下の機能は全部AIと一緒に作りました。

  • リンクカード（ブログカード）: URLだけの行を正規表現で検出して、OGPデータを取得していい感じのカードにするオレオレ実装。
  • モバイル対応: スマホで数式やURLが画面からはみ出す問題を overflow-x: auto でいい感じに処理。
  • プレミアムなUI: 透過ヘッダー、ダークモード、スクロールに追従する目次（TOC）など。

で、実際どうだったかというと…

バイブコーディングの良さ

  • 爆速: 圧倒的に速いです。「〇〇のコンポーネント作りたい」と思ってから動くものができるまで数分。
  • デザインリテラシー不要: 「今風にして」と言えば、それっぽいデザインが出てきます。
  • 面倒な処理もお任せ: 自分で書きたくない正規表現（URL検出など）も一瞬で書いてくれます。

バイブコーディングの難しさ（尻拭い）

  • 整合性が取れない: AIは「その場その場」で最適解を出してきますが、全体としての統一感や整合性は見てくれません。パーツごとのつぎはぎになりがちです。
  • デバッグが辛い: AIが書いたコードは、いわば「他人が書いたコード」です。動かない時、なぜ動かないのかを追うのが地味にストレス。
    • 例えば、目次（TOC）のスクロールに連動したハイライトなんかは、AIが出したコードが微妙に動かず、結局自分でデバッグして直しました。
  • 微調整の無限ループ: 「おしい、そうじゃない」を繰り返していると、自分で書いた方が早かったのでは？という疑念が頭をよぎります。

楽をするつもりが、「AIが出したコードの尻拭い」に時間を費やす、現代的な本末転倒を味わいました。まあ、それもまた一興ですが。

技術スタックごとの振り返り（選定理由と良し悪し）

今回の移行で採用した「Astro」「Cloudflare Pages」「GitHub」の組み合わせ。 個人的には「エンジニア向けブログ」として現時点での最適解だと思っていますが、万人に勧められるわけではありません。 それぞれの選定理由と、実際に使ってみて感じたメリット・デメリットを整理しました。

1. Astro

選定理由: 「とにかく速い静的サイトを作りたい」というのが第一ですが、SSG（静的サイト生成）なので無料で使えるホスティングサービス（Cloudflare Pagesなど）に簡単にデプロイできるという点も大きかったです。 ReactやVueはブログには重すぎるし、Next.jsは機能過多。「可能な限りJavaScriptをクライアントに送らない（Islands Architecture）」というAstroの思想にも惹かれました。 あと決め手になったのは、Markdownで記事を管理するにあたり、Astroの Content Collections API が最高に都合が良かったこと。Markdownファイルの読み込みや型定義などの取り回しが、圧倒的に楽でした。

  • Good（良かったこと）
    • 爆速: テキトーな実装でもLighthouseのスコアが100点近く出ます。余計なJSがないので読み込みが一瞬。
    • Content Collections: Markdownのフロントマターを型定義できるのが革命的。「日付忘れ」などのミスを防げます。加えて、getCollection() でディレクトリ内のMarkdownを一括取得できるのも最高。DB接続も複雑なクエリも不要で、記事一覧がサクッと作れます。
    • DX（開発者体験）: .astro ファイルが直感的に書けるし、Markdownとの親和性が高い。
  • Bad（大変なこと）
    • 「全部自作」の覚悟: ページネーション、関連記事、タグ一覧…WordPressならプラグイン一つの機能も、ロジックを自分で書く必要があります。
    • 動的機能の弱さ: コメント欄や検索機能をつけようとすると、外部サービス（Giscusなど）やクライアントサイドJSに頼る必要があります。

2. Cloudflare Pages

選定理由: 「無料」かつ「爆速」。あと、DNS（Cloudflare）とホスティングを同じ場所にまとめたかったから。 Vercelも候補でしたが、個人ブログならCloudflareの方が帯域制限などを気にせずラフに使えるイメージがありました。 あと、GitHub Pagesは商用利用が禁止されている（AdSenseなどを貼る場合に規約に触れる可能性がある）ので、その懸念がないCloudflare Pagesを選びました。

  • Good（良かったこと）
    • とにかく楽: GitHubリボジトリを連携するだけで、Pushしたら勝手にビルド・デプロイしてくれます。
    • エッジの恩恵: CDNが優秀なので、世界中どこからアクセスしても速い（はず）。
    • DNS設定がスムーズ: 同じCloudflare内で完結するので、ドメイン設定やHTTPS化がポチポチで終わりました。
  • Bad（大変なこと）
    • ビルド環境のブラックボックス感: ローカルでは環境変数などが原因で動くのに、Pages上でビルドするとコケる…みたいな時に、ログを追うのが少し大変でした。

3. GitHub (as CMS)

選定理由: 「データベースを持ちたくない」「記事データもコードと一緒にバージョン管理したい」というエゴです。 WordPressの「DBのバックアップ取らなきゃ…」という呪縛から解放されたかった。

  • Good（嬉しかったこと）
    • 完全なバージョン管理: 「あ、前の文章の方が良かった」と思ってもGitですぐ戻せます。履歴が残るのは安心感の塊。
    • オフライン執筆: ネットがない飛行機の中でも、VS Codeさえあれば記事が書けます。
    • 使い慣れたエディタ: ブラウザのリッチテキストエディタと格闘する必要がありません。Vimバインディングで快適に執筆できます。
  • Bad（嬉しくなかったこと）
    • モバイル執筆のハードル: 「スマホで寝ながら修正」が劇的に面倒になりました。GitHub MobileアプリやWorking Copyを使えば可能ですが、WordPressアプリの手軽さには勝てません。
    • 画像の扱い: 「画像をドラッグ＆ドロップしてアップロード」ができません。ファイルをフォルダに置いて、パスを書いて…という作業は地味に面倒です。

⚠️ ディレクトリ構成とかの話はまた次回

「で、実際のリポジトリの中身はどうなってるの？」と思われた方もいるかもしれません。 Astroのディレクトリ構成や、デプロイ方法など、詳細（リポジトリ/ディレクトリ構成編）は別の記事で書く予定です。 今回は「移行の概要」ということでご容赦ください。次回、エンジニア向けにもう少し踏み込んだ内容をお届けします。

（追記：書きました！） https://blog.otama-playground.com/posts/20260111/202601111600

おわりに

「色々ラクをするためにバイブコーディングしつつ移行した結果、時間が無くなる」という本末転倒な数日間でしたが、得られたものは大きかったです。 これからは快適な環境で、技術記事やら雑記やらを書いていこうと思います。

もしWordPressからの移行を考えている人がいたら、参考にいただけると幸いです。

関連記事