ことの発端

独自ドメインを取得してみようと調べてるとCloudflareが一番安そうなので登録してみたらCloudflare Pagesなる静的コンテンツのホスティングサービスがあるのを知ったことから始まった。

ちなみに今までGitHub PagesやNetlifyを触ったことがあったのでそれほど苦労はなかった。

Hugoも簡単にブログを扱えそうだったのでGoらしいがやってみる

本当にただのノリ

実際にHugoをCloudflare Pagesにデプロイするまでの流れ

1. Hugoのインストール(Mac)

まずはHugoをインストールする。

環境はMacで参考にしたのはこちら

と言ってもHomebrewは既にインストールされているのでこれだけでそれ以外は特にしなかった

brew install hugo

2. Hugoでサイトを作成

チュートリアルを進めていく。

サイト全体作成

hugo new site quickstart
cd quickstart
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
echo "theme = 'ananke'" >> hugo.toml
hugo server

記事を作成(contentなくてもいけた)

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

※作成されたファイル(content/posts/my-first-post.md)は以下のようにdraft: trueになってるのでdraft: falseにしないと表示されないので注意。

hugo server -D しとけば変更せずとも表示される。

---
title: "My First Post"
date: 2024-06-10T14:27:10Z
draft: true
---

3. 最後にCloudflare Pagesにデプロイ

Pages の新規作成

アカウント作成後、左メニューの「Workers & Pages」から「Pages」 タブを選択し、「Git に接続」 を選択。 pagesのセットアップ画面

Git リポジトリと連携

連携先は GitHub と GitLab が選べる、今回はGitHubを利用する 画面の手順にそって、GitHub 側でのリポジトリへの許可設定を行う。

Pages 側にて、対象の GitHub アカウントとリポジトリを選択し 「セットアップの開始」 を選択する。

ビルド＆デプロイのセットアップ

プロジェクト名やプロジェクトブランチを設定する

ビルドコマンドは以下のようにした。 こうすることでいちいちconfig.ymlのbaseURLを変更しないで済むので。

hugo -- -b $CF_PAGES_URL

$CF_PAGES_URLは環境変数からセットできる。 pagesのセットアップ画面1

おわり