Skip to content
sho10case
Go back

WordPressからAstroへ移行してブログを爆速化!VPS解約で「運用コスト0円」を実現した全記録

こんにちは、ショウです。

この度、当ブログ「sho10case」を WordPress から Astro へ完全移行 しました!

長年運用してきた WordPress ですが、表示速度の限界や毎月のサーバー維持費が悩みでした。今回の移行により、それらの課題を一挙に解決することができたので、その過程とメリットを詳しく共有します。


1. なぜ Astro を選んだのか?

数ある静的サイトジェネレーター(SSG)の中で、私が Astro を選んだ理由は 「圧倒的な表示速度」 です。

Astro は「Astro Islands」という独自の仕組みにより、JavaScript を極限まで排除した HTML を出力します。これにより、従来の WordPress サイトとは比較にならないほどの爆速レスポンスを実現できました。


2. 移行して分かった 2 つの大きなメリット

① 表示速度の劇的改善(SEO 的メリット)

WordPress 時代はプラグインを駆使しても、モバイルでの Lighthouse スコアを安定させるのは至難の業でした。しかし、Astro への移行後は特別なチューニングなしで Performance 90〜100点 を安定して叩き出しています。

Google のコアウェブバイタル(Core Web Vitals)が検索順位に影響を与える今、この「爆速化」は SEO において非常に大きな武器になります。実際にサイトを触ってみると、ページ遷移が「一瞬」で終わる体験は、読者にとっても大きなストレス軽減に繋がっていると確信しています。

② サーバー代が「0円」に(コスト的メリット)

これまでは WordPress を動かすために月額数千円の VPS(仮想専用サーバー)を契約し、Docker 環境などで運用していました。

今回の移行先である Cloudflare Pages は、静的サイトのホスティングが 無料 です。

  • 旧: VPS 月額料金(約1,000円〜)
  • 新: 0円(ドメイン代のみ)

年間に換算すると1万円以上のコスト削減になります。個人開発者にとって、この「固定費0円」という環境は、モチベーションを維持する上でも非常に大きなメリットです。


3. 移行作業の裏側:Gemini との共同作業

今回の移行には、膨大な過去記事(約60件)の変換作業が伴いました。これを手作業で行うのは非効率なため、以下のステップで進めました。

  1. WordPress データの書き出し: XML 形式でエクスポート。
  2. Markdown への変換: スクリプトを用いて Astro が読み込める形式へ変換。
  3. AI(Gemini)による最適化: 各記事の description(要約)の作成や、リンク切れの修正、フォーマットの整形。

特に Gemini を活用することで、各記事に最適な要約を一括で作成できたため、SEO 対策を施した状態でリニューアルオープンすることができました。

【追記】移行後にハマった GA4 計測の落とし穴

移行直後、GA4 の計測がうまく動かないというトラブルに遭遇しました。原因は 2 つありました。

  1. Partytown の依存関係: テンプレートのコードで Partytown(サードパーティスクリプトを高速化する仕組み)が有効になっていましたが、ライブラリ自体が未導入だったため、GA4 の読み込みが止まっていました。
  2. ページ遷移(View Transitions): Astro の高速な画面遷移(ClientRouter)環境下では、通常の埋め込みコードだけだと「2 ページ目以降」がカウントされません。

これに対し、astro:page-load イベントを用いて遷移のたびに gtag('config', ...) を再実行する設定に変更することで、正しく計測されるようになりました。SPA 的な動きをするモダンなブログならではの注意点ですね。


4. まとめ:これからのブログ運営

ブログを Astro にしたことで、記事を書く体験そのものが「コードを書く楽しさ」と直結するようになりました。Git で管理し、プッシュすれば数秒で Cloudflare Pages にデプロイされるワークフローは、エンジニアにとって最高に快適です。

今後は、この爆速環境を活かして、さらに技術知見や開発記を精力的に発信していこうと思います。

「WordPress が重い」「サーバー代を節約したい」と考えている方は、ぜひ Astro への移行を検討してみてください!


あわせて読みたい記事:



Related Posts