Hugoで作ったブログをCloudflare Pagesに公開する
HugoのHBT(Hugo Bootstrap Theme)で作成したブログを、Cloudflare Pagesにアカウント作成から独自ドメインの設定までして公開します。
新規アカウントを作成する
アカウントを持っていない場合はサインアップページからアカウントを作成します。 すでにアカウントがある場合はログインページからログインします。
新規アカウントを作成すると、確認メールにリンクがあるのでクリックしましょう。
ログインできたらPagesに移動し、Gitに接続の青いボタンを押します。
GitHubに接続のボタンを押します。
install & Authorizeのボタンを押しましょう。
インストールしたアプリを確認するには？
インストールしたアプリはGitHubのリポジトリから Settings > GitHub appsで確認できます。
ビルドとデプロイのセットアップ
以下の画像に書いてある、プロジェクトはxxx.pages.devにデプロイされますのxxx.pages.devはメモしておきましょう。
ビルドの設定
ビルドの設定は以下の通りです。
| 名前 | 値 |
|---|---|
| フレームワークプリセット | Hugo |
| ビルドコマンド | npm i && hugo --gc --minify --enableGitInfo -b https://hugo-blog-1nt-pages.dev |
| ビルド出力ディレクトリ | public |
| 環境変数 | 値 |
|---|---|
| HUGO_VERSION | 0.110.0 |
| NODE_VERSION | 16 |
info:
手元のPCでもhugo --gc --minify --enableGitInfoを実行するとpublicディレクトリが生成されます
入力したら保存してデプロイするを押します。
参考: Deploy on Cloudflare Pages - HBS Docs
独自ドメインを設定する
Google Domainsでドメインを購入しているので、今回はそれを使用します。
Cloudflare DNSを使用するので、DNS 移行開始を押してください。
freeを選択します。
DNSレコードを確認する
DNSレコードを確認するのページではとくに何もせず、画面一番したの続行ボタンを押します。
ネームサーバを変更する
ここでCloudflareのネームサーバを確認し、完了しました。ネームサーバをチェックしてくださいのボタンを押します。
info: あとからでもCloudflareのネームサーバを確認できます
クイックスタートガイド
ほぼすべてデフォルトの設定で設定を完了します。
参考: Custom domains - Cloudflare Docs
Google Domainsにネームサーバを登録する
自分が管理しているドメイン（Google Domains）に移動し、先ほど確認したCloudflareのネームサーバをコピペ & 保存します。
これらの設定に切り替えるボタンを押したあとこちらのDNS設定はアクティブですの文言が出ます。
参考: ドメイン ネームサーバーの管理 - Google Domainsヘルプ
Cloudflareの画面に戻る
Google DomainsからCloudflareの画面に戻ります。
概要で利用可能になったことを確認します。
Pagesのページに行き、自分のブログにあるカスタムドメインをクリックすると登録したドメインが選択できるようになります。
あとは設定が反映されるまで数分待ちます。
すべての設定が完了したら自分の登録したドメインに行くと、設定が反映されているはずです。
完了しました。これでmainブランチに変更をpushすると自動で設定が反映されるはずです。