【2026年版】Decap CMS（旧Netlify CMS）+ Hugo のテーマをGitで管理してデプロイする

🔁 2026年リライト版 この記事は2018年10月に公開した「Netlify CMS（Hugo）のテーマをGitの使い方を覚えながらカスタマイズしてデプロイしてみよう」を、Decap CMS（2023年にNetlify CMSがフォーク・改名）+ Git 2.40+ + GitHub Actions / Netlify Build 前提で全面書き換えしたものです。

2018年からの主な変化点

Netlify CMS → Decap CMS（2023年2月、Netlifyの開発撤退に伴いコミュニティフォーク）
GitHub デフォルトブランチ: master → main（2020年10月以降の新規リポジトリは main）
Git認証: パスワード認証廃止 → Personal Access Token / SSH / GitHub CLI (gh) が必須
Slack通知: Netlify 標準のSlack連携が簡略化、または GitHub Actions から直接送信する構成が一般的
デプロイ選択肢: Netlify のほか Vercel / Cloudflare Pages、あるいは GitHub Actions → 任意のCDN の構成も普及

ゴール

Hugo サイトのテーマを Git で管理する
main ブランチに push すると自動ビルド・デプロイ
デプロイの成功／失敗を Slack に通知する

Git の準備（2026年版）

Git クライアントのインストール

❯ brew install git gh
❯ git --version
git version 2.44+
❯ gh --version

GitHub 認証

2021年以降、HTTPS パスワード認証は使えません。GitHub CLI が最も楽です。

❯ gh auth login

対話形式で GitHub にログインし、SSH か HTTPS トークンを選択します。以降、gh repo clone、gh pr create などで認証済みの状態が使えます。

基本コマンド

# クローン
❯ gh repo clone <user>/<repo>

# ブランチ作成
❯ git switch -c feature/header-design

# コミット
❯ git add .
❯ git commit -m "header: update color palette"

# プッシュ
❯ git push -u origin feature/header-design

# プルリクエスト作成
❯ gh pr create --fill

2018年当時の git checkout -b は今も動きますが、新しい git switch / git restore の方が意図が明確です。

テーマカスタマイズのワークフロー

1. テーマをサブモジュールで追加した場合

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

テーマ自体を編集したい場合は、テーマをフォーク してから追加するのが2026年推奨です。サブモジュールは他人のリポジトリを直接指しているので、自分のカスタマイズはコミットできません。

2. `layouts/` でテーマを部分的に上書き

テーマの構造を壊さず、ルート直下の layouts/ に同じパスでファイルを置くと上書きされます。例えばテーマの themes/PaperMod/layouts/partials/header.html を上書きしたいなら:

layouts/partials/header.html

このファイルを作って編集すれば、テーマ本体を触らずにレイアウトを差し替えられます。

Netlify へのデプロイ

netlify.toml

[build]
  publish = "public"
  command = "hugo --gc --minify"

[build.environment]
  HUGO_VERSION = "0.140.0"
  HUGO_ENV = "production"

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"
    X-Content-Type-Options = "nosniff"
    Referrer-Policy = "strict-origin-when-cross-origin"

デプロイプレビュー

main 以外のブランチを push すると、Netlify は Deploy Preview URL を自動生成します。PR上でプレビューを見ながらレビューできます。

Slack 通知

オプション A: Netlify の標準通知

Netlify UI で「Site settings → Build & deploy → Deploy notifications」→ 「Slack Integration」を追加。Deploy succeeded / Deploy failed を Slack チャンネルに自動送信できます。

オプション B: GitHub Actions から送信

より細かい制御が欲しい場合、GitHub Actions で Slack 通知するのが柔軟です。

.github/workflows/deploy.yml:

name: Deploy

on:
  push:
    branches: [main]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: recursive
      - uses: peaceiris/actions-hugo@v3
        with:
          hugo-version: '0.140.0'
          extended: true
      - run: hugo --gc --minify
      - name: Notify Slack
        if: always()
        uses: slackapi/slack-github-action@v1
        with:
          webhook-url: ${{ secrets.SLACK_WEBHOOK_URL }}
          payload: |
            {
              "text": "Deploy ${{ job.status }}: ${{ github.event.head_commit.message }}"
            }

Slack の Incoming Webhook を作って、リポジトリの Secrets に SLACK_WEBHOOK_URL として登録すれば動きます。

コンフリクトの解消

2人以上で同じリポジトリを触る場合や、Decap CMS からの投稿と手元の編集がぶつかる場合、Git のマージコンフリクトが発生します。VS Code / Cursor の組み込みマージエディタが2026年時点で最も使いやすいです。

❯ git pull --rebase origin main
# コンフリクトがあれば VS Code で解消
❯ git add .
❯ git rebase --continue

まとめ

2018年当時のNetlify CMS + Git + Slack の基本構造はそのまま生き続けていますが、

Netlify CMS → Decap CMS に名称変更
デフォルトブランチ master → main
GitHub 認証はパスワード不可、gh CLI / SSH / PAT が必須
GitHub Actions の成熟により、Slack通知など付随処理の選択肢が増えた

という点を押さえておけば、2026年でも快適に運用できます。