Oct 29, 2023 22:15:00

I tried using 'TinaCMS', a headless CMS for developers that can manage versions of blogs and sites using Git

'CMS (Contents Management System)' is a tool that allows you to easily manage the content of blogs and sites, and WordPress is a typical product. TinaCMS is one such CMS, but it is said to be a 'headless' CMS that specializes in back-end interactions, so I decided to actually use it and see what it is like.

The Markdown CMS | Tina

https://tina.io/

The structure of TinaCMS is like this. The red frame is the main body of TinaCMS, and the TinaCMS database is synchronized with the Git repository. An API is exposed on the front end side, allowing you to read and write page data. A commit is automatically generated when writing is performed, and versions can be managed.

Page data is stored in a Git repository in a format such as Markdown or JSON, but rather than directly accessing the Git repository, a database is placed in between for searching, pagination, and referencing between Markdown files. It is said to have realized functions such as. Since the original data is stored in a Git repository, it has the advantage of not being locked into TinaCMS.

So, I will actually try using TinaCMS. You will need to install Node.js, so please select the installation method that suits your environment from the URL below.

Installing Node.js using a package manager | Node.js

https://nodejs.org/en/download/package-manager

This time, to use Debian, I installed it using the Node.js version control tool ' n ' using the code below.
[code]curl -fsSL https://raw.githubusercontent.com/tj/n/master/bin/n | bash -s lts[/code]

Then install TinaCMS using the command below.
[code]npx create-tina-app@latest[/code]

Configure some settings during installation. This time, I set the package manager to 'NPM', the project name to 'my-tina-app', and used ' Bare bones starter ' as the starter code to check the operation of TinaCMS.

When the installation is complete, the code to be executed will be displayed as shown below, so execute it as shown to access 'http://localhost:3000'.

It looks like this when you access it. TinaCMS mainly has back-end functions, so the display is simple.

Access the 'Posts' page and click 'Hello World'.

You can then check the data for individual articles. Data such as the title and body text can be obtained from the TinaCMS API as shown in the image below, so all you have to do is display this data using your favorite front-end framework.

In 'Bare bones starter', you can try editing the page by accessing '/admin/index.html'.

This time TinaCMS operates in local mode without linking with GitHub etc., and when data is changed, it is saved to the local file system. Click Enter Edit Mode.

The top page editing screen looks like this. If you create such an editing screen and pass the data to the TinaCMS API, it will be automatically saved in the Git repository and version controlled.