もとは GitLab Pages でホスティングしていましたが、この際 Cloudflare Pages に移行しました。

なおこのブログは Hugo で生成していますので、Cloudflare Pages で Hugo をホスティングする方法として手順を整理しておきます。

1. ドメインの用意 #

ここでは独自ドメインで Cloudflare Pages を運用する前提とします。

まずはドメインを用意しましょう。Cloudflare はドメインレジストラでもあり、ドメインの契約もここで完結できます。なお Cloudflare Pages にて独自ドメインでホスティングするにあたって、必ずしも Cloudflare でドメイン管理する必要はありません。

詳細な手順は省略します。私は元々 Cloudflare にてドメインを契約し、管理していました。

2. Pages の登録 #

Cloudflare の Workers & Pages のページから「Create」で新規作成を進めます。

Pages タブを開き、まずはデプロイ方法を選びます。GitHub/GitLab のリポジトリと接続して自動デプロイさせるか、手動でアセットを直接アップロードするかです。ここでは前者を選ぶ前提で進めます。

ビルド方法を設定します。Framework preset で「Hugo」を選択するだけで OK です。すると、Build command や Build output directory は自動で入力されます。

環境変数（Environment variables）の「HUGO_VERSION」は任意ですが、ローカルで使用している Hugo と同じバージョンを指すように環境変数を指定しておくのがベターかもしれません。私の場合、最初は HUGO_VERSION を指定せずに進めたところ、この次の画像で示すようにビルドに失敗してしまいました。どうやら Cloudflare がビルド時に使用する Hugo のデフォルトバージョンはそこそこ古いもの？になっているようです。それよりも新しいバージョンの HUGO を適用する必要がある場合は環境変数で明示する必要があります。

なお、以下コマンドでローカルの HUGO バージョンを確認できます。

hugo version

（参考：ビルドに失敗したとき）

3. ドメインの紐付け #

Pages 作成後、Custom domains タブからドメインを紐づけます。「Set up a custom domain」ボタンから先に進み、紐づけたいドメインを入力した後で指示に従うだけです。詳細は省略します。

4. .pages.dev から独自ドメインへのリダイレクト設定 #

Cloudflare Pages にデプロイすると .pages.dev のドメインでページが公開されます（例：my-example-blog.pages.dev）。独自ドメインを紐づけた場合であってもこれは変わりません。そのため .pages.dev から独自ドメインにリダイレクトするように設定しておくのが良いです。

Cloudflare の Bulk Redirects（バルクリダイレクト）の機能を利用しましょう。

Bulk Redirects ページから「Create Bulk Redirect List」ボタンを押下します。

適当に名前を設定。

「Or, manually add URL redirects」にて、.pages.dev をリダイレクト元 URL に、独自ドメインをリダイレクト先 URL にします。

ステータスは 301 とし、Edit parameters で「subpath matching」にチェックを入れます。

「Continue to Redirect Rules」に進む。

適当にルール名を設定して「Save and Deploy」します。

最終的に次のようになっていれば OK です。

最後に、リダイレクト元に設定した .pages.dev のページにアクセスして、リダイレクトが効いていることを確認しましょう。