0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WordPress のブログを EmDash + Cloudflare Workers に移した全体の流れ

0
Last updated at Posted at 2026-11-08

1. きっかけ

個人ブログ「MidoNote」を WordPress で運営してきましたが、そろそろセキュリティの面などでプラグインの管理が面倒になってきて、いい方法がないか探していました。ちょうどネット上で EmDash が話題になっていたので、EmDash(Cloudflare Workers・D1・R2)へ移すことにしました。

2. Codex に丸投げしたら大失敗

移行に際して、最初は自分では何も調べずにいきなり Codex に移行作業を任せました。ところがよく分からないテスト用のサイトを作ったり勝手な作業を始めたりして、全然ダメでした。

そこで一度立ち止まり、自分でも EmDash の仕組みや移行方法を調べてから、 Claude Code と一緒に最初からやり直しました。

3. 取り込みは簡単、面倒なのは表示

やり直しでは EmDash のスタートガイドに沿って、サイトの組み立てとWordPressサイトからの記事の取り込みを Claude Code に進めてもらいました。デザインはClaude DesignでClaudeに相談しながら作り込み、WordPress 側にはエクスポート用の拡張機能(EmDash Exporter)を先に人力で入れておき、Claude Code には次のように頼みました。

今のWordPressのサイトをEmDashのに移行して作り直してみてください。デザインについては別途Claude Designで検討しているので、まずは標準テンプレートを使用して。もし私が必要ならば、私が操作すべきURLをきちんと提示して、そのページをGoogle Chromeのブラウザで開いて、私にここを押してくださいということを、懇切丁寧に説明をしてください。
記事データに関しては、エクスポートする拡張機能をもう既にWordPressに入れています。

こうして Claude Code にお願いしたことで、EmDash の構築と過去の WordPress の記事の取り込み自体はすぐに終わり、基本的に移行はすごく簡単でした。

もうちょっと追加で言うと、CloudflareとClaude Codeの接続であったり、Cloudflareの契約とかにちょっと手間がかかりました。

面倒だったのは取り込んだあとの表示を整えるところです。WordPress のテーマ(Cocoon)やプラグインで作っていた表、文字の装飾、ブログカード、商品リンクなどが崩れていたので、そこも Claude Code に大きく手伝ってもらいました。

4. 移行前と移行後

移行前後の構成と、サイトの規模は次のとおりです。WordPress より前ははてなブログで書いていたため、はてな時代の URL も一部残っていました。そうした残っていた URL や変な URL の転送、記事内のリンク切れもこのタイミングで一緒に直してもらいました。手動ではやる気が起きなかったので、本当にありがたかったです。

項目 移行前 移行後
CMS / フレームワーク WordPress(テーマ: Cocoon) Astro + EmDash 1.4.0(blog-cloudflare テンプレート)
サーバー / 配信 ConoHa WING Cloudflare Workers
データ保存 MySQL + サーバー内の画像 D1(記事)、R2(画像)、KV(セッション)
公開ページ数 記事288・固定ページ6(計294ページ) 同じ(旧 URL 389件を 301 転送)
記事内の要素 表212、ブログカード114、画像約611 スクリプトで補正して引き継ぎ

5. 流れとかかった時間

作業は次の順で進めました。

段階 やったこと かかった時間(目安)
調査・方針決め 旧サイトのバックアップ。Astro + EmDash + Cloudflare Workers を第一候補に決定、デザインの相談 2時間
ローカルで作り込み 公式テンプレートから構築。記事・画像の取り込み、分類の適用、旧 URL の転送(389件)、リンク切れ修正 7時間
本番構築・切り替え・広告見直し Workers Paid に変更、D1・R2 作成、本番へ site import。ネームサーバー変更、AdSense 配置と GA4 埋め込み 5時間
表示の補正 つぶれた表48・文字装飾342か所の復元、見出しと表のスタイル調整 1.2時間
仕上げ・切り替え後の確認 読みやすさ調整、ブログカードと商品リンクの作り直し、Cloudflare の 404 ログ集計と転送漏れ修正、サイトマップ登録 2.5時間

ローカルで作り込むところが一番時間をかかっていますが、ここのところでデザインを修正したり、分類をどうするのかなど、いろいろと考えることが多かったので時間がかかっていました。

本番構築、切り替えなどで時間をかかったのは、実際に切り替えが反映するまでの待ち時間とか、そのあたりも入っているためです。

6. 費用

移行後の費用は次のとおりです。ConoHa WING のプランや金額は本題ではないため省いています。

項目 移行前 移行後
サーバー ConoHa WING (1,500円/月) Cloudflare Workers Paid(だいたい月5ドル。初回の請求は1か月分で $4.43)
ドメイン(midonote.com) Square Space Domains(年2,238円) 変わらず

Cloudflare はもともと Free プラン(毎月 $0.00)でしたが、旧ワードプレスから移行していくタイミングで、何かしらの制限に引っかかったようだったので、 Workers Paid に切り替えました。公式の料金ページでは月5ドルの基本枠に Workers のリクエスト月1,000万件・CPU 時間月3,000万ミリ秒、D1 の保存5GB などが含まれています。

実際にいくらかかるかは、しばらく動かしてみてから考えるつもりです。これまでとそんなには変わらないと思いたいです。

7. 本番への移行

WordPress からの取り込みと表示の手直しは、まず手元のローカル環境で行いました。ローカルでデザインやリンクなどを一通り整えて、その後に Cloudflare の本番環境へ移すという流れです。正直わからないことだらけだったので、まずは全体像を理解するために計画を報告してもらいました。ボトルネックは私の理解力だったので次のように頼んで HTML の手順書を作ってもらいました。

承認が必要な操作とか、今日の流れとか何をするのかっていうのを理解しやすいようなもの、例えばHTMLとかにして作成して。

作成してもらった手順書を見ながら作業しつつ、次のように聞きながら進めました。

Cloudflareの管理画面にログインしたんだけど、何をどうすればいいんだっけ?

私が実際に作業したのは Workers Paid の有料契約への切り替え、最終承認のOKボタン押下程度です。

管理者アカウントを作って Square Space Domains でネームサーバーを変更し、D1・R2 の作成やデプロイ、ローカルで整えたデータの書き出し(emdash site export)と本番への読み込み(emdash site import)などほとんど全ての作業は Claude Code に進めてもらいました。

8. つまずいたところ

8.1 X埋め込みプラグインのエラー

X(旧 Twitter)の埋め込み用に公式プラグイン(@emdash-cms/plugin-embeds)を入れたところ、Workers の開発環境で exports is not defined というエラーが出ました。

const error = {"message":"exports is not defined","stack":"    at runInRunnerObject (workers/runner-worker/index.js:107:3)..."}
500  <- /annual-holiday/
500  <- /about-midonote/

このあたりが影響していそうですが、ちょっとわからなかったのでプラグインは外し、ツイートを含む記事だけ X の公式スクリプト(https://platform.twitter.com/widgets.js)を読み込む形に変えました。

8.2 切り替え直後、スマホは新サイト・PC は旧サイトが出た

ネームサーバーを切り替えた夜、スマートフォンから見ると新しい EmDash のサイトが出るのに、デスクトップ PC の Chrome で見ると古い WordPress のサイトが出る状態になりました。

Claudeに相談すると、家のルーターなどの DNS が古い IP アドレスの答えを覚えていたためで、基本的には時間が経てば切り替わるとのことで放置。翌日には解決していました。

9. ついでにやってもらったこと

移行のタイミングで、せっかくなので WordPress のテーマ(Cocoon)やプラグインの機能に頼っていた部分の作り直しなどの細かい作業も一緒にやってもらいました。

やってもらったこと 内容
表や文字装飾の復元 Google スプレッドシートで作成してコピペしていた表の表示くずれや、インポートで消えた Cocoon のマーカー・色文字などの装飾、見出しの改行を旧サイトから読み直してスクリプトで復元
ブログカードなどの作り直し Cocoon のブログカードやカエレバの商品リンクなど、WordPress前提のやり方に頼っていた部品を EmDash 向けに再作成
読みやすさと広告配置の調整 文字サイズや行間、段落の間隔を調整。AdSense の自動広告をやめて、記事の長さに合わせて広告配置を変更(手動ではやりたくない)
ネームサーバー切り替えと転送漏れの修正 ドメイン追加・ネームサーバー切り替えの案内と、翌日の Cloudflare の 404 ログ集計。漏れていたはてな時代の URL や WordPress のフィード・サイトマップ、favicon の転送を追加

10. これから

サイトは無事に切り替わりました。AI連携で色々とできそうですので、まずは新しい管理画面で普通に記事を書きつつ、細かい改善を少しずつ試していこうと思います。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?