How Does TinaCMS Work?
TinaCMS is a feature-rich and somewhat complex tool.
If you just want a docs solution, feel free to skip over this chapter. If you yearn for knowledge, read on….
The TinaCMS Frontend
The TinaCMS front-end is 2 fold:
- An editing portal that runs on the same port as your website, by default at the
/admin/index.htmlroute. - Your content model definition (we call it your schema) and other configuration… this control what fields you get when editing your website.
Figure: Access the content portal on the /admin/index.html route of your website
The TinaCMS Backend
The TinaCMS Backend is your GraphQL content API.
Think of this as a database and server that indexes your flat Git files for efficient fetching and exposes the endpoints.
Figure: Data moves from GitHub to your website via the TinaCMS Backend
This set-up can be achieved with TinaCloud – a paid offering from the TinaCMS team, or by using your own database.
During local development, a local version of the server is running that allows for the same editing experience offline.
Learn More About TinaCMS
This kit won't go deep into TinaCMS other than basic usage – their docs have more info.
Some useful links are highlighted below…
The Beginner Series
There's a series of intro tutorials called the Beginner Series that teach you to integrate a website with the CMS, giving you a full website builder feature set (dragging blocks around a page, live previews and click to edit functionality).
Usage Docs
Some useful reference docs include…
- What is markdown vs mdx and what is the supported markdown spec
- Setup guide for AI powered auto-translations and internationalization (if useful for your project)
- Media options, including repo-based (Git) media and external media stores