Tina CMS

Tina CMS is a Git-backed headless content management system.

Prerequisites

To follow this guide, you’ll need an existing Thulite site.

Setup

Run one of the following commands to initialize Tina in your Thulite project.
npx @tinacms/cli@latest init
pnpm dlx @tinacms/cli@latest init
yarn dlx @tinacms/cli@latest init
bunx @tinacms/cli@latest init
- When prompted for a Cloud ID, press Enter to skip. You can generate one later if you decide to use Tina Cloud.
- When prompted with “What framework are you using?”, choose Other.
- When asked where public assets are stored, press Enter.
After the command finishes, you should have a .tina folder in the project root and a generated hello-world.md file in content/posts.

Update the dev script in package.json:

{
  "scripts": {
    "dev": "tinacms dev -c \"hugo server --disableFastRender --noHTTPCache\""
  }
}

Tina CMS is now set up in local mode. Test it by running the dev script, then navigating to /admin/index.html#/collections/post.
Editing the “Hello, World!” post will update the content/posts/hello-world.md file in your project directory.

Set up your Tina collections by editing the schema.collections property in .tina/config.ts.

For example, you can add a required posted front matter field to posts:

import { defineConfig } from "tinacms";

// Your hosting provider likely exposes this as an environment variable
const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

export default defineConfig({
  branch,
  clientId: null, // Get this from tina.io
  token: null, // Get this from tina.io
  build: {
    outputFolder: "admin",
    publicFolder: "public",
  },
  media: {
    tina: {
      mediaRoot: "images",
      publicFolder: "public",
    },
  },
  schema: {
    collections: [
      {
        name: "posts",
        label: "Posts",
        path: "src/content/posts",
        format: 'mdx',
        fields: [
          {
            type: "string",
            name: "title",
            label: "Title",
            isTitle: true,
            required: true,
          },
          {
            type: "datetime",
            name: "posted",
            label: "Date Posted",
            required: true,
          },
          {
            type: "rich-text",
            name: "body",
            label: "Body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

Learn more about collections in the Tina docs.

In production, Tina CMS can commit changes directly to your GitHub repository. For production setup, you can use TinaCloud or self-host the Tina Data Layer.