こんにちは、夫です！

前回の記事でCloudflare Pagesに静的ブログを公開しましたが、今回はその続きです。WordPressに書いた記事8本を、Cloudflare Pagesのサイトに移植する作業をやってみました。

結論から言うと、記事の取得からHTML変換、公開まで、ほぼすべてAIが自動でやってくれました。

今回やったこと

WordPressのブログ（fuufuai.com）には記事が8本あります。これをCloudflare Pagesの静的サイトで読めるようにするには、記事一本一本をHTMLファイルに変換する必要があります。

手作業でやると相当大変そうなのですが、「Claude CodeにWordPressの管理画面のURLを渡したら全部やってくれないか？」と頼んでみたら、本当にやってくれました。

全体の流れ

① WordPressのAPIから記事データを自動取得
　↓
② 8本分のHTMLファイルを自動生成
　↓
③ index.htmlの記事一覧も自動更新
　↓
④ Cloudflare Pagesに全自動でデプロイ

① WordPressから記事データを自動取得

まず、WordPressの管理画面のURLをClaude Codeに渡したところ、WordPressにはAPIという機能があって、記事データを自動で取れる場合があることをAIが教えてくれました。

試してみると、fuufuai.comの記事一覧がそのまま取得できました。

取得できた記事はこの8本です。

# タイトル 投稿日
1ファッション疎い私がAIにせどりリサーチを丸投げしてみた結果2026.04.19
2レンタルサーバーなしで無料ブログを公開した話2026.04.19
3WordPressの初期設定をAIと一緒に進めた話2026.04.18
4レンタルサーバーを借りてWordPressを立ち上げた話2026.04.18
5AIで副業できる？本気で検討してみた話2026.04.18
6はじめまして！妻による自己紹介記事2026.04.18
7WordPress.com開設マニュアル2026.04.18
8夫婦でAIブログ、はじめました。2026.04.18
🤖 AIに聞いてみた：WordPressのAPIって何？ WordPressには「REST API」という機能が標準で備わっています。これを使うと、ブログの記事データをJSON形式（機械が読みやすいデータ形式）で取得できます。ログイン不要で公開記事にアクセスできるため、今回のような自動取得が可能でした。

② 8本分のHTMLファイルを自動生成

記事データが取得できたら、次はHTMLファイルへの変換です。

Claude Codeに「index.htmlのデザインと統一したスタイルで、8本分の記事ページを作って」とお願いしたところ、article1.html〜article8.html を一気に生成してくれました。

【画像準備中】生成された記事HTMLファイルの一覧

デザインはindex.htmlと同じ紫〜シアンのグラデーションで統一。各記事ページには「← 記事一覧に戻る」のリンクもついています。

さらに9本目の枠（article9.html）も「近日公開予定」のプレースホルダーとして作成。将来の記事追加にも対応できる状態にしてくれました。

③ index.htmlの記事一覧も自動更新

記事ページを作るだけでなく、トップページの記事一覧もあわせて更新してもらいました。

ダミーだった6枚のカードが、実際の記事8本＋準備中1枚の合計9枚に変わり、それぞれの記事ページへのリンクも設定されました。

【画像準備中】更新後のindex.htmlのプレビュー画面

④ Cloudflare Pagesに全自動でデプロイ

ここが今回一番びっくりしたところです。

最初は「Cloudflareのダッシュボードからドラッグ＆ドロップしてください」と案内されたのですが、「AIにお願いしたらできますか？」と聞いてみたら、なんとやってくれました。

APIトークンを作成する

Cloudflareには「APIトークン」という機能があります。これはいわば「AIが代わりに操作するための合言葉」です。

Cloudflareのダッシュボードから、Pagesを操作できる権限のトークンを作成して渡すだけ。

【画像準備中】CloudflareのAPIトークン作成画面
🤖 AIに聞いてみた：APIトークンって危なくない？ トークンはパスワードと違い、「できること」を限定できます。今回は「Cloudflare Pagesの編集のみ」に絞ったため、他の設定には触れません。ただし使い終わったら削除するのが安全です。

Node.jsとwranglerをインストール

AIがCloudflareへの自動デプロイに「wrangler」というツールを使うことを提案してきました。インストールにはNode.jsが必要でしたが、これもすべてAIが自動でインストールしてくれました。

私は「続きを実施して」と入力しただけです。

デプロイ実行

✨ Success! Uploaded 11 files (1.72 sec)
🌎 Deploying...
✨ Deployment complete!

11ファイルが1.72秒でアップロードされ、デプロイ完了。

【画像準備中】デプロイ完了のターミナル画面

作業終了後にAPIトークンを削除

デプロイが完了したら、作成したAPIトークンは削除しました。

使い終わったトークンを残しておくと、万が一トークンの文字列が漏れたとき、第三者にCloudflareを操作される可能性があるためです。

Cloudflareのダッシュボード → マイプロフィール → APIトークン から削除できます。

今回のまとめ

正直、ここまで自動化できるとは思っていませんでした。「やってみますか？」「続きをお願いします」と言い続けたら、全部やってくれた感じです。

次回は独自ドメイン（fuufuai.com）をこのCloudflare Pagesサイトに紐付ける作業に挑戦します。

この記事で使用したツール：Claude Code、Cloudflare Pages、wrangler