Hugo + Cloudflare Pagesで無料ブログ構築 - Getting Startedをやってみる

October 27, 2025

はじめに

個人でアウトプットする場としてブログが欲しいなと思ったので、ブログを構築することにしました。お金も手間もあまりかけたくないので、まずはHTMLとCSSでシンプルに作成しようと思いましたが、記事の内容以外のテンプレート化できそうな部分を毎回書くのも手間だと感じました。

そこで、静的サイトジェネレーターであるHugoを使ってブログを構築することにしました。ちょろっとテンプレートエンジンをかませてくれればよいだけなので、 Next.jsのような大げさな仕組みも、PHPのようなサーバーサイドレンダリングも必要ありません。ただ事前に生成しておいたファイルを、配信してくれれば十分です。

また、ホスティングについては無料で使えてパフォーマンスがよさそうなCloudflare Pagesを利用することにしました。使ってみたところ、画面でポチポチするだけで簡単にデプロイできました。

環境

本記事を作成するのに利用した環境は以下の通りです。とはいえ、miseやHugo自体はクロスプラットフォームで動作するので、 Windows以外のOSでも特に変わることはありません。

OS: Windows 11 HOME
PowerShell: 7.5.4
Scoop: 0.5.3
mise: 2025.10.18 windows-x64 (2025-10-25)
Hugo: v0.152.2 (extended)

Hugoを使ってブログの見た目を作成する

Hugoのインストール

とにもかくにもまずはHugoをインストールする必要があります。公式ドキュメントを参考に、 OSに応じたインストール手順を実行してください。早速裏切る形になってしまいますが、私はmiseを利用してインストールしました。そうすることで、Hugoのバージョンを固定することができるためです。 Hugoのバージョンアップによる、動作不良のリスクを軽減できます。 (ほとんど起こらないとは思いますが)

mise自体のインストールは省略しますが、次のコマンドでHugoをインストールできます。

# Hugoの検索
> mise search hugo
Tool           Description
hugo           The world’s fastest framework for building websites. https://github.com/gohugoio/hugo
hugo-extended  The world’s fastest framework for building websites. https://github.com/gohugoio/hugo/hugo-extended

# Hugoのバージョンを検索
> mise ls-remote hugo-extended
0.16
# ...省略
0.152.1
0.152.2

# 目的のバージョンをインストール
> mise install hugo-extended@0.152.2

サイトの作成

公式ドキュメントにあるGetting Startedを参考に、ブログを作成していきます。まずは新しいHugoのサイトを次のコマンドで作成してみます。出力にGetting Startedにはないテーマについての説明も出てきていますね。テーマをカスタマイズするときの参考にします。

# 99-percent-orange-driven-developmentという名前で新しいサイトを作成しています
# ./99-percent-orange-driven-developmentにフォルダが作成されます
> hugo new site 99-percent-orange-driven-development
Congratulations! Your new Hugo site was created in C:\Users\me\Documents\projects\99-percent-orange-driven-development.

Just a few more steps...

1. Change the current directory to C:\Users\me\Documents\projects\99-percent-orange-driven-development.
2. Create or install a theme:
   - Create a new theme with the command "hugo new theme <THEMENAME>"
   - Or, install a theme from https://themes.gohugo.io/
3. Edit hugo.toml, setting the "theme" property to the theme name.
4. Create new content with the command "hugo new content <SECTIONNAME>\<FILENAME>.<FORMAT>".
5. Start the embedded web server with the command "hugo server --buildDrafts".

See documentation at https://gohugo.io/.

このフォルダが新しいプロジェクトということになるので、こちらをGitリポジトリとして管理できるように設定します。ついでに、miseを使ってHugoのバージョンを固定します。運用中にHugoをアップデートするときには、不具合が起きないか確認すると安全です。

> cd 99-percent-orange-driven-development

# Hugoのバージョンを固定します
> mise use hugo-extended@0.152.2
mise C:\Users\me\Documents\projects\99-percent-orange-driven-development\mise.toml tools: hugo-extended@0.152.2

# Gitリポジトリを初期化します
> git init
Initialized empty Git repository in C:/Users/me/Documents/projects/99-percent-orange-driven-development/.git/

テーマの選択と適用

次に、ブログの見た目を決めるテーマを選択します。公式ドキュメントのHugo Themesから気に入ったテーマを入れれば良いようです。今回はGetting Startedに従って「Ananke」というテーマを利用してみます。テーマのインストールは、テーマのGitリポジトリをthemesフォルダにクローンして、 hugo.tomlにテーマ名を追記することで完了します。

# テーマをクローンします
> git submodule
 add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
Cloning into 'C:/Users/me/Documents/projects/99-percent-orange-driven-development/themes/ananke'...
remote: Enumerating objects: 4061, done.
remote: Counting objects: 100% (42/42), done.
remote: Compressing objects: 100% (26/26), done.
remote: Total 4061 (delta 28), reused 20 (delta 16), pack-reused 4019 (from 2)
Receiving objects: 100% (4061/4061), 6.19 MiB | 14.67 MiB/s, done.
Resolving deltas: 100% (1964/1964), done.
warning: in the working copy of '.gitmodules', LF will be replaced by CRLF the next time Git touches it

# hugo.tomlにテーマ名を追記します
> echo "theme = 'ananke'" >> hugo.toml

この時点で、設定されたテーマでブログを表示させることができます。まだコンテンツがありませんが、ホーム画面っぽいものが確認できます。次のコマンドを実行してから、http://localhost:1313/にアクセスしてみましょう。

# ローカルサーバーを起動して、ブログを表示させてみる
> hugo server --buildDrafts

コンテンツの追加

せっかくなので、何かコンテンツも追加してみたいですね。 Getting Startedでは.mdファイルを作成していましたが、Hugoでは.htmlファイルも作成できます。マークダウン形式で記事を書く予定はないので、今回は.htmlファイルでブログ記事用のコンテンツを追加してみます。（個人用ですしHTML + CSSのみでシンプルなブログを運用していきたいのです）

> hugo new content content/posts/2025/10/new-hugo-blog-1/index.html
Content "C:\\Users\\me\\Documents\\projects\\99-percent-orange-driven-development\\content\\posts\\2025\\10\\new-hugo-blog-1\\index.html" created

適当にファイルを編集して再度ローカルサーバーを起動します。ファイルの冒頭にdraft: trueとある場合は、--buildDraftsオプションを付けて起動しないと見れないようです。ちなみに、--bind 0.0.0.0オプションを付けると、同じネットワーク内の他のデバイスからもアクセスできるようになります。同じWifiに接続しているスマホなどからブログの見た目を確認したいときに便利です。（localhostとしていた部分をipconfigなどで確認したローカルIPアドレスに置き換える必要があります）

# ローカルサーバーを起動して、ブログを表示させてみる
> hugo server --buildDrafts --bind 0.0.0.0

メタデータの設定

このままでは、ブログタイトルやサイトのタイトルなどがデフォルトのままです。 hugo.tomlや.htmlのフロントマター（冒頭の---で囲まれた部分）を編集して、メタデータを設定します。ここまですると、ブログの見た目はほぼ完成です。

# hugo.toml
baseURL = 'https://example.org/'
languageCode = 'ja'
title = '99% Orange Driven Development'
theme = 'ananke'

# content\posts\2025\10\new-hugo-blog-1\index.html
---
title: "Hugo + Cloudflare Pagesで無料ブログ構築 - Getting Startedをやってみる"
date: 2025-10-27T21:10:00+09:00
draft: false
tags: ["Hugo", "Cloudflare Pages"]
categories: ["Hugo"]
summary: "Hugoを使ってブログを構築し、Cloudflare Pagesで無料ホスティングする方法を紹介します。"
---