Tina CMS & Astro

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

To get started, you’ll need an existing Astro project.

1. Run the following command to install Tina into your Astro project.

   npmpnpmYarn

   npx @tinacms/cli@latest init

   • When prompted for a Cloud ID, press Enter to skip. You’ll generate one later if you want to use Tina Cloud.
   • When prompted “What framework are you using”, choose Other.
   • When asked where public assets are stored, press Enter.

   After this has finished, you should now have a .tina folder in the root of your project and an admin folder in your public directory. It will also create a Markdown file at content/posts/hello-world.md.

2. Change the dev script in package.json:

   npmpnpmYarn

   {
       "scripts": {
           "dev": "astro dev",
           "dev": "tinacms dev -c 'astro dev'"
       }
   }

3. TinaCMS is now set up in local mode. Test this 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.

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

   For example, you can add a required “date posted” frontmatter property to our 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 Tina collections in the Tina docs.

5. In production, TinaCMS can commit changes directly to your GitHub repository. To set up TinaCMS for production, you can choose to use Tina Cloud or self-host the Tina Data Layer. You can read more about registering for Tina Cloud in the Tina Docs.

• TinaCMS Astro integration guide.

• Astro Tina Starter by Tom Bennet

More CMS guides