<h2 id="%E6%A6%82%E8%A6%81">
<a class="header-anchor-link" href="#%E6%A6%82%E8%A6%81" aria-hidden="true"></a> 概要</h2>
Next.js製のブログサイトに導入するCMSとして2種類のヘッドレスCMSを試してみた所感です。 
今回は導入しやすそうなGitベースのヘッドレスCMSで、「Decap CMS（旧Netlify CMS）」と「Contentrain」の2種を試しました。
<h2 id="%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%B8%BB%E3%81%AA%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF">
<a class="header-anchor-link" href="#%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%B8%BB%E3%81%AA%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF" aria-hidden="true"></a> 導入するサイトの主な技術スタック</h2>
<ul>
<li>フレームワーク: Next.js</li>
<li>ライブラリ: React, TypeScript</li>
<li>デプロイ: Vercel</li>
<li>投稿ファイル形式: markdown</li>
</ul>
<h2 id="git%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEcms%E3%82%92%E9%81%B8%E3%82%93%E3%81%A0%E7%90%86%E7%94%B1">
<a class="header-anchor-link" href="#git%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEcms%E3%82%92%E9%81%B8%E3%82%93%E3%81%A0%E7%90%86%E7%94%B1" aria-hidden="true"></a> GitベースのCMSを選んだ理由</h2>
<ul>
<li>現状markdownベースで記事のファイルを管理している</li>
<li>APIベースのヘッドレスCMSと比較して導入しやすそう 
（バックエンドやデータベースの設定が不要）</li>
<li>無料で使用できるものが多い</li>
</ul>
<h2 id="%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AEcms%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8C%E3%81%AEcms%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> それぞれのCMSについて</h2>
<h3 id="%F0%9F%91%89-decap-cms%EF%BC%88%E6%97%A7nexlify-cms%EF%BC%89">
<a class="header-anchor-link" href="#%F0%9F%91%89-decap-cms%EF%BC%88%E6%97%A7nexlify-cms%EF%BC%89" aria-hidden="true"></a> 👉 Decap CMS（旧Nexlify CMS）</h3>
<ul>
<li>オープンソースのCMS</li>
<li>React製のエディタ</li>
<li>旧Netlify CMSということもありNetlifyとの連携に強い</li>
</ul>
<iframe id="zenn-embedded__19759470a26a9" src="https://embed.zenn.studio/card#zenn-embedded__19759470a26a9" data-content="https%3A%2F%2Fdecapcms.org%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://decapcms.org/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://decapcms.org/</a>
エディタ 
<img src="https://storage.googleapis.com/zenn-user-upload/267203b46194-20240127.png" loading="lazy" class="md-img"> 
<a href="https://jamstack.org/headless-cms/decap-cms/" target="_blank" rel="nofollow noopener noreferrer">Jamstack</a> より引用
Collectionの設定 
<img src="https://storage.googleapis.com/zenn-user-upload/06e570a72b64-20240127.png" loading="lazy" class="md-img">
<h3 id="%F0%9F%91%89-contentrain">
<a class="header-anchor-link" href="#%F0%9F%91%89-contentrain" aria-hidden="true"></a> 👉 Contentrain</h3>
<ul>
<li>様々なJamstackなWebアプリケーションとの統合がスムーズ</li>
<li>開発者・コンテンツ編集体験ファーストな作り</li>
<li>現在Beta版で今夏v2.0リリース予定</li>
</ul>
<iframe id="zenn-embedded__f3a8004755ec3" src="https://embed.zenn.studio/card#zenn-embedded__f3a8004755ec3" data-content="https%3A%2F%2Fcontentrain.io%2F" frameborder="0" scrolling="no" loading="lazy"></iframe><a href="https://contentrain.io/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://contentrain.io/</a>
エディタ 
<img src="https://storage.googleapis.com/zenn-user-upload/2831fd731e86-20240127.png" loading="lazy" class="md-img">
Collectionの設定 
<img src="https://storage.googleapis.com/zenn-user-upload/38b2ca6eb0c3-20240127.png" loading="lazy" class="md-img">
<h2 id="%E5%B0%8E%E5%85%A5%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E5%B0%8E%E5%85%A5%E6%96%B9%E6%B3%95" aria-hidden="true"></a> 導入方法</h2>
導入はContentrainのほうが圧倒的に簡単です。 
ContentrainはダッシュボードがWebアプリケーションとして既にあるため、始めるのに必要なのはログインとGitとの連携のみです。
一方のDecap CMSはadmin用のページを表示するために一作業必要です。 
さらにNetlify以外にデプロイする場合はapiのエンドポイントの設定も自分で行う必要があります。
<h3 id="contentrain%E3%81%AE%E5%A0%B4%E5%90%88">
<a class="header-anchor-link" href="#contentrain%E3%81%AE%E5%A0%B4%E5%90%88" aria-hidden="true"></a> Contentrainの場合</h3>
<ol>
<li>
アカウントを作成 
<a href="https://contentrain.io/" target="_blank" rel="nofollow noopener noreferrer">トップページ</a>へアクセスして「Get Started」からアカウントを作成します。 
Google, GitHubアカウントでのログインも可能です。
</li>
<li>
プロジェクトを作成 
※ 既にあるプロジェクトに追加する場合はフレームワークは「カスタム」を選択
</li>
<li>
GitHubのリポジトリを選択 
ブランチ, markdownファイルを格納するフォルダのパス, 記事内の画像を格納するフォルダのパスを入力します。 
<img src="https://storage.googleapis.com/zenn-user-upload/75599408d376-20240127.png" loading="lazy" class="md-img">
</li>
</ol>
以上で設定は完了です 🎉
ブログの構造に合わせてCollectionを設定して投稿が始められます。 
ログインしてから投稿を作成するまで1時間もかかりませんでした。
<h3 id="decap-cms%E3%81%AE%E5%A0%B4%E5%90%88">
<a class="header-anchor-link" href="#decap-cms%E3%81%AE%E5%A0%B4%E5%90%88" aria-hidden="true"></a> Decap CMSの場合</h3>
<a href="https://decapcms.org/docs/start-with-a-template/" target="_blank" rel="nofollow noopener noreferrer">テンプレートを使用して新たなサイトとして作成する</a>方法と<a href="https://decapcms.org/docs/add-to-your-site/" target="_blank" rel="nofollow noopener noreferrer">既に運用中のサイトに追加する方法</a>の2種類あります。
今回は運用中のサイトに追加するドキュメントに従って進めました。
<ol>
<li>/public に admin フォルダを作成</li>
<li>/public/admin に以下のファイルを作成</li>
</ol>
<div class="code-block-container"><pre><code>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
</code></pre></div><ol start="3">
<li>index.htmlを編集</li>
</ol>
<div class="code-block-container"><pre class="language-html"><code class="language-html">&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
 &lt;meta charset="utf-8" /&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
 &lt;meta name="robots" content="noindex" /&gt;
 &lt;title&gt;Content Manager&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;!-- Include the script that builds the page and powers Decap CMS --&gt;
 &lt;script src="https://unpkg.com/decap-cms@^3.0.0/dist/decap-cms.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>※ npmパッケージの使用も可能 
4. config.ymlを編集 
GitHubを使用する例です。
<div class="code-block-container"><pre class="language-yml"><code class="language-yml">backend:
 name: github
 repo: &lt;YOUR_REPOSITORY_NAME&gt;
 branch: master
 site_domain: your-domain.com
 base_url: https://your-domain.com/
 auth_endpoint: api/auth
 
# ここに画像の保存場所や多言語対応、Collectionなどを記述します。
</code></pre></div><ol start="5">
<li>エンドポイントの作成 
今回Vercelにデプロイをする必要があるため、<a href="https://ironeko.com/posts/how-to-install-netlify-cms-on-vercel#adding-your-environment-variables-to-vercel" target="_blank" rel="nofollow noopener noreferrer">How to install Netlify CMS on Vercel and Next.js</a>を参考に以下の作業をします。</li>
</ol>
<ul>
<li>GitHub で OAuthアプリを作成</li>
<li>Vercel に環境変数を登録</li>
<li>エンドポイント用のconfigファイルを作成</li>
<li>/pages/api/auth.js, /pages/api/callback.js を作成</li>
</ul>
<ol start="6">
<li>Vercelへデプロイする</li>
<li>管理画面にログインする 
<code>https://custom-domain.com/admin</code> へアクセスしてGitHubアカウントを認証します。</li>
</ol>
ダッシュボードが表示されたら設定は完了です 🎉
<h2 id="%E6%89%80%E6%84%9F">
<a class="header-anchor-link" href="#%E6%89%80%E6%84%9F" aria-hidden="true"></a> 所感</h2>
<h3 id="git%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEcms%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#git%E3%83%99%E3%83%BC%E3%82%B9%E3%81%AEcms%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> GitベースのCMSについて</h3>
✅ 比較的導入しやすい 
✅ ほぼ無料 
✅ markdownで投稿データを管理している場合は引き続き同じ方法で管理できる
🔺 Gitと連携しているため投稿を編集する度にビルドが走る 
（Contentrainに関してはCollectionなどの編集でもビルドが走る） 
ホスティング先で設定をすれば防げますが一手間発生するという点ではネガティブな要素です 
🔺 機能が物足りなくエディタやダッシュボードの挙動が不安定なことがある 
APIベースのCMSのほうが人気で成長力があるためか、機能が少なかったり挙動が不安定なところがいくつか目に付きました。
<h3 id="2%E7%A8%AE%E3%81%AEcms%E3%81%AE%E6%AF%94%E8%BC%83">
<a class="header-anchor-link" href="#2%E7%A8%AE%E3%81%AEcms%E3%81%AE%E6%AF%94%E8%BC%83" aria-hidden="true"></a> 2種のCMSの比較</h3>
<table>
<thead>
<tr>
<th></th>
<th>Decap CMS</th>
<th>Contentrain</th>
</tr>
</thead>
<tbody>
<tr>
<td>金額</td>
<td>✅ 完全無料</td>
<td>無料プランあり （１プロジェクトまで）</td>
</tr>
<tr>
<td>導入しやすさ</td>
<td>自分で設定が必要</td>
<td>✅ ログインとGitの連携のみ</td>
</tr>
<tr>
<td>エディタ</td>
<td>やや物足りない</td>
<td>✅ 使いやすい</td>
</tr>
<tr>
<td>ファイル管理</td>
<td>✅ あり</td>
<td>なし （v2.0で導入予定）</td>
</tr>
<tr>
<td>下書き保存</td>
<td>なし</td>
<td>なし （設定でmain以外のブランチを指定可能）</td>
</tr>
<tr>
<td>多言語対応</td>
<td>✅ 可能 （ymlでの設定が必要）</td>
<td>✅ 可能</td>
</tr>
<tr>
<td>投稿後のファイル</td>
<td>ファイルに合わせた対応が必要</td>
<td>✅ ほぼ既存と同じ</td>
</tr>
<tr>
<td>その他気になった点</td>
<td>ファイルが二重に保存されていた ymlでの多言語の設定がやや複雑</td>
<td>後から編集不可の項目が多い （画像の保存先, 投稿ファイルの保存先, 作業するブランチなど）</td>
</tr>
</tbody>
</table>
エディタの使い心地は個人の好みもありますが、編集体験ファーストをうたっているだけありContentrainの書き心地やモダンなUIは好印象でした。
個人的には既存の構造をあまり変えることなく利用できそうなContentrainのほうが良い印象でしたが、後から編集不可な項目を設定時に教えてほしいなと思いました（2〜3度やり直しをしたところで心が折れました）。

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

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

Discussion