祥浜堂クリエイティ部

山陰に住む漫画家・イラストレーター吉田セツの雑記ブログサイトです。

WordPressからAstro＋Cloudflareへ！ブログ移行作業まとめ

ブログ兼ポートフォリオサイトをCloudflareに移管。デザインもひと昔前のHTMLサイトらしい装いに。

長年使っていたさくらサーバーのWordPressから、Astroという静的サイトジェネレーターを使いCloudflare Pagesへブログを移行しました。

作業の全体像をまとめておきます。

なお、私はHTMLやCSSについては少し知識はありますが、プログラミングやAIエージェントについては初心者であるため、このテーマについて随時勉強中です。

専門知識についてはまだまだ浅学なので、このブログで書いてある内容や用語の使い方について誤りがあるとおもいますが、平にご容赦くださいませ。

使ったツール

-Astro…静的サイトジェネレーター -Cloudflare Pages…無料ホスティング -GitHub…コード管理 -VS Code…エディタ -Claude Code…VScodeの拡張機能とDTアプリ版のチャットを使用。コードを書いてもらったり方向性の相談に使いました（詳細は後述）。

なぜAstroが必要だったか

AstroとWordpressの違い

WordPressはPHPというプログラムがサーバー上で動き、記事を開くたびにページを生成する仕組みです。

そのため、ファイルをそのままホストするだけのCloudflare Pagesでは動かすことができません。

一方Astroはあらかじめ完成したHTMLファイルを作って置いておく静的サイトジェネレーターです。

サーバーを動かす必要がないため、Cloudflare Pagesの無料プランとも相性がよく、今回の移行先として選びました。

またAstroは文章・画像中心のサイト向けに設計されており、記事をMarkdownファイルで管理できる点もWordPressからの移行先として選びやすい理由のひとつです。

表示速度が速いのもメリットで、ポートフォリオも兼ねた今回のブログの目的にも合っていました。

なお、今回はAstroを選びましたが、Cloudflareが提供するWranglerというツールを使ってWordPressから直接移行する方法もあるようです。

どの手順で進めるかはAIチャットに相談しながら決めると良さそう。

移行作業の全体像

大まかな流れは「記事の変換 ・調整→ サイト構築 → GitHub連携・公開 → ドメイン移行 → 旧サービス解約」の5ステップです。

① WordPressの記事をMarkdownに変換

まずWordPressの記事データを、プラグインのAll-in-One WP Migration and Backupを使ってXMLデータでエクスポートし、Markdown形式に変換しました。

Markdown形式への変換はClaude Codeで一括変換するスクリプトを書いてもらい、タイトル・日付・カテゴリ・アイキャッチ画像のパスなどのフロントマターも整備してもらいました。

画像は所定のフォルダpublic/images/以下にコピー。

② Astroでサイトを作り直す

環境の準備

Astroを動かすにはNode.jsというソフトが必要です。公式サイトからインストーラーをダウンロードしてインストールするだけで準備完了です。エディタはVS Codeを使いました。

Astroプロジェクトの作成

VS CodeのターミナルでAstroのセットアップコマンドを1行打つと、ウィザード形式（画面に質問が1つずつ表示されて、答えていくと設定が完了する入力方式）でプロジェクトが作れます。

テンプレートの種類（ブログ用・最小構成など）を選ぶと、ファイル一式が自動で生成されます。

フォルダの構成

Astroのプロジェクトは役割ごとにフォルダが分かれています。

| フォルダ | 役割 |

|---|---|

| src/pages/ | サイトのページ（URLに対応）。ここにファイルを置くとページが増える |

| src/content/blog/ | ブログ記事のMarkdownファイルを置く場所 |

| src/components/ | ヘッダー・フッターなど、複数ページで使い回す部品 |

| src/layouts/ | ページ全体のテンプレート（記事ページの枠組みなど） |

| src/styles/ | サイト全体のデザイン設定（色・フォントサイズなど） |

| public/ | 画像など、そのまま公開するファイルを置く場所 |

ローカルでの動作確認

プロジェクトができたらVScodeのターミナルでnpm run devというコマンドを実行、ローカルサーバーを起動させます。

表示されたアドレスhttp://localhost〇〇〇〇を開くと自分のPCの中だけでサイトをプレビューできます。外には公開されないので、デザインや記事の見た目を試しながら作業していきました。

カスタマイズ

デフォルトのテンプレートをベースに、自分が作りたいデザインに変更していきました。

カスタマイズはVS Codeに組み込んで使えるClaude CodeというAIアシスタントと相談しながら進めました。

VScodeの拡張機能でClaude Codeを連携できるので、「こういう見た目にしたい」「この機能を追加したい」と伝えるとコードを書いてくれます。

専門知識がなくても少しずつ形にしていくことができますが、やはりCSSやJavaScript、jQuery、lightboxなどの知識が少しでもあると作業が早くなると思います。

主な作業内容：

  • カラーテーマ決定

  • ブログ一覧ページ（3列グリッド、15件/ページのページネーション）

  • カテゴリ別ページ（5カテゴリ）・ドロップダウンメニュー

  • 記事の前後ナビゲーション

  • YouTubeやX（Twitter）のURLを貼るだけで自動埋め込みされる機能

  • マンガビューワー（右綴じ・見開き表示）

  • About・Contact・Portfolio・Comicページの新規作成

  • スマホ対応（ハンバーガーメニュー・レイアウト崩れ修正）

  • SNSシェア時にサムネイルが表示されるOGP対応

…等。

最後にブログ記事の内容も最終チェック（アイキャッチ画像が別の画像に誤って表示されていないか、古くなった記事の更新など）して、③に進みました。

③ GitHubとCloudflare Pagesで公開

GitHubにコードをアップロードする

GitHubはコードをクラウドに保存・管理できるサービスです。

アカウントを作成してリポジトリ（保管場所）を作り、VS CodeからAstroのファイル一式をアップロードしました。

ファイルの変更履歴も残るので、万が一うまくいかなかったときに前の状態に戻せるのも安心です。

Cloudflare PagesとGitHubを連携する

Cloudflareのアカウントを作成後、「Work & Pages」という機能からGitHubのリポジトリを指定します。

この設定が個人的にちょっと曲者でした。

右上のCreate Applicationというボタンを押したら、画像のようなメニューが出るのですが、このメニュー外の下にあるLooking to deploy Pages? Get Started をクリック。 いやメニュー内じゃないんかぁ～い（汗；）

Cloudflare Pages メニュー

Import an existing Git repository を選択

Import an existing Git repository

select a repositoryの欄からデプロイしたいリポジトリを選択してBegin Setupをクリック。

もしリポジトリが表示されてなければ赤枠で囲ったところのCloudflare PagesをクリックしてGithubとCloudflareを連携認証させてください。

リポジトリ選択画面

Begin Setupをクリック後、以下のビルド設定を行います。

項目設定値
フレームワークプリセットAstro
ビルドコマンドnpm run build
ビルド出力ディレクトリdist

フレームワークプリセットのドロップダウンメニューからAstroを選択。

フレームワークに「Astro」を選ぶと上記の値が自動で入力されるので、基本はそのままでOKです。

あとはGitHubにコードをpushするたび自動でビルド・デプロイが走り、サイトが更新される仕組みになります。

テスト用URLで動作確認

Cloudflare Pagesで連携すると〇〇〇.pages.devという形式のテスト用URLが発行されます。

本番ドメインに切り替える前にここで表示や動作を確認できました。スマホでも問題なく見られるかチェックするのにも使いました。

④ DNSをCloudflareに移行

さくらのネームサーバーからCloudflareのネームサーバーに切り替えて、自分のドメインが新しいサイトを向くようにしました。

⑤ さくらのドメインとレンタルサーバーを解約

新サイトが問題なく動いていることを確認した後、さくらインターネットのドメインをCloudflareへ移管し、レンタルサーバーも解約。

ドメインはさくらからCloudflareへ**移管（Transfer Domain）**という形で手続きしました。

移管の流れは以下のとおりです。

  1. さくらの会員メニューでドメインから「転出」を選択し、AuthCode（認証コード）を発行

  2. CloudflareのDomain Registrationから「Transfer Domains」でドメイン名の購入とAuthCodeを入力

  3. 移管の確認メールが届くので「承認」

  4. Cloudflareのダッシュボードで「Active」になれば移管完了

移管完了後も、さくら側のドメイン契約は残ったままなのでさくらの会員メニューから解約手続きが必要です。

レンタルサーバーも同様に、会員メニューから解約します。

これで、運用費はドメイン代のみになり、年間コストを大幅に削減できました。

やってみての感想

今回初めてAstroを知ったのですが、Claude Codeのチャットで相談したらAstroについての簡単なチュートリアルを組んでもらえました。

Cloudflareへの導入手順も作ってもらったため、心理的なハードルも下がり、比較的容易にブログをCloudflareへ移管できたと思います。

できあがったブログ兼ポートフォリオサイトの構成をそのまま流用して、二次創作メインのオタクサイトも作ることができました。

HTMLの静的サイトで二次創作ファンサイトを作ることはかねてからの夢だったので、ウン十年越しに叶ってとても嬉しいです。

Cloudflareはドメインを取らなくても〇〇〇.pages.devというテスト用URLが発行されます。

趣味や開発目的としてこれを公開することも可能です。

ということは、いにしへのオタクサイトが無料で作れるということです。

二次創作している方はいにしへのHTMLオタクサイトを作ろうぜ！(何だなんだ)