【2026年版】Decap CMS（旧Netlify CMS）+ Hugo でMarkdownで書ける無料ブログを構築する

🔁 2026年リライト版 この記事は2018年10月に公開した「Netlify CMS（Hugo）でMarkdownで記述可能な無料ブログを構築する（構築編）」を、Decap CMS（2023年にNetlify CMSがフォーク・改名）+ Hugo 0.140+ 前提で全面書き換えしたものです。

2018年からの主な変化点

Netlify CMS → Decap CMS（2023年2月）: 開発元Netlifyが撤退し、コミュニティフォークのDecap CMSが事実上の後継
Hugo Modules / Page Bundles の普及
代替CMSの台頭: Sveltia CMS（Decap互換の軽量モダン実装）、Tina CMS、Keystatic など選択肢が増加
ホスティング選択肢: Netlify に加え Vercel、Cloudflare Pages が有力に
JAMstack → 静的サイト+エッジ関数 という言い方にシフト（JamstackブランドはNetlifyが撤収）

今でもこの構成を選ぶ理由

2026年時点でも、Git ベース + Markdown ファイル + 静的生成 の構成には強みがあります。

所有権が自分にある: Git リポジトリが「真実のソース」。特定SaaSがサービス終了しても移行可能
高速: 静的 HTML を CDN から配信。データベース接続なし
ほぼ無料で運用可能: GitHub + Netlify/Vercel/Cloudflare Pages 無料枠で個人ブログには十分
AIとの相性: Markdown は LLM での編集・変換がしやすい

2026年版構築手順

1. Hugo インストール

❯ brew install hugo
❯ hugo new site my-blog
❯ cd my-blog

2. テーマを追加（例: PaperMod）

❯ git init
❯ git submodule add --depth=1 https://github.com/adityatelange/hugo-PaperMod themes/PaperMod

hugo.toml:

baseURL = "https://example.com/"
languageCode = "ja"
title = "My Blog"
theme = "PaperMod"

[params]
  ShowReadingTime = true
  ShowShareButtons = true

3. Decap CMS を配置

static/admin/index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <script src="https://unpkg.com/decap-cms@^3.8.0/dist/decap-cms.js"></script>
</body>
</html>

static/admin/config.yml:

backend:
  name: git-gateway
  branch: main

media_folder: static/images
public_folder: /images

collections:
  - name: blog
    label: Blog
    folder: content/posts
    create: true
    slug: '{{slug}}'
    fields:
      - { label: Title, name: title, widget: string }
      - { label: Date, name: date, widget: datetime, format: 'YYYY-MM-DD' }
      - { label: Draft, name: draft, widget: boolean, default: false }
      - { label: Body, name: body, widget: markdown }

4. GitHub にプッシュ

❯ git remote add origin https://github.com/<user>/my-blog.git
❯ git add . && git commit -m "init"
❯ git push -u origin main

5. Netlify（または Vercel / Cloudflare Pages）と連携

Netlify の場合:

Netlify で「Add new site」→「Import from Git」
GitHub リポジトリを選択
Build command: hugo --minify / Publish directory: public
デプロイ完了後、「Identity」を有効化 → 「Git Gateway」もオンに
自分のメールアドレスを「Identity」に招待

6. 管理画面にアクセス

デプロイ後、https://<site>.netlify.app/admin/ にアクセスして Netlify Identity でログインすると、ブラウザ上から記事投稿・編集ができます。

代替: Sveltia CMS という選択肢

Decap CMS は開発ペースが緩やかなため、Sveltia CMS が2024年以降注目を集めています。Decap の config.yml をそのまま使えて、UI が高速・モダンです。

<script type="module" src="https://unpkg.com/@sveltia/cms/dist/sveltia-cms.js"></script>

ローカルテスト

編集時に毎回GitHubにテストコミットしたくない場合は、Decap Server でローカルバックエンドを使えます。詳しくはローカルホストでDecap CMS（旧Netlify CMS）をテストするを参照してください。

Netlify 以外のホスティング

Vercel: Next.js 系に強いがHugo含め静的サイトも得意。vercel.json で設定
Cloudflare Pages: 帯域無料、世界中のエッジから配信。git-gatewayの代替に Cloudflare Access + OAuth が必要
GitHub Pages: GitHub Actions で Hugo ビルド → デプロイ