CloudflarePagesへの移行

Mon, 17 Aug 2026 20:18:06 +0900

経緯

これまではてなBlogで15年以上記録残していたものの、そろそろはてなもヤバそうだなというのを感じたので自ドメインで運用できるところに置くことにしようと検討。
セルフホストでも良かったんですが、このためだけに公開するのも微妙なので静的サイトにしておけば候補いくらでもあるなと思ってHugo移植を試してみた。

以前なら移行のデータ変換で結構大変だったと思うんだけど、今だと生成AIで90%くらいの完成度の移行が完成したので多少手作業でメンテして仮構成までは完了。

方針について

ローカル環境で記事を書いて表示確認後、GitHubにpush。
mainブランチを公開用として、それ以外のブランチ設定はPreviewになるようなのでPreview確認後にmainにマージして公開という運用にしようかと。

この時問題になりそうなのがconfig.tomlのbaseURL項目をどうするか、なんだけど確認したところローカルで

1

hugo server -D

を実行すると、http://localhost:1313/ 扱いになるようなので公開用の本番URLを記載するのが良さそう。
あとPreview環境は環境変数を使って起動時に渡すのが良いみたい。build.sh

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#!/usr/bin/env bash
set -euo pipefail

if [ "${CF_PAGES_BRANCH:-}" = "dev" ]; then
 hugo \
 --buildDrafts \
 --gc \
 --minify \
 --baseURL "${CF_PAGES_URL}/"
else
 hugo \
 --gc \
 --minify
fi

Cloudflareの設定

CloudflarePagesのプロジェクト追加が非常にわかりにくくなっていた。
ダッシュボードから[コンピュート]→[Workers&Pages]→[アプリケーションを作成する]を選択するのは良いんですが、このままだとWorker作成に進んでしまう。
画面をよく見ると画面の最下部にPages を導入しようとお考えですか? 始めるというメッセージとリンクが。酷い

ここで、既存Gitリポジトリをインポートする、に設定して対象のリポジトリを指定してセットアップを開始。
次のページのビルド設定は

フレームワークプリセット：Hugo
ビルドコマンド：hugo –gc –minify
環境変数：HUGO_VERSION = 0.159.2

で指定。

最後の環境変数については最初指定せずに実行したらビルドエラーになったんだけど、ログを見たらHUGOバージョンがかなり古かったので検証環境で使用したものを指定。
いったんプロダクション環境だけで進める。

ビルドが完了すると作成したプロジェクト名にしたがってURLが割り当てられるので、これを自分のドメインに割り当て。
プロジェクトのメニューに「カスタムドメイン」があるのでここで指定すればOK。
ドメインをCloudflareで管理していればあっさりサブドメイン追加されて完了。

あと、元のPagesURLが邪魔なのでカスタムドメインにリダイレクトするように指定する。
こちらは指定するドメインのダッシュボードから[ルール]→[設定]→[一括リダイレクト]で一括リダイレクトリストの作成から作成する。
パラメータのところは以下を指定した。

クエリ文字列を保持する
サブドメインを含める
サブパスの一致
パスサフィックスを保持する

プレビューページのCloudflare Accessの設定

プロダクションに指定したbranch以外はプレビュー扱いになる。
全部仮のURLが割り振られるのでそのままにしているとランダム文字列とはいえアクセス可能なのが気になる。
ということでCloudflare Accessで制限しようというのが基本方針のようで、設定項目にもそのような項目がある。
プレビューを選択した状態でプレビューアクセスの項目でを有効にして、普段使っているCloudflare Accessのポリシーを割り当てるのが良い。

Cloudflare on 屑籠というかゴミ箱

CloudflarePagesへの移行

経緯

方針について

Cloudflareの設定

プレビューページのCloudflare Accessの設定