GitHub Actions で Hugo を自動ビルドする

push するだけでサイトが更新される仕組みを GitHub Actions で構築した手順をまとめた。

概要

GitHub に push するたびに Hugo が自動でビルドされ、Cloudflare Pages にデプロイされる仕組みを構築した。手元でビルドする手間がなくなり、Markdown を書いて push するだけでサイトが更新される。

ワークフローの全体像

main ブランチに push
    ↓
GitHub Actions が起動
    ↓
① Hugo をインストール
② hugo --minify でビルド
③ public/ を Cloudflare Pages にデプロイ
    ↓
サイトが更新される

ワークフローファイル

.github/workflows/deploy.yml に以下を記述する。

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: "latest"

      - name: Build
        run: hugo --minify

      - name: Deploy to Cloudflare Pages
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          command: pages deploy public --project-name=my-project

GitHub Secrets の登録

Cloudflare への認証情報を GitHub に登録する。

  1. GitHub リポジトリの「Settings」→「Secrets and variables」→「Actions」を開く
  2. 「New repository secret」で以下を追加する
Secret 名 取得場所
CLOUDFLARE_API_TOKEN Cloudflare ダッシュボード → My Profile → API Tokens
CLOUDFLARE_ACCOUNT_ID Cloudflare ダッシュボード → 右サイドバー

API トークンの作成

Cloudflare の API トークンは最小権限で作成する。

  1. 「Create Token」→「Edit Cloudflare Workers」テンプレートを選択
  2. 「Zone Resources」は不要なので削除
  3. 「Account Resources」に対象アカウントを指定
  4. 「Continue to summary」→「Create Token」

ポイント

  • hugo-version: "latest" にしておくと常に最新版でビルドされる
  • ビルドが失敗したときは Actions タブでログを確認する
  • Secrets が未設定だとデプロイステップでエラーになる