個人ブログのWordPressをやめて、Astro＋Cloudflareの静的サイトに移行しました
こんにちは、星影です。
このブログ「Time to live forever」は、長らくWordPressで運営してきましたが、このたびWordPressをやめて、静的サイトジェネレーターの「Astro」と「Cloudflare」を組み合わせた構成に移行しました。
見た目はなるべくこれまでの雰囲気を残していますが、裏側の仕組みはまるごと入れ替えました。
この記事では、移行の経緯や新しい構成、手順などをざっくりまとめておきます。同じようにWordPressの保守に手を焼いていて、脱却や移行を検討している方の参考になれば幸いです。
なぜWordPressをやめたのか
きっかけは10月のPHPの重大な脆弱性
直接のきっかけは、PHPの重大な脆弱性です。
2026年10月21日、Webサイトで広く使われているプログラミング言語「PHP」に、深刻度が「Critical」と評価された脆弱性が2件あることが公表されました。認証なしで外部からプログラムを実行されるおそれがあるというもので、修正版の公開に合わせて、多くのサイトが予防的にサービスを止める事態になりました。
プログラミング言語「PHP」に重大な脆弱性、世界中で多くのウェブサイト休止世界中で使われ、インターネットの相当部分を支えるプログラミング言語「PHP」のセキュリティーチームは21日…bbc.com
高市総理が自身のXで「今夜に対応してほしい」と呼びかけるほど、国内外に大きな影響を及ぼした事案でした。
@takaichi_sanae のポストを見る
このブログもWordPress、つまりPHPで動いていたので、他人事ではありません。
放置していたブログ
実はこのブログ、長らくメンテナンスをしておらず、ここ数年はnoteを主体に記事を書いていました。
星影｜Tech Hunter｜noteTech Hunter代表。マルチポテンシャライト。ガジェット、アニメ、ゲーム、インターネットが好き。note.com
いまだに昔の記事にアクセスがあるので「そのうちリプレイスできれば…」と考えつつも、ずっと放置してしまっていました。
そこへ来て今回のPHPの事案。加えて、AIを悪用した不正アクセスの話も多く耳にするようになりました。さすがにこのままではマズいと思い、重い腰を上げた次第です。
バージョンアップは断念
当初は、PHPとWordPressのバージョンアップで対応しようとしました。
ところが、プラグインの精査や、アップデート後に出る不具合の解消が思った以上に大変で、途中で断念。そもそも更新頻度が落ちていて、記事を書くよりWordPress本体やテーマ、プラグインのお守りをする時間のほうが長いくらいでした。
それなら、この機会に運用の煩わしさごと手放したい。そこで、
- サーバー側でプログラム（PHP）やデータベースを動かさない
- 管理画面をインターネットに公開しない
- 更新作業そのものを減らす
という方針で、「そもそも攻撃される場所を減らす」静的サイト構成に載せ替えることにしました。
Claudeと一緒に移行してみた
問題は、移行の規模です。
このブログには、2012年から書きためてきた記事が約2,000本、画像が約3万枚あります。長年積み重なったプラグインに、古いままのWordPressとPHP。さらに今回は、ネームサーバーの移管やホスティング先の切り替えまで伴います。ここまで大規模なリプレイスは経験がなく、自力で進めるのはなかなか骨が折れそうでした。
そこで、「AIエージェントを使えば、わりとサクッといけるのでは？」と考えて試してみることに。使ったのは、仕事でもメインで使っているClaudeです。設計を含めた全体の構想には、Claudeのなかでも上位のモデルである「Claude Fable」を採用しました。
AIがコードを書くだけでなく、デプロイなどの周辺作業までこなせることは、普段の仕事や個人開発でも体感していました。最近も、役割ごとのAIボットにチームを組ませて、ミニゲームの企画から実装、デプロイまでを回す仕組みを作っています。
ただ、それは新しく何かを作る場合の話。10年以上運用してきたサイトをまるごと載せ替えるのは、今回が初めてです。
それが、Claudeを使ったら1日で済んでしまった。これはなかなか衝撃的な体験でした。
構成の検討から、記事データの変換、デザインの調整、公開後の手直しまで、すべてClaudeとのやり取りで進めています。コードを書く以外の作業も、まとめて任せました。
- Gitの操作：変更のたびにコミットして、GitHubの非公開リポジトリへpush。Issueの起票も
- Cloudflareの設定：APIトークンを渡して、Workerへの独自ドメインの割り当てや、画像を置くR2との紐付け、旧URLを転送する処理の追加など、Workers周りを設定
- デプロイ：
wranglerコマンドでビルドからCloudflareへのデプロイまで実行 - 動作確認：本番サイトをブラウザで開いてスクリーンショットを撮り、表示崩れやリンク切れを確認
こちらがやるのは、「ここをこう直して」と頼み、出来上がった画面を見てフィードバックすること。その繰り返しです。本番への反映だけは、自分が「デプロイしてOK」と返事をしてから実行する決まりにしているので、勝手に公開されてしまう心配もありません。
APIトークンなどの認証情報は、チャットに直接貼らずにファイル経由で渡しています。GitHubのリポジトリにも含めていません。
新しい構成
ざっくりこんな構成になっています。
| 役割 | 使っているもの |
|---|---|
| サイトの生成 | Astro（記事からHTMLを書き出す静的サイトジェネレーター） |
| 配信 | Cloudflare Workers（静的ファイルの配信＋ちょっとした処理） |
| 画像 | Cloudflare R2（移行中は既存のクラウドストレージから取得してキャッシュ） |
| 記事・ソースコードの管理 | GitHub（非公開リポジトリ） |
| 記事を書く場所 | Markdown＋ブラウザの管理画面（Sveltia CMS） |
| ドメイン | これまでどおり（DNSはCloudflareへ移管） |
記事はすべてHTMLファイルとして書き出し、それをCloudflareから配信するだけ。表示のたびにサーバーでプログラムが動くことはないので、表示も速く、脆弱性を突かれる余地もぐっと小さくなりました。
主役はCloudflare
配信もDNSも、Cloudflareにまとめました。個人ブログ規模なら、ほぼ無料枠の範囲で収まります。配信のほかにも、こんな役割を任せています。
- 旧URLの転送：WordPress時代の
?p=記事ID形式のURLや、検索・フィードのURLを、Workerで新しいURLへ転送。過去にSNSなどで共有されたリンクもそのまま辿れます - 画像の配信：過去記事の画像は、R2（Cloudflareのストレージ）→既存のストレージの順に探して返し、一度返したものはキャッシュ
- HTTPSの強制・wwwの転送：「常にHTTPSを使用」と転送ルールで、
http://やwww.付きのURLも正規のURLへ
サーバーの管理画面にログインしてあれこれ設定する作業がほぼなくなり、設定ファイルとコマンドで完結するようになって、だいぶスッキリしました。
記事作成環境の変化
Markdownで書くようになった
新しい記事はMarkdownで書きます。ファイルはGitHubで管理しているので、どの記事をいつ直したか全部履歴に残ります。
よく使う表示は、Markdownに短く書くだけで済むようにしました。
- YouTube・Xのポスト：URLを1行書くだけで埋め込み表示に
- 画像：箇条書きで並べると、横並びのタイル表示に
- 商品ボックス：WordPress時代にプラグインで作っていたものを、見た目を揃えて再現。Amazon・楽天・Yahoo!ショッピングへのボタン付き
- リンクカード：ブログ内の記事はアイキャッチ付き、外部サイトはリンク先の画像付きのカードで表示
ブラウザで書ける管理画面
「Markdownファイルを直接いじるのはちょっと……」という時のために、ブラウザで使える管理画面（Sveltia CMS）も用意しました。管理画面は手元のPCで動かして使うので、インターネット上には公開していません。
- プレビューが本番の記事ページと同じ見た目で表示される
- 商品ボックスやAmazonリンク、YouTube、Xのポストを、ツールバーの「挿入」からフォーム入力で埋め込める
- ASIN欄にAmazonの商品URLを貼るだけでOK、商品画像も自動表示
移行の手順
ざっくりこんな流れで進めました。
- WordPressから全データをエクスポート（記事・固定ページ・カテゴリー・タグ・コメントなど）
- 変換スクリプトで記事を変換：約1,940記事を、WordPressの書式（ショートコードやブロックエディタの装飾）ごとHTMLに変換。URLは旧ブログと同じ
/YYYYMMDD/HHMMSS/形式をそのまま維持 - 手元で表示確認：トップ、記事、カテゴリー、タグ、アーカイブ、検索、プロフィールなど、ひととおりの画面を確認
- プレビュー用のURLで公開して確認：本番と同じCloudflare上で、画像や旧URLの転送まで動作確認
- 夜間にドメインを切り替え：DNSのレコードを差し替えて、Workerに独自ドメインを割り当て。表示されない時間は40秒ほどで済みました
- Search Consoleにサイトマップを送信
URLを変えずに移行できたので、検索エンジンからの評価や、外部からのリンクもそのまま引き継げているはずです。
バックアップと切り戻しの体制
移行で一番怖いのは「戻れなくなること」なので、ここは慎重めにしています。
- 記事・設定・変換スクリプトはすべてGitHubで管理。どの時点の状態にも戻せます
- 旧WordPressとサーバー、画像のストレージは、しばらくそのまま残しています。新サイトで大きな問題が出たら、DNSを戻すだけで数分でWordPressに切り戻せます
- 公開までにやること、切り戻し手順、今後の検討事項は、GitHubのIssueにまとめて管理しています
公開後のチェックと調整
公開してから気づいたことは、その都度直しています。実際の画面と合わせて紹介します。
スマホで横にはみ出す問題を修正
公開直後、スマホで記事ページを開くと、横に少しスクロールできてしまう状態になっていました。原因は広告で、画面幅いっぱいに広がる設定のせいで、記事の列ごと押し広げられていました。広告を記事の幅に収める設定にして解消しました。
あわせて、スマホでは記事部分を画面いっぱいの白背景にして、ヘッダーもコンパクトにしています。
表示速度の改善（PageSpeed Insightsで100点に）
公開後、GoogleのPageSpeed Insightsで表示速度を測ってみたところ、スマホのパフォーマンスは66点。静的サイトにしたのに、思ったほど速くありません。
Claudeに原因を調べてもらうと、大半は広告とアクセス解析のスクリプトでした。ページを表示している最中にこれらの読み込みで処理が止まり、表示が遅れていたようです。あわせて、記事一覧のサムネイルやアイキャッチに、元の大きな画像（1枚200〜440KBほど）をそのまま使っていたことも分かりました。
そこで、次の2点を直しています。
- 広告とアクセス解析は後から読み込む：アクセス解析はページの表示が終わってから、広告は最初にスクロールやタップをしたとき（または表示完了の3秒後）に読み込むように。記事のアイキャッチは最優先で読み込む指定にしました
- 画像は表示サイズに合わせて縮小：Cloudflareの画像変換を使い、表示する大きさに合わせて縮小し、軽い画像形式（WebP/AVIF）で配信。旧ブログの約3万枚の画像にもそのまま効きます。たとえばある記事のアイキャッチは277KB→13KBに、トップページ全体の転送量は3.3MB→324KBまで減りました
その結果、スマホ・PCともにパフォーマンスは100点になりました。ユーザー補助・おすすめの方法・SEOも、すべて100点です。
| 指標（スマホ） | 改善前 | 改善後 |
|---|---|---|
| パフォーマンス | 66 | 100 |
| 最初に何かが表示されるまで（FCP） | 4.6秒 | 0.9秒 |
| メインの内容が表示されるまで（LCP） | 4.6秒 | 0.9秒 |
| Speed Index | 5.8秒 | 1.0秒 |
ここも、Claudeが計測ツールで原因を特定し、修正して、本番で測り直すところまで進めてくれています。
PageSpeed Insightsの上部にある「実際のユーザーの環境で評価する」は過去28日間の実データなので、WordPress時代の分を含みます。こちらはしばらく経ってから反映される見込みです。
記事ヘッダーと引用を旧ブログ風に
パンくずリストと公開日・更新日の表示は、WordPress時代の見た目を踏襲しました。ホームのアイコンから始まるパンくず、時計と更新のアイコン付きの日付です。
更新日は、旧WordPressから全記事分の最終更新日時を取り込んで表示しています。記事ヘッダーは「サムネイル → タイトル → 日付とカテゴリー」の順に並べ替えました。
引用も、旧ブログと同じく枠線で囲み、引用符と出典を付けるスタイルにしています。
シェアボタンと著者プロフィール
記事の上と最後に、Xとはてなブックマークのシェアボタンを置きました。記事の最後には「この記事を書いた人」として著者プロフィールも表示しています。
OGP（SNSのカード表示）
SNSでシェアされたときのカード表示（OGP）は、確認ツールで未設定だった項目を埋めました。アイキャッチ画像のないページ用に、共通のOGP画像も作っています。
ただ、肝心のサイトロゴは10年くらい前のセンスで作ったものなので、このあたりもそのうち刷新したいところです……。
そのほかの細かな調整
- 画像を読み込み終えたら、ふわっとフェードインで表示
- スマホでも、リンクカードをPCと同じ横長の形で表示
- 記事一覧を1ページ10件に
- 特集記事の入れ替え
- Search Consoleなどに登録していたWordPress時代のサイトマップURLを、新しいサイトマップへ転送
- 前後の記事リンクやフッターの見た目を整理
ちなみに切り替え直後、自分のPCでだけしばらく旧ブログが表示される現象が起きました。これはブラウザが旧サーバーとの接続を使い回していたためで、DNSキャッシュとソケットをクリアしたら解消しました。
今後やりたいこと
移行そのものはひととおり片付きましたが、まだ手を付けられていないこともいくつか残っています。これから時間を見つけて進めていくつもりなので、備忘録も兼ねて書き残しておきます。
- 商品検索の対応：管理画面から楽天市場の商品をキーワード検索して、商品ボックスを挿入できる仕組みは作ってあるので、APIキーの準備ができ次第使えるようにする予定です
- 画像の移行：過去記事の画像（約3万枚）を、Cloudflare R2へ移す
- 旧記事の編集：WordPressから移行した記事を、管理画面からも直せるようにするか検討中
- コメント欄：どうするか検討中
- 旧サーバーの解約：しばらく様子を見て、問題なければ解約
おわりに
このブログは、2012年に初めて自分のドメインを取って始めたものです。その最初の一歩がWordPressでした。当時の経緯は、一番最初の記事に書いています。
Wordpress始めました数年前から WordPress というものがあるらしいというのは知っていた。unsolublesugar.com
読み返すと、「運用が楽で、メンテナンスも自分で出来て、カスタマイズも簡単」なブログが理想だと書いていました。あれから14年。ドメインの管理から画像の配信まで、周辺のあれこれを丸ごと任せられるクラウド環境が充実し、それをプロンプトのやりとりだけで操作してくれるAIも登場しました。そうした道具がそろったいまになって、ようやくその理想に近づけた気がします。
WordPressには長い間お世話になりましたが、更新頻度の落ちた個人ブログには、静的サイトくらいの身軽さがちょうどいいのかもしれません。
表示が速くなり、セキュリティの心配やサーバーのお守りからも解放されて、だいぶ気持ちが楽になりました。腰の重かった移行作業も、Claudeのおかげでたった1日で終えられました。これで気軽に記事を書ける……はず！
※本サイトではアフィリエイト広告を利用しています。記事内および商品リンクにはプロモーションが含まれる場合があります。
