メニュー
トップ制作サンプル料金進め方読みものサンプルを依頼する

読みもの / WordPressの安全と乗り換え

WordPressのサイトを静的サイトに移す手順(前編)|Cloudflare Pagesで仮公開するまでの画面とコマンド

2026年10月24日

静的サイトに移す(前編)。仮のドメインで公開するまで、約10分

更新が年に数回のホームページなら、WordPressから静的サイトに移すことをおすすめします。静的サイトは、できあがったページのファイルを置いて見せるだけのサイトです。管理画面もデータベースもないので、ログイン画面をねらわれたり、プラグインの弱点を突かれたりする心配がなくなります。しくみは静的サイトはなぜ安全なのかに図でまとめました。

この記事では、このサイト(かりぬいホームページ)をWordPressから Cloudflare Pages へ移したときの手順を、実際の画面とコマンドのまま載せます。今回は、本物のドメインを切り替える前の「仮のドメインで動かして確かめる」ところまでです。かかった時間は約10分でした。

移行の全体の流れと、この記事で書く範囲

移行は2つの段階に分けて進めます。先に新しいサイトを仮のドメインで動かし、確かめ終わってから本物のドメインを引っ越します。この記事は前半の「仮公開」です。後半は後編の記事にあります。

この記事(前編)

前半 仮公開

仮のドメインで、新しいサイトを確かめる

  1. 1Cloudflare のアカウントを作る
  2. 2パソコンから Cloudflare にログインする
  3. 3サイト一式を組み立てる
  4. 4置き場所を作って公開する
  5. 5問い合わせフォームを動かす

お客さまが見るサイトいまのWordPressのまま。試しても影響しない

後編の記事

後半 ドメインの引っ越し

本物のドメインを、新しいサイトへ向ける

  1. 1ドメインの設定(DNS)を Cloudflare に写す
  2. 2ドメインの管理会社で、行き先を変える
  3. 3Cloudflare Pages に本物のドメインをつなぐ
  4. 41〜2週間ようすを見て、WordPressを止める

お客さまが見るサイト手順3で、新しいサイトに切り替わる

前半のあいだは、いまのサイトに手を入れません。失敗しても、仮のドメインで直してやり直せます。後戻りしにくいのは後半だけです。

WordPressから静的サイトに移しやすいサイト、移しにくいサイト

見せるだけのサイトは移しやすく、お客さまがログインしたり買い物をしたりするサイトは移しにくい。分かれ目はこれだけです。

判定こういうサイト/移すときにやること
◎会社・お店の紹介だけのサイト(会社案内、メニュー、料金、地図)ページを置き直すだけです。いちばん移しやすい形です。
◎更新が年に数回のサイト直すときだけ組み立て直して公開します。
○問い合わせフォームがあるサイトフォームの受け口だけ作り直します(下の手順5)。
○お知らせ・ブログを月に数本書くサイト書くたびに組み立て直して公開します。だれがその作業をするかを先に決めます。
△お店の人が管理画面から毎週のように自分で更新しているサイト管理画面がなくなるので、書く場所を別に用意します。手間と費用が増えます。
△記事が数百本あるブログ記事の書き出しと、古いアドレスからの転送の作業が大きくなります。
×ネットショップ、会員ログイン、予約の管理がサイトの中にあるサイトWordPressのまま守りを固めるほうが向いています。ショップや予約を外部のサービスに分ければ、残りのページは移せます。

迷ったら、WordPressの管理画面で「プラグイン」の一覧を見てください。ネットショップ・会員・予約のプラグインが入っていれば△か×、問い合わせフォームくらいなら○より上です。

このサイトは◎でした。ページの中身は手元のHTMLのファイルで作っていて、WordPressはそれを読み込んで表示していただけです。データベースの記事はほとんど使っていませんでした。

Cloudflare Pagesへ移す手順(仮のドメインで公開するまで)

全体の流れの、前半の1〜5

使った道具は、Cloudflare のアカウント(無料)と、パソコンに入っている Node.js と Python です。コマンドは Windows のターミナルで打っています。

1. Cloudflareのアカウントを作る

Cloudflare のサイトを開き、「無料で始める」から登録します。今回は Google アカウントで登録しました。

Cloudflare の日本語のトップページ。左下に「無料で始める」のボタンがある
Cloudflare のトップ。「無料で始める」から登録します。
Sign in to Cloudflare の画面。Google・Apple・GitHub で登録するボタンと、メールアドレスとパスワードの欄がある
Google・Apple・GitHub のアカウントでも、メールアドレスでも登録できます。
Google でログインの画面。Cloudflare Dashboard に名前とメールアドレスを渡すことの確認と、「次へ」のボタン
Google で登録すると、名前とメールアドレスを渡す確認が出ます。「次へ」で進みます(メールアドレスは隠しています)。

登録したら、二段階認証をオンにしておきます。サイトの置き場所そのものの鍵になるアカウントだからです。

2. パソコンからCloudflareにログインする

公開の作業は、Cloudflare の道具「wrangler」をパソコンから使って進めます。インストールは要らず、npx で呼び出せます。

npx wrangler@latest --version
 ⛅️ wrangler 4.152.0

npx wrangler login

wrangler login を打つと、ブラウザに許可の画面が開きます。右下の「Authorize」を押すと、ターミナルに Successfully logged in. と出ます。

Wrangler wants to access your account の画面。許可する権限の一覧と、Authorize のボタン
「Wrangler wants to access your account」の画面。押せるのは2分のあいだだけです。

この画面は2分で時間切れになります。登録の途中でログインのコマンドを打つと間に合わないので、登録を済ませてから打ちます。また、時間切れになった古いタブで押すと request_forbidden と出て失敗します。打ち直したら、いちばん新しいタブで押してください。

3. サイト一式を組み立てる

WordPressのページを、置くだけで見られるHTMLのファイルにして、公開する一式(dist フォルダ)を作ります。ふつうのWordPressのサイトなら、サイトを丸ごとHTMLに書き出すプラグインがあるので、それを使います。このサイトはページの中身がもともとHTMLだったので、自前のスクリプトで組み立てました。

python cloudflare/build_cf.py --hold sekou-jirei-keisai
column-norikae.html          -> /column/norikae/
plan.html                    -> /plan/
request.html                 -> /request/
…
18 pages in sitemap.
  link not found: /column/sekou-jirei-keisai/  (in column\index.html)

最後に、リンク切れを自動で探して出すようにしてあります。今回出た2件は、まだ公開していない記事へのリンクで、分かっているものでした。

どの方法で書き出しても、次の4つは抜けやすいので確かめます。

  • ページのアドレスがいまと同じか。変えたページは、古いアドレスからの転送を _redirects という設定ファイルに書く
  • アクセス解析(GA4)のタグが全部のページに入っているか
  • サイトマップがあるか(WordPressが自動で作っていたものは消えます)
  • 問い合わせフォーム。書き出すだけでは送れません(手順5)

4. 置き場所を作って、公開する

npx wrangler pages project create karinui-homepage --production-branch main
✨ Successfully created the 'karinui-homepage' project.

npx wrangler pages deploy --branch main
✨ Success! Uploaded 165 files (3.60 sec)
✨ Uploading _headers
✨ Uploading _redirects
✨ Uploading Functions bundle
✨ Deployment complete!
Cloudflare Pages の仮のドメイン karinui-homepage.pages.dev で表示した、かりぬいホームページのトップ
仮のドメイン karinui-homepage.pages.dev で開いた、新しいサイトのトップ。

公開まで15秒ほどでした。これで https://karinui-homepage.pages.dev という仮のドメインでサイトが見られます。本物のドメイン karinui-homepage.com は、まだWordPressのままです。仮のドメインで何を試しても、いまのサイトには影響しません。

置き場所の作成は、登録した直後の1回目だけ Internal Server Error 500(code: 8000000)で失敗しました。同じコマンドをもう一度打ったら通っています。

5. 問い合わせフォームを動かす

静的サイトはファイルを見せるだけなので、フォームから送られた内容を受け取れません。WordPressの受け口(PHP)を、Cloudflare の小さなプログラムに書き直しました。画面は同じままで、送り先だけを変えています。

このフォームは、メールに届いた6桁の確認コードを入れてから送る作りです。コードや送った回数を置いておく場所(KV)を作り、メールの送信に使う鍵などを「秘密」として登録します。

npx wrangler kv namespace create FORM_KV
✨ Success!
(出てきた id を wrangler.toml に書く)

npx wrangler pages secret put FORM_SECRET --project-name karinui-homepage
npx wrangler pages secret put RESEND_API_KEY --project-name karinui-homepage
npx wrangler pages secret put NOTIFY_TO --project-name karinui-homepage
(値は画面に打たず、ほかのファイルから流し込んだ)

npx wrangler pages deploy --branch main
(秘密を反映するため、もう一度公開する)
仮のドメインで開いた、サンプル依頼フォームのスマホの画面
仮のドメインで開いた依頼フォーム。ここから送って、確認コードのメールが届くのを確かめました。

秘密の値は、設定ファイルにもコマンドの記録にも残らないようにします。メールの送信の鍵がファイルに書いてあると、ファイルが外に出たときに、だれでもこちらの名前でメールを送れてしまいます。

公開したあとに確かめたこと

確かめたこと結果
トップ・料金・読みもの・依頼フォームどれも表示された(HTTP 200)
安全のためのヘッダーHSTS・CSP・X-Frame-Options が付いていた。WordPressのときは付いていなかった
正規URL本物のドメイン karinui-homepage.com を指していた。仮のドメインが検索に拾われても、本物のほうが正として扱われる
確認コードのメールGmail と Yahoo!メールの両方に届いた

確認コードのメールは、最初の1通が届くまでに数分かかりました。2分ほど待って「来ない」と思いましたが、届いていました。送る仕組みを疑う前に、少し待って、迷惑メールのフォルダも見てください。

Claude Code などのAIに、同じ手順を任せる

ここまでのコマンドは、Claude Code のようにパソコンの上でコマンドを打てるAIに任せられます。このサイトの移行も、コマンドを打つ作業はAIが進め、人はブラウザで登録と許可を押しただけです。

任せるときは、この記事のアドレスと、触ってよい範囲をはっきり書いて渡します。

この記事の手順で、いまのWordPressのサイトを
Cloudflare Pages の仮のドメイン(〜.pages.dev)に公開してください。
https://karinui-homepage.com/column/wordpress-seiteki/

・ドメインの設定と、いまのWordPressには触らないでください
・パスワードやAPIキーの値は、画面にもファイルにも出さないでください
・各手順で、打ったコマンドと結果を記録してください
・ログインの許可など、私が押すものがあれば、その都度教えてください

AIに任せても、人がやることは残ります。

人がやること理由
Cloudflare の登録と、ログインの許可を押すアカウントの持ち主が本人であることを、本人が示す手続きだからです。
この記事と違う所を見つけるこのサイトは中身がもともとHTMLのファイルでした。データベースに記事が入っているサイトは、先に記事をファイルに書き出す作業が増えます。
仮のドメインで、自分の目で見て確かめる表示が崩れていないか、フォームのメールが届くかは、最後は人が見て決めます。
本物のドメインを切り替えると決める失敗するとサイトとメールが止まります。切り替えの前に、何が変わるかをAIに説明させてから決めます。

APIキーなどの値は、AIとの会話に貼りつけないでください。このサイトでは、いまの設定ファイルからAIに直接流し込ませ、値が画面に出ないようにしました。

まだやっていないこと:本物のドメインの切り替え

全体の流れの、後半(後編の記事)

ここまでで、新しいサイトは仮のドメインで動いています。お客さまが見るのは、まだWordPressのほうです。本物のドメインを新しいサイトへ向ける作業は、次の順番で進めます。

1
ドメインの設定(DNS)を、Cloudflare に写すメールの送信の認証に使う設定が写っているかを、必ず確かめます。抜けると、フォームのメールが届かなくなります。
2
ドメインの管理会社で、行き先を Cloudflare に変えるこのサイトでは、ムームードメインのネームサーバーを変えます。
3
Cloudflare Pages に、本物のドメインをつなぐhttp から https への転送も、ここから自動で入ります。
4
1〜2週間ようすを見てからWordPressを止めるすぐに消さず、戻せる状態をしばらく残します。
1から3のあいだも、古いサイトは動いたままです。切り替えの手順と画面は、後編に載せました。

ドメインの名義が制作会社になっている場合は、1より前に名義を確かめます。調べ方はドメインの名義を自分で確かめる方法に書きました。

いまのホームページを、つくり直した見本でお見せします。

サンプルを依頼する