【初心者向け】Hugo + PaperMod を Cloudflare Pages で公開するメリットと始め方

🚀 はじめに：この記事でできること

Hugo と PaperMod で作ったブログを、Cloudflare Pages を使って高速・無料で公開する方法を、初心者向けにわかりやすくまとめたガイドです。

この記事を読むと、次のことが理解できます。

Hugo + PaperMod + Cloudflare Pages の相性が良い理由
ローカル → GitHub → Cloudflare Pages の公開までの全体像
初心者がつまずきやすいポイントと回避方法

🧭 前提：必要な環境と対象読者

Cloudflare Pages で公開する前に、最低限そろえておきたい環境を整理します。

必要な環境

Hugo Extended v0.153.1 がローカルにインストール済み
- ※PaperMod v8.0 は SCSS を使うため Extended 版が必須
GitHub アカウント（push / pull ができる状態）
Cloudflare アカウント（無料プランでOK）

想定する読者

コマンドは最低限なら使える
GUI ベースの設定があると安心
「とにかく簡単に静的サイトを公開したい」人

💡 概要：Hugo + PaperMod + Cloudflare Pages の相性が良い理由

Hugo（静的サイトジェネレーター）

Go 製でビルドが高速
Markdown で記事を書ける
PaperMod などテーマが豊富

PaperMod（Hugo テーマ）

軽量・高速
ブログ向けの機能が充実
SCSS を使うため Hugo Extended が必須

Cloudflare Pages（ホスティング）

無料で使える
グローバル CDN による高速配信
GitHub 連携で自動デプロイ
HTTPS 証明書も自動発行

組み合わせるメリット

git push するだけで自動デプロイ
CDN による高速配信
無料枠が広く個人ブログに最適
Hugo のビルド設定が簡単

📱 Step 1：ローカルに Hugo + PaperMod 環境を用意する

1. Hugo Extended をインストール

Windowsの場合

1. Hugo Extended の ZIP をダウンロード
   Hugo の公式 GitHub リリースページへアクセスします。

   👉 https://github.com/gohugoio/hugo/releases (github.com)

2. ダウンロードするファイルを間違えないこと
   Windows 用の Extended 版は次のような名前です。

   hugo_extended_0.153.1_windows-amd64.zip
   ※ `extended` と `windows-amd64` が入っているものを選ぶのがポイント。

3. ZIP を展開し、任意のフォルダに置く
   例：  
   `C:\Tools\Hugo\`  
   など、わかりやすい場所に `hugo.exe` を置きます。

4. PATH を通す
   1. Windows の検索で「環境変数」と入力  
   2. 「環境変数の編集」を開く  
   3. 「Path」を選択 →「編集」  
   4. `C:\Tools\Hugo\` を追加  
   5. OK を押して閉じる

macの場合

brew install hugo

インストール後、次で Extended 版か確認します。

hugo version

extended の文字が含まれていれば OK。

2. 新規 Hugo サイトを作成

hugo new site myblog
cd myblog

3. PaperMod を導入（サブモジュール推奨）

git init
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod

config にテーマを指定します。

theme: "PaperMod"

⚙️ Step 2：ローカルで確認し、GitHub に push する

1. ローカルで動作確認

hugo server -D

http://localhost:1313 で PaperMod が適用されているか確認します。

2. GitHub に push

git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/yourname/myblog.git
git push -u origin main

ポイント
public/ は push しないほうが良いです。Cloudflare Pages が自動生成します。

🔧 Step 3：Cloudflare Pages で公開する

1. Cloudflare Pages でプロジェクト作成

Cloudflare ダッシュボード →「Pages」
「プロジェクトを作成」
GitHub と連携
myblog リポジトリを選択

2. Hugo 用ビルド設定

項目	値
Framework preset	Hugo
Build command	`hugo`
Build output directory	`public`
Environment variables	`HUGO_VERSION = 0.153.1`

重要
PaperMod v8.0 は SCSS を使うため、Cloudflare Pages でも Hugo Extended が必要。
そのため HUGO_VERSION を必ず指定します。

3. デプロイ開始

設定を保存すると自動でビルドが始まり、
https://yourname.pages.dev/
のような URL で公開されます。

以後、main に push するたびに自動デプロイされます。

⚠️ よくあるつまずきポイント

初心者が特にハマりやすいポイントをまとめました。

1. Hugo Extended 版を使っていない

→ PaperMod が SCSS を使うためビルドエラーになる

2. `public/` を GitHub に push してしまう

→ Cloudflare Pages の自動ビルドと衝突する

3. `baseURL` の設定忘れ

→ OGP や画像リンクが崩れる

baseURL の設定例

baseURL: "https://yourname.pages.dev/"

末尾の / を忘れないように。

✅ チェックリスト

Hugo Extended 版を使っている（extended を確認）
PaperMod を themes/PaperMod に追加した
hugo server -D でローカル確認済み
GitHub に public/ を含めていない
Cloudflare Pages の Framework = Hugo
HUGO_VERSION を指定した
baseURL を本番 URL に設定した
公開後にリンク・画像・OGP を確認した

📚 参考リンク（公式中心）

Cloudflare Pages 公式ドキュメント（Hugo ガイド）
https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/
Cloudflare Pages Docs（全般）
https://developers.cloudflare.com/pages/
Hugo 公式
https://gohugo.io/
PaperMod GitHub
https://github.com/adityatelange/hugo-PaperMod
Hugo + Cloudflare Pages に関する日本語解説（参考）
https://blog.ynr.jp/article/hugo/cloudflare_pages_hugo/

🔧 拡張案：次にやると良いこと

独自ドメインを Cloudflare Pages に設定
OGP 画像の自動生成
GitHub Actions や Cloudflare Workers で自動処理を追加

🎯 まとめ

Hugo + PaperMod は高速でブログに最適
Cloudflare Pages は無料・高速・自動デプロイが魅力
ローカル → GitHub → Cloudflare Pages の流れで簡単に公開できる
HUGO_VERSION と baseURL の設定が安定運用の鍵

🚀 はじめに：この記事でできること#

🧭 前提：必要な環境と対象読者#

必要な環境#

想定する読者#

💡 概要：Hugo + PaperMod + Cloudflare Pages の相性が良い理由#

Hugo（静的サイトジェネレーター）#

PaperMod（Hugo テーマ）#

Cloudflare Pages（ホスティング）#

組み合わせるメリット#

📱 Step 1：ローカルに Hugo + PaperMod 環境を用意する#

1. Hugo Extended をインストール#

Windowsの場合#

macの場合#

2. 新規 Hugo サイトを作成#

3. PaperMod を導入（サブモジュール推奨）#

⚙️ Step 2：ローカルで確認し、GitHub に push する#

1. ローカルで動作確認#

2. GitHub に push#

🔧 Step 3：Cloudflare Pages で公開する#

1. Cloudflare Pages でプロジェクト作成#

2. Hugo 用ビルド設定#

3. デプロイ開始#

⚠️ よくあるつまずきポイント#

1. Hugo Extended 版を使っていない#

2. public/ を GitHub に push してしまう#

3. baseURL の設定忘れ#

baseURL の設定例#

✅ チェックリスト#

📚 参考リンク（公式中心）#

🔧 拡張案：次にやると良いこと#

🎯 まとめ#