サイト運用 Mari

CMSをDIYした話 — Decap CMSでブログ管理画面を作る

WordPressの管理画面に慣れていたデザイナーが、Decap CMSでブログの管理画面を構築。設定からOAuth認証のトラブルまで、導入のリアルな記録。

WordPress を離れて困ったこと

WordPress からAstroに移行して、一つだけ困ったことがありました。記事の管理画面がない。

WordPress なら /wp-admin/ にアクセスすれば、ビジュアルエディタで記事を書いて、下書き保存して、ボタン一つで公開できます。Astro はフレームワークなので、CMS機能は自分で用意する必要があります。

記事はMarkdownファイルで書けますが、毎回テキストエディタを開いて frontmatter（タイトルや日付のメタ情報）を手打ちするのは、正直しんどい。

Decap CMS を選んだ理由

Decap CMS（旧 Netlify CMS）は、Git ベースのヘッドレスCMSです。特徴は3つ。

  1. ブラウザで使える管理画面 — /admin/ にアクセスするだけ
  2. Git に保存 — 記事データはMarkdownファイルとしてGitHubに保存される
  3. 無料 — サーバー不要、ホスティング費用なし

WordPressの管理画面に慣れた人にとって、「ブラウザから記事を書ける」というのは必須条件でした。

セットアップ

Decap CMS の導入自体はシンプルです。

  1. public/admin/index.html に管理画面のHTMLを配置
  2. public/admin/config.yml にコレクション（ニュース、ブログなど）を定義
  3. GitHub OAuth の認証設定

1と2はファイルを置くだけ。問題は3でした。

OAuth 認証でハマった

Decap CMS はGitHubにログインして記事を管理する仕組みなので、OAuth認証が必要です。

最初は Cloudflare Pages Functions で認証サーバーを構築していたのですが、サイトをSSRモードに切り替えたタイミングで動かなくなりました。SSRモードでは functions/ ディレクトリが無視されるのです。

原因がわかるまでに時間がかかりました。管理画面にアクセスすると404、ログインボタンを押すと「Invalid Redirect URI」。Claude Code と一緒にエラーを追いかけて、最終的に Cloudflare Functions から Astro の API ルートに書き直すことで解決しました。

さらに、GitHub の OAuth App 設定でコールバックURLが古いドメインのままだったことにも気づきました。小さな設定ミスが重なると、原因の特定が本当に難しい。

使い心地

セットアップが終わってしまえば、使い心地は悪くありません。

  • ブラウザから /admin/ にアクセス
  • GitHub でログイン
  • 左メニューから「Blog」→「＋ Blog記事」
  • タイトル、本文、タグを入力
  • 「下書き」をONにしたまま Publish → 本番には表示されない

WordPress ほどリッチではないけれど、ブログ記事を書くには十分です。画像のアップロードもドラッグ＆ドロップで対応しています。

WordPress と比べて

項目

WordPress

Decap CMS

管理画面

リッチ（プラグインで拡張可）

シンプル（テキスト中心）

メディア管理

専用ライブラリ

GitHubリポジトリに保存

プレビュー

リアルタイム

ローカルで確認（npm run dev）

データ保存先

MySQL

GitHub（Markdownファイル）

カスタマイズ

プラグイン

config.yml で定義

一番の違いは「プレビュー」です。WordPress はその場でプレビューできますが、Decap CMS の場合はローカルの開発サーバーで確認する必要があります。

ただ、記事データが GitHub にあるというのは大きなメリット。バージョン管理されているので、誤って消しても復元できます。サーバーの引っ越しもリポジトリを移すだけ。

CMS選びで大事なこと

「WordPressじゃないと無理」と思っていましたが、実際はそうでもなかった。必要なのは「ブラウザから記事が書けること」と「下書きが管理できること」の2つだけでした。

Decap CMS はその最小限を満たしてくれます。