Gatsbyでライブ編集機能付きCMSを構築できるツール「TinaCMS」

◆ TinaCMS
https://tinacms.org

紹介

「TinaCMS」は、GatsbyおよびNext.jsサイトでつくるCMS構築ツールです。一般的なCMSと異なり、リアルタイムにコンテンツを編集できる機能が特徴です。

なお、こちらオープンソースで提供されています。
https://github.com/tinacms/tinacms

$ git clone git@github.com:tinacms/tinacms.git
Cloning into 'tinacms'...

・・・

Resolving deltas: 100% (12405/12405), done.

まずは、TinaCMSをダウンロードします。

cd tinacms

$ npm install && npm run bootstrap

・・・

   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │      New minor version of npm available! 6.11.3 → 6.12.0       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.12.0   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

続いてnpmインストールと

$ npm run build

> root@ build /xxx/xxx/tinacms

・・・

lerna success - react-dismissible
lerna success - react-tinacms
lerna success - tinacms

ビルドを実行。

cd packages/demo-gatsby

$ npm run start

・・・・

——————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————
6 pages                                                     Success                                                    demo-gatsby

最後に、出来たdemo-gatsbyを実行し、http://localhost:8000/ にアクセスします。

このようなブログサイトが表示されたら成功です。「A new Gatsby starter for Tina」に進んでみます。

早速、サイト編集を試してみます。

Start Editingを押して編集中にします。

すると、コンテンツ部分にメタ編集機能が表示され

このようにカスタマイズが容易に行えます。

またメニュースライドでは、コンテンツの配置や画像のアップロードなど細かい編集も可能です。

Bootstrapと比べ、ダイレクトにコンテンツを編集できる機能にパワフルさを感じます。

◆ TinaCMS
https://tinacms.org