HugoブログをCloudflare Pagesにデプロイした

WordPress から Hugo への移行作業。内部リンクの自動変換を実装し、Cloudflare Pages でステージング環境を構築した。

WordPressからHugoへのブログ移行を進めている。今日は大きく2つの作業を行った。

サイト内リンクの自動変換

WordPressでは記事のURLが /archives/{記事ID} という形式だった。Hugo では /post/{slug}/ に変わるので、記事本文中のリンクも書き換える必要がある。

WP REST API から全15,444記事のID→slugマップを一括取得し、JSONファイルにキャッシュ。エクスポート時に正規表現で以下のように変換するようにした。

WordPressHugo
/archives/12345/post/{slug}/
/archives/tag/babymetal/tags/babymetal/
/archives/category/技術/categories/技術/

マップにないIDはそのまま残してログに警告を出す。サンプル25記事で試したところ、すべてのリンクが正しく変換された。

Cloudflare Pagesでステージング公開

Hugo の静的サイトをホスティングする先として Cloudflare Pages を選んだ。無料で、Cloudflare DNS との相性も良い。

手順はシンプルだった。

  1. wrangler pages project create hide10-blog でプロジェクト作成
  2. hugo --minify でビルド
  3. wrangler pages deploy site/public でデプロイ
  4. Cloudflare DNS に new.hide10.com → hide10-blog.pages.dev の CNAME を追加

これで new.hide10.com にステージング環境ができた。

現状の構成

WordPressは www.hide10.com で引き続き稼働中。Hugo は new.hide10.com で並行運用。画像は両方とも images.hide10.com(Cloudflare R2)から配信している。

全量エクスポートが完了したら DNS を切り替えて、Hugo を本番にする予定。

Next Action

おすすめリンク

よく買っているものへのリンクです。

Affiliate Links

Amazonで探す

切らすと困る日用品と、その日の値下がりをまとめています。

日用品・消耗品を探す 切らすと困るものをまとめて
Amazonのタイムセールを見る その日の値下がりを一覧で

外部ストアへのアフィリエイトリンクです。気になるものだけ開けば十分です。

この記事にお便りを送る

送信した内容は、その場ではページに出ません。届いたメールを管理人が読んで、 載せてよいものだけをこの欄に手で掲載し、そのとき返事も添えます。 時間差のあるコメント欄だと思ってください。 掲載しないこともありますし、返信をお約束するものでもありません。

B!