こんにちは、夫です！
前回の記事でCloudflare Pages（無料でウェブサイトを公開できるサービス）に静的ブログを公開しましたが、今回はその続きです。WordPressに書いた記事8本を、そのサイトに移植する作業をやってみました。
結論から言うと、記事の取得からHTML変換、公開まで、ほぼすべてAIが自動でやってくれました。
今回やったこと
WordPressのブログ（fuufuai.com）には記事が8本あります。これをCloudflare Pagesの静的サイト（サーバーを持たなくても動くシンプルなウェブサイト）で読めるようにするには、記事一本一本をHTMLファイル（ウェブページの元になるデータ形式）に変換する必要があります。
8本であれば正直、手作業でコピペしても数時間あれば終わる量です。ただ、今回はあえて「自動化できるかチャレンジしてみよう」という気持ちでAIに丸投げしてみました。結果、ほぼすべてAIがやってくれました。
⚠️ ひとつ注意点：2セッション必要でした
私はClaudeのProプランを使っているのですが、今回の作業は1回のセッションでは完結しませんでした。8本分のHTMLファイル生成やデプロイなど、作業量が多く途中でトークン（使用量）を使い切ってしまったため、セッションを2回に分けて作業しました。Proプランの方は参考にしてください。
Claude Codeに渡したプロンプト
最初にClaude Codeに渡したプロンプトはこちらです。同じことをやりたい方はコピーしてそのまま使えます。
以下の作業をお願いします。
【目的】
WordPressのブログ記事8本をHTMLファイルに変換して、
Cloudflare Pagesで公開できる静的サイトを作りたいです。
【既存ファイル】
- index.html（トップページ）が既にあります
- デザインは紫〜シアンのグラデーションを使っています
【やってほしいこと】
1. WordPressの記事をHTMLファイルに変換（article1.html〜article8.html）
2. 各記事はindex.htmlのデザインと統一したスタイルにする
3. index.htmlの記事一覧を実際の記事へのリンクに更新する
4. 画像ファイルも対応できるようにする
【記事データの渡し方】
記事の内容は順番に貼り付けます。
まず既存のindex.htmlを見せるので、デザインを確認してください。このプロンプトを貼ったあと、あとは「やってみますか？」「続きをお願いします」と言い続けるだけで、AIが次のステップを提案しながら進めてくれました。
💡 プロンプトに出てくる「index.html」って何？
index.htmlとは、ブログのトップページ（最初に表示される記事一覧のページ）のことです。このファイルをどうやって作ったかは、レンタルサーバーなしで無料ブログを公開した話でくわしく書いています。今回の作業はそこで作ったindex.htmlのデザインをベースにしています。
全体の流れ
① WordPressのAPIから記事データを自動取得
↓
② 8本分のHTMLファイルを自動生成
↓
③ index.htmlの記事一覧も自動更新
↓
④ Cloudflare Pagesに全自動でデプロイ
① WordPressから記事データを自動取得
まず、WordPressの管理画面のURLをClaude Codeに渡したところ、WordPressにはAPIという機能があって、記事データを自動で取れる場合があることをAIが教えてくれました。
試してみると、fuufuai.comの記事一覧がそのまま取得できました。取得できた記事はこの8本です。
| # | タイトル | 投稿日 |
|---|---|---|
| 1 | 夫婦でAIブログ、はじめました。 | 2026.04.18 |
| 2 | WordPress.com開設マニュアル | 2026.04.18 |
| 3 | はじめまして！妻による自己紹介記事 | 2026.04.18 |
| 4 | AIで副業できる？本気で検討してみた話 | 2026.04.18 |
| 5 | レンタルサーバーを借りてWordPressを立ち上げた話 | 2026.04.18 |
| 6 | WordPressの初期設定をAIと一緒に進めた話 | 2026.04.18 |
| 7 | レンタルサーバーなしで無料ブログを公開した話 | 2026.04.19 |
| 8 | ファッション疎い私がAIにせどりリサーチを丸投げしてみた結果 | 2026.04.19 |
🤖 AIに聞いてみた：WordPressのAPIって何？
WordPressには「REST API」という機能が標準で備わっています。これを使うと、ブログの記事データをJSON形式（機械が読みやすいデータ形式）で取得できます。ログイン不要で公開記事にアクセスできるため、今回のような自動取得が可能でした。
② 8本分のHTMLファイルを自動生成
記事データが取得できたら、次はHTMLファイルへの変換です。
Claude Codeに「index.htmlのデザインと統一したスタイルで、8本分の記事ページを作って」とお願いしたところ、article1.html〜article8.html（記事ごとの個別ページ）を一気に生成してくれました。
デザインはindex.htmlと同じ紫〜シアンのグラデーションで統一。各記事ページには「← 記事一覧に戻る」のリンクもついています。
あわせて、将来の記事追加に備えた空枠もプレースホルダーとして作成してくれました。ちなみに、この記事自体がその9本目です。
③ index.htmlの記事一覧も自動更新
記事ページを作るだけでなく、トップページの記事一覧もあわせて更新してもらいました。
ダミーだった6枚のカードが、実際の記事8本＋準備中1枚の合計9枚に変わり、それぞれの記事ページへのリンクも設定されました。
④ Cloudflare Pagesに全自動でデプロイ
ここが今回一番びっくりしたところです。
最初は「Cloudflareのダッシュボードからドラッグ＆ドロップしてください」と案内されたのですが、「AIにお願いしたらできますか？」と聞いてみたら、なんとやってくれました。
APIトークンを作成する
Cloudflareには「APIトークン」という機能があります。これはいわば「AIが代わりに操作するための合言葉」です。
Cloudflareのダッシュボードから、Pagesを操作できる権限のトークンを作成して渡すだけ。
🤖 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トークン から削除できます。
今回のまとめ
- WordPressのAPIを使って記事データを自動取得できた
- 8本分のHTMLファイルをClaudeが一気に生成してくれた
- APIトークン＋wranglerで、コマンド操作なしにデプロイが完了
- 私がやったのは「ログイン」と「APIトークンをコピペ」だけ
正直、ここまで自動化できるとは思っていませんでした。「やってみますか？」「続きをお願いします」と言い続けたら、全部やってくれた感じです。
次回は独自ドメイン（fuufuai.com）をこのCloudflare Pagesサイトに紐付ける作業に挑戦します。
この記事で使用したツール：Claude Code、Cloudflare Pages、wrangler