Cloudflare PagesでHugoで作ったページを公開する

Cloudflare Page で Hugo で作ったページを公開する

https://gohugo.io/
技術ブログを書こうと Zenn や Qiita に書こうとも思ったが、せっかく無料で公開できる Cloudflare Pages を使ってみようと思いドキュメントを見つつやってみました。
基本的には Tutorial をいてやればよかったですが、微妙に詰まったのでメモを残しておきます。

環境:
OS: Mac 15.2（24C101）

Hugo のセットアップ

以下の Quick Start を見つつ進めていく
https://gohugo.io/getting-started/quick-start/

1. brew インストール

Mac なので、brew を使います

brew がない場合は以下コマンドでインストール

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. Git インストール

大体持っていると思いますが、git versionなどしてみて万が一なければ brew でインストールします。

brew install git

3. go インストール

ビルドに go を使う場合があるので go もインストールします https://go.dev/doc/install

4. Hugo インストール

最後に Hugo をインストール

brew install hugo

以下のようにそれぞれ以下のようにバージョンが表示されれば OK

$ git -v
git version 2.39.5 (Apple Git-154)
$ brew -v
Homebrew 4.4.13
# hugo version
hugo v0.140.1+extended+withdeploy darwin/arm64 BuildDate=2024-12-23T16:26:35Z VendorInfo=brew

ローカルでサイトを表示する

  1. プロジェクト作成

この場合my-blogをいうページが作成されます

hugo new site my-blog
  1. テーマを追加

git の submodule を利用してテーマを clone する テーマの種類はこちらから見ることができますが、
今回はanankeを設定します。

git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

hugo.toml のファイルに以下の記述を追加。

theme = 'ananke'
  1. サーバーを立ち上げる
hugo server

こんな感じの表示になります。

  1. コンテンツを追加する

my-first-post.mdとファイル名を記入してコンテンツを追加します

hugo new content content/posts/my-first-post.md

👆 で生成したファイルにはデフォルトで以下の記載があります。

+++
date = '2024-12-30T18:00:44+09:00'
draft = true
title = 'My First Post'
+++

draftのは下書きかどうかのフラグで true の場合は下書きとして扱われ、画面確認をするためには開発用のサーバーをサーバーを立ち上げる必要があります。

hogu server -D

これで今作成した画面を確認することができます。

公開する時はdraftをfalseにします。

Cloudflare Page でデプロイして公開してみる

前提:

  1. GitHub にリポジトリがあること
  2. Cloudflare のアカウントがあること

1. GitHub に Push

今まで編集してきたものを自身の GitHub のリポジトリに Push します。

2. Cloudflare に GitHub のリポジトリと公開用ブランチを設定する

Cloudflare のダッシュボードでサイドメニューから「Workers & Pages」を選択。
アプリケーションを作成するの画面で既存の Git リポじょとりをインポートして作成するの「Git に接続」をクリック。

GitHub のアカウントと先ほど作成 Push したリポジトリを選択します。

3. プロジェクト設定、デプロイ設定

「プロジェクト名」は任意の名称を設定し、「プロダクション ブランチ」には公開用のブランチを指定します。
これをすることで、指定したブランチに Push をした時に自動でデプロイ作業が始まります。
(master が設定されている場合、master ブランチに変更が入った時にデプロイが走ります。)

次にビルドの設定で「フレームワーク プリセット」に「Hugo」を選択します。
自動で「ビルド コマンド」と「ビルド出力ディレクトリ」が設定されますが、これらは変更する必要はないのでそのままにします。

最後に環境変数を設定していきます。
Cloudflare Pages で hugo のコマンドが実行されますが、その hugo のバージョンはローカルに持っている hugo のバージョンとは違うので挙動が違わないように合わせるようにします。

タイプ : テキスト
変数名 : HUGO_VERSION
値 : 0.140.1

また、ベースとなる URL をしているするために次の環境変数を設定します。 値は設定画面にある「プロジェクトは~~~~~にデプロイされます。」の~~~~部分の文字を指定します。
(以下は先ほどの画像のスクショの場合の設定です)

タイプ : テキスト
変数名 : CF_PAGES_URL
値 : my-first-site-ap4.pages.dev

最後に「保存してデプロイする」をクリックするとデプロイが開始します。

もし失敗したら、ローカルでhugo serverコマンドなどが成功するかなど試してみてください。

デプロイが完了し、少し時間(体感 3 分ぐらい)を置いたら見れるようになりました。

(👆 の手順でデプロイ、見れるようになったのがこのページです)