Gitを利用してブログ・サイトのバージョンを管理できる開発者向けのヘッドレスCMS「TinaCMS」を使ってみた

「CMS(Contents Management System)」はブログやサイトのコンテンツを簡単に管理するためのツールで、代表的な製品としてはWordPressが挙げられます。TinaCMSはそうしたCMSの一つですが、バックエンド側のやりとりに特化した「ヘッドレス」なCMSとのことなので、実際に使ってどんなものなのか確かめてみました。

The Markdown CMS | Tina
https://tina.io/

TinaCMSの構造はこんな感じ。赤枠部分がTinaCMSの本体で、TinaCMSのデータベースはGitリポジトリと同期しています。フロントエンド側にはAPIが公開されており、ページのデータを読み出したり書き込んだりすることができるようになっています。書き込みが行われた際には自動でコミットが生成され、バージョンを管理することが可能です。

ページのデータはマークダウンやJSONなどの形式でGitリポジトリに保存されるわけですが、直接Gitリポジトリにアクセスするのではなく、間にデータベースを配置することで検索、ページネーション、Markdownファイル間の参照などの機能を実現しているとのこと。Gitリポジトリに元のデータが保存されているため、TinaCMSにロックインされずにすむというメリットがあります。

というわけで、実際にTinaCMSを利用してみます。Node.jsのインストールが必要なので、下記のURLから手元の環境に合ったインストール方法を選択してください。

パッケージマネージャを利用した Node.js のインストール | Node.js
https://nodejs.org/en/download/package-manager

今回はDebianを利用するため、下記のコードでNode.jsのバージョン管理ツール「n」を経由してインストールしました。

curl -fsSL https://raw.githubusercontent.com/tj/n/master/bin/n | bash -s lts

そして下記のコマンドでTinaCMSをインストール。

npx create-tina-app@latest

インストール時にいくつか設定を行います。今回はパッケージマネージャーを「NPM」、プロジェクト名を「my-tina-app」とし、TinaCMSの動作を確認するためのスターターコードは「Bare bones starter」を利用しました。

インストールが完了すると下図の通り実行するべきコードが表示されるので、表示の通りに実行して「http://localhost:3000」にアクセスします。

アクセスするとこんな感じ。TinaCMSはあくまでバックエンド側の機能がメインのため、簡素な表示となっています。

「Posts」ページにアクセスし、「HelloWorld」をクリック。

すると個別の記事のデータを確認可能です。TinaCMSのAPIから下図のようにタイトルや本文などのデータが取得できるので、あとは好きなフロントエンドフレームワークを利用してこのデータを表示すればOK。

「Bare bones starter」では「/admin/index.html」にアクセスすることでページの編集を試すことができます。

今回のTinaCMSはGitHubなどと連携しないローカルモードで動作しており、データを変更した際にはローカルのファイルシステムへ保存されるとのこと。「Enter Edit Mode」をクリックします。

トップページの編集画面はこんな感じ。こうした編集画面を作成してデータをTinaCMSのAPIに渡せば自動でGitリポジトリに保存され、バージョン管理してくれるというわけです。