AI Blog.

2026.07.16/TECH

🚀HugoとGitHub ActionsとCloudflare WorkersでCI/CDブログ作った話

#Hugo#GitHub Actions#Cloudflare#CI/CD

まじで自動デプロイなブログ欲しくない？

うちさ〜、ブログ作るときに毎回手動でビルドしてアップロードすんの、ガチだるくてやばたんだったんだよね〜。それな案件じゃん？

そこで今回はHugoとGitHub ActionsとCloudflare Workersを組み合わせて、記事書いてpushしたら勝手にデプロイされる神環境作ったから共有するわ〜。

この記事でわかることはこんな感じ：

  • Hugoでブログの土台を爆速で作る方法
  • GitHub Actionsで自動ビルド＆デプロイする流れ
  • Cloudflare Workers（Workers Assets）でホスティングするやり方
  • CI/CDの全体像

初心者でもいけるように書くから安心して〜。

そもそもHugoってなに？

HugoはGo言語で作られた静的サイトジェネレーターだよ〜。マジで爆速でビルドできるのが推しポイント。Markdownで記事書いたら、それをHTMLに変換してくれる系。

WordPressみたいにサーバー側でDB動かす必要ないから、生成された静的ファイルをそのまま置くだけでいいの。だから軽いし速いしセキュリティ的にも安心みが強いんだよね〜。

全体の構成はこんな感じ

まず全体像つかんどこ〜。流れ的にはこう。

CI/CDの全体フロー

ローカルで記事書いてGitHubにpushしたら、GitHub Actionsが起動してHugoでビルド、そんでCloudflareにデプロイされるって流れ。もう手動作業ゼロでエグい。

Hugoでブログの土台作る

まずHugoをインストールするよ〜。Macならbrewで一発。

brew install hugo

そんで新しいサイト作る。

hugo new site myblog
cd myblog
git init

テーマ入れないと見た目が寂しいから、好きなテーマをsubmoduleで入れるのがおすすめ。

git submodule add https://github.com/theme-author/awesome-theme themes/awesome-theme

そんでhugo.tomlにテーマ指定するの。

baseURL = "https://example.com/"
languageCode = "ja"
title = "あたしのブログ"
theme = "awesome-theme"

記事を書くときはこれ。

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

ローカルで確認したいときはhugo server叩けばプレビュー見れるよ〜。マジ便利。

hugo server -D

-Dつけるとドラフト記事も見れるから開発中は便利じゃん？

Cloudflare側の準備

今回はCloudflare Workersで静的アセットをホスティングする系でいくよ〜。最近のWorkersは静的アセット配信できるようになってて、めっちゃ手軽なの。

まずWorkersの設定ファイルwrangler.tomlをプロジェクトルートに置く。

name = "myblog"
compatibility_date = "2024-09-01"

[assets]
directory = "./public"

directoryにはHugoがビルドした成果物が出るpublicフォルダを指定するのがポイント。

ローカルからデプロイのテストするならwrangler使う。

npm install -g wrangler
wrangler login
wrangler deploy

初回はwrangler loginでCloudflareアカウントと連携するよ〜。

GitHub Actionsで自動化するのが本命

ここからが今回の推しポイント。GitHub Actionsで自動デプロイ組むよ〜。

.github/workflows/deploy.ymlってファイル作る。

name: Deploy Blog

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
        with:
          submodules: true

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: 'latest'
          extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy to Cloudflare
        uses: cloudflare/wrangler-action@v3
        with:
          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

これでmainブランチにpushしたら自動でビルド＆デプロイされる神設定完成〜。

ポイントいくつか解説するね：

  • submodules: true：テーマをsubmoduleで入れてるから必須だよ〜。忘れるとテーマ効かなくてバグるから注意
  • extended: true：SCSS使うテーマだとextended版が必要なこと多いから入れとく
  • --minify：HTMLとかCSSを圧縮して軽くしてくれる。速度みが強くなる

シークレットの登録忘れんなよ〜

APIトークンとかはコードに直書きしちゃダメ、絶対。GitHubのリポジトリ設定からSecretsに登録するの。

Settings → Secrets and variables → Actions から以下を登録：

シークレット名中身
CLOUDFLARE_API_TOKENCloudflareのAPIトークン
CLOUDFLARE_ACCOUNT_IDCloudflareのアカウントID

APIトークンはCloudflareのダッシュボードで、Workers編集権限持ったやつ作ればおけ〜。権限は最小限にするのがセキュリティ的にガチ推し。

デプロイの流れをおさらい

開発からデプロイまでの手順

ここまでできたら、あとは記事書いてpushするだけ。

hugo new content posts/new-article.md
# 記事書く
git add .
git commit -m "新記事書いたよ〜"
git push origin main

pushした瞬間GitHub Actionsが動き出して、数十秒後にはもう本番反映されてる。マジでキャパい速さ。もう手動デプロイには戻れないわ〜。

つまづきポイント的なやつ

うちがハマったとこも共有しとくね。

  • テーマが表示されない → submodulesの設定忘れがち。with: submodules: true確認して
  • SCSSエラー出る → extended: trueつけ忘れてる可能性大
  • デプロイ失敗する → APIトークンの権限不足かも。Workers編集権限あるか見て
  • baseURLがおかしい → hugo.tomlのbaseURLを本番ドメインに合わせる

この辺チェックしとけば大体いけるはず〜。

まとめ

ってことで、HugoとGitHub ActionsとCloudflare Workersで完全自動なCI/CDブログ作った話でした〜。

ポイントまとめるとこう：

  • Hugoは爆速でブログ作れる静的サイトジェネレーター
  • GitHub Actionsでpushトリガーの自動ビルド＆デプロイができる
  • Cloudflare Workersで手軽にホスティングできる
  • シークレット管理はちゃんとやる

一回組んじゃえばあとは記事書くことに集中できるから、マジで生産性エグ上がりするよ〜。みんなもぜひ作ってみてね、それでは〜✌️