Cloudflare PagesでHugoをデプロイしてみた

Mon, 10 Jun 2024 14:27:10 +0000

ことの発端

独自ドメインを取得してみようと調べてると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 に接続」を選択。