Zenn
🍊

GitベースのヘッドレスCMS 2種 Decap CMS と Contentrain を試してみた

2024/01/27に公開
Next.js
React
Headless CMS
techblog
tech

概要

Next.js製のブログサイトに導入するCMSとして2種類のヘッドレスCMSを試してみた所感です。
今回は導入しやすそうなGitベースのヘッドレスCMSで、「Decap CMS（旧Netlify CMS）」と「Contentrain」の2種を試しました。

導入するサイトの主な技術スタック

  • フレームワーク: Next.js
  • ライブラリ: React, TypeScript
  • デプロイ: Vercel
  • 投稿ファイル形式: markdown

GitベースのCMSを選んだ理由

  • 現状markdownベースで記事のファイルを管理している
  • APIベースのヘッドレスCMSと比較して導入しやすそう
    （バックエンドやデータベースの設定が不要）
  • 無料で使用できるものが多い

それぞれのCMSについて

👉 Decap CMS（旧Nexlify CMS）

  • オープンソースのCMS
  • React製のエディタ
  • 旧Netlify CMSということもありNetlifyとの連携に強い

https://decapcms.org/

エディタ

Jamstack より引用

Collectionの設定

👉 Contentrain

  • 様々なJamstackなWebアプリケーションとの統合がスムーズ
  • 開発者・コンテンツ編集体験ファーストな作り
  • 現在Beta版で今夏v2.0リリース予定

https://contentrain.io/

エディタ

Collectionの設定

導入方法

導入はContentrainのほうが圧倒的に簡単です。
ContentrainはダッシュボードがWebアプリケーションとして既にあるため、始めるのに必要なのはログインとGitとの連携のみです。

一方のDecap CMSはadmin用のページを表示するために一作業必要です。
さらにNetlify以外にデプロイする場合はapiのエンドポイントの設定も自分で行う必要があります。

Contentrainの場合

  1. アカウントを作成
    トップページへアクセスして「Get Started」からアカウントを作成します。
    Google, GitHubアカウントでのログインも可能です。

  2. プロジェクトを作成
    ※ 既にあるプロジェクトに追加する場合はフレームワークは「カスタム」を選択

  3. GitHubのリポジトリを選択
    ブランチ, markdownファイルを格納するフォルダのパス, 記事内の画像を格納するフォルダのパスを入力します。

以上で設定は完了です 🎉

ブログの構造に合わせてCollectionを設定して投稿が始められます。
ログインしてから投稿を作成するまで1時間もかかりませんでした。

Decap CMSの場合

テンプレートを使用して新たなサイトとして作成する方法と既に運用中のサイトに追加する方法の2種類あります。

今回は運用中のサイトに追加するドキュメントに従って進めました。

  1. /public に admin フォルダを作成
  2. /public/admin に以下のファイルを作成
admin
 ├ index.html // entry point for the Decap CMS admin interface to access yoursite.com/admin/
 └ config.yml // the heart of your Decap CMS installation
  1. index.htmlを編集
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="robots" content="noindex" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Decap CMS -->
  <script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"></script>
</body>
</html>

※ npmパッケージの使用も可能
4. config.ymlを編集
GitHubを使用する例です。

backend:
  name: github
  repo: <YOUR_REPOSITORY_NAME>
  branch: master
  site_domain: your-domain.com
  base_url: https://your-domain.com/
  auth_endpoint: api/auth
  
# ここに画像の保存場所や多言語対応、Collectionなどを記述します。
  1. エンドポイントの作成
    今回Vercelにデプロイをする必要があるため、How to install Netlify CMS on Vercel and Next.jsを参考に以下の作業をします。
  • GitHub で OAuthアプリを作成
  • Vercel に環境変数を登録
  • エンドポイント用のconfigファイルを作成
  • /pages/api/auth.js, /pages/api/callback.js を作成
  1. Vercelへデプロイする
  2. 管理画面にログインする
    https://custom-domain.com/admin へアクセスしてGitHubアカウントを認証します。

ダッシュボードが表示されたら設定は完了です 🎉

所感

GitベースのCMSについて

✅ 比較的導入しやすい
✅ ほぼ無料
✅ markdownで投稿データを管理している場合は引き続き同じ方法で管理できる

🔺 Gitと連携しているため投稿を編集する度にビルドが走る
（Contentrainに関してはCollectionなどの編集でもビルドが走る）
ホスティング先で設定をすれば防げますが一手間発生するという点ではネガティブな要素です
🔺 機能が物足りなくエディタやダッシュボードの挙動が不安定なことがある
APIベースのCMSのほうが人気で成長力があるためか、機能が少なかったり挙動が不安定なところがいくつか目に付きました。

2種のCMSの比較

Decap CMS Contentrain
金額 ✅ 完全無料 無料プランあり
（１プロジェクトまで）
導入しやすさ 自分で設定が必要 ✅ ログインとGitの連携のみ
エディタ やや物足りない ✅ 使いやすい
ファイル管理 ✅ あり なし
（v2.0で導入予定）
下書き保存 なし なし
（設定でmain以外のブランチを指定可能）
多言語対応 ✅ 可能
（ymlでの設定が必要）		 ✅ 可能
投稿後のファイル ファイルに合わせた対応が必要 ✅ ほぼ既存と同じ
その他気になった点 ファイルが二重に保存されていた
ymlでの多言語の設定がやや複雑		 後から編集不可の項目が多い
（画像の保存先, 投稿ファイルの保存先,
作業するブランチなど）

エディタの使い心地は個人の好みもありますが、編集体験ファーストをうたっているだけありContentrainの書き心地やモダンなUIは好印象でした。

個人的には既存の構造をあまり変えることなく利用できそうなContentrainのほうが良い印象でしたが、後から編集不可な項目を設定時に教えてほしいなと思いました（2〜3度やり直しをしたところで心が折れました）。

Discussion