Cloudflare PagesはWordPressの代わりに使えるのか

そろそろWebホスティングプランの更新時期が近づいてきました。特にサイトのマイグレーションを検討していませんでしたが、せっかくなので WordPress で作られた個人サイト、soonchang.me が Cloudflare Pages へ簡単に移行できるか検討してみることにしました。

Cloudflare Pages とは
Cloudflare が提供する静的サイトホスティングサービスで、Git 連携・自動ビルド・CDN 配信が一体化しており、無料プランでも高速にサイト公開ができるサービスです。

そもそも WordPress って必要？

WordPress は簡易 CMS なので、サイトの更新が頻繁にある場合は使うメリットがあるのかもしれない。一方で、更新頻度の低いスタティックなサイトにおいてそのメリットとは…

さらに、AI Agent がさまざまなタスクを自律的にこなす時代になりつつある今、ブログの更新すらコード生成によって自動化されていくことを考えると、小規模サイトにおける CMS の必要性は徐々に薄れていくのかもしれません。

ある意味では、これまでのノーコードツールが、今後は「Vibe Coding」のような新しい開発スタイルに置き換わっていく流れと同じかもしれませんね。

既存サイトの構成

既存のサイトは、WordPress + Elementor で基本構成が作られていて、以下のプラグインが使われていました。

• Contact Form
• Slide Revolution

さすがに、Elementor で作ったデザインを 100% 移管するのは難しいだろうと思いつつ、デザインはある程度妥協する前提で Claude Code に以下のように指示してみました。

Can you analyze the export file from wordpress?
All files and images are in (ディレクトリー名).
I want to rebuild this Wordpress site with Cloudflare pages, can you rebuilt it?

これだけ…

結果：10分でできた

10 分くらい考えてましたが、結果的に出してきた答えがこれ。

The site is fully built and compiles cleanly. Here's a summary of everything that was created:

What was built: soonchang-site/

6 pages:
| Page         | URL                  | 内容                                                        |
|:-------------|:---------------------|:------------------------------------------------------------|
| Home         | /                    | Hero, Film Works, Bio, Discography preview                  |
| Biography    | /biography           | Full bio + awards                                           |
| Discography  | /discography         | All 18 albums grid                                          |
| Album detail | /album/[slug]        | 18 individual album pages with tracks + buy links           |
| Film Works   | /film-works          | Gallery with YouTube/Vimeo video modal                      |
| Contact      | /contact             | Form with Cloudflare Pages Function backend                 |

Design: Dark music portfolio aesthetic (near-black bg, gold accents, Cormorant Garamond + Montserrat),
fully responsive + mobile menu.

もうできたんかい！

ローカル環境で数回Claude Codeとラリーしながら、微調整（一部足りないリンク、タブなどを足した程度）。

そしてできたサイトがこちら👇

参考までに比較用のスクショ

WordPress版サイト

Pages版サイト

なぜかピンクがメインのデザインがダークに… と思いつつも、以前のサイトは作ってから3年以上経過しているためデザインも古くなりつつある。むしろこっちの方がかっこいいのか… 自問自答しながらも、

結論から言うと、スタティックがメインなサイトは間違いなく WordPress から Cloudflare Pages に非常に簡単に移管できることがわかりました。

しかも、コンタクトフォーム用の Email Routing まで使えます。

どんなサイト構成になったのか

一応、どのようなサイト構成になっているか Claude Code に確認してみました。ポイントは「どのフレームワークを使ったか」。

※ Pages におけるフレームワークとは：React や Astro など、サイトの UI や構造を効率的に構築するための開発基盤のこと

フロントエンドフレームワークの選定：なぜ Astro か

Claude Code が比較検討したフレームワーク一覧：

フレームワーク	特徴	判断
Next.js	React、SSR/SSG 両対応、エコシステム充実	今回のサイトに SSR は不要。バンドルサイズが大きい
Gatsby	React、静的サイト特化	ビルドが重い。プラグイン依存が高い
Hugo	超高速ビルド、Go 製	テンプレート言語の学習コスト、コンポーネント設計がしにくい
Astro	ゼロ JS-by-default、コンポーネント指向、静的出力	◎ 採用

Astro を選んだ理由

• Islands Architecture：必要な部分だけ JavaScript を動かせる
• .astro コンポーネント：WordPress のテンプレート感覚で書ける
• getStaticPaths()：動的ページを静的に生成できる
• 純粋な静的 HTML 出力：Cloudflare Pages と相性抜群
• 超軽量：JS がほぼゼロで高速

さらに、奮闘記録まで教えてくれました　笑

主要な実装判断の記録

1. WordPress のカスタム投稿タイプ album → JavaScript のデータファイルに変換

WordPress の構造：

• wp:post_type = album のカスタム投稿タイプ
• wp:postmeta に PHP serialize 形式で Spotify・Amazon リンクやトラックリストを JSON 的に格納

移行方法：

• WXR ファイル（XML）を Python でパースし、各アルバムのメタデータ・ストリーミングリンクを抽出
• src/data/albums.js に JavaScript オブジェクト配列として書き出し
• Astro の getStaticPaths() でアルバムごとの静的ページを自動生成

// src/data/albums.js（抜粋）
export const albums = [
  {
    slug: 'digital-frontier',
    title: 'Digital Frontier',
    releaseDate: '2018-11-11',
    cover: '/images/albums/digital-frontier.jpg',
    spotifyLink: 'https://open.spotify.com/track/5mFu5fFz41GbilS7xP7BVO',
    amazonLink: 'https://www.amazon.co.jp/dp/B07KDL7SV3/...',
    appleLink: 'https://music.apple.com/jp/album/...',
    tracks: [{ title: 'Digital Frontier' }],
  },
  // ...18件
];

判断理由：WordPress のデータベースをそのまま移すのではなく、静的データとしてソースコードに組み込むことで、DB サーバーが不要になる。更新頻度が低いコンテンツ（アルバムは年数回の追加）なら、ファイル編集＋再デプロイのフローで十分。

---

2. Elementor で構築されたホームページの再実装

課題：WordPress の Home ページは Elementor のページビルダーで構築されており、出力 HTML は数千行の Elementor 独自マークアップ。そのまま移植することは不可能。

対応：

• Elementor の出力 HTML からコンテンツ（テキスト・画像 URL・YouTube リンク）を抽出
• Astro で意味のある構造（Hero・Film Works・Bio・Discography・Playlist の各セクション）として再実装
• デザインは以前のテーマを参考にしたダークテーマで独自設計

フィルムワークの動画再生：Elementor の lightbox 機能を、バニラ JavaScript のモーダルに置き換え。YouTube と Vimeo に対応。

---

まとめ

これで、すでに安いホスティングプランですが、ほぼ無料の Cloudflare Pages に無事移管できそうです。

しかも、移管作業も 1 時間もかかっていない…　そしてデザインも妥協ではなくアップデートされてきた　笑

👉 AI がサイトを作る時代は、CMS よりもコードベースの方が圧倒的に相性がいいのかもしれませんね

すごい時代になりました。