Cloudflare Pagesでサイト公開する

この記事ではCloudflare Pagesを利用して、GitHubで管理しているHugoサイトを公開する手順をご紹介します。
本記事に掲載している機能はすべて無料で利用可能です。

この記事を読んで欲しい方

Cloudflare Pagesを試してみたい方
Hugoで作成したサイトをWeb上に公開したい方
- サイトはpages.devのサブドメイン（任意の文字列.pages.dev）で公開されます。
- 独自ドメインを取得している方は、独自ドメインに変更することも可能です。（本記事の対象外です）

Cloudflareのアカウントを作成済みであること
- アカウント作成はこちらをご参照ください
HugoをGitHubで管理していること
- 本手順ではGitHub連携を前提にご紹介します
- CLI、直接アップロード、GitLab連携する方法もありますが、本記事では取り扱いません
  - 公式手順を参考に読み替えてください

以降の手順は、2024年9月時点のものです。

以下のURLにアクセスし、Cloudflareのダッシュボード画面を表示します。

左のフレームからWorkers & Pagesの概要を選択し、PagesタブのGitに接続を選択します。

Gitに接続を選択

アカウントからサイトをデプロイするが表示されるため、GitHubタブでGitHubに接続を選択します。

GitHubに接続を選択

Cloudflare Pagesのインストール・認証の画面が表示されます。
Only select repositoriesからHugo設定済みリポジトリを選択し、Install & Authorizeを選択します。

リポジトリを選択

GitHubのアクセス承認画面が表示されるため、承認します。

アクセス承認

CloudflareにGitHub情報が連携されるようになりました。
Cloudflare上でHugo設定済みリポジトリを選択し、セットアップの開始を選択します。

Cloudflare設定画面でHugo設定済みリポジトリを選択

ビルドとデプロイのセットアップ画面が表示されます。
以下の設定内容を入力し、保存してデプロイするを選択します。

※
本設定値ではhugoで利用しているテーマによっては失敗する可能性があります。
具体的には、Hugoバージョンを指定するため環境変数（アドバンスド）の設定が必要です。
詳細は後述の環境変数を追加をご参照ください。

項目名	値	備考
プロジェクト	任意の値	公開サイトのサブドメインに利用されます(`任意の値.pages.dev`)
プロダクションブランチ	main	Gitリポジトリのデフォルトブランチ
フレームワークプリセット	Hugo
ビルドコマンド	hugo
ビルド出力ディレクトリ	public
ルートディレクトリ（アドバンスド）	hugoRootDir/	リポジトリ内のHugoディレクトリ。リポジトリ直下の場合は空白。