DEV Community

Faith Morante
Faith Morante

Posted on

Setting up TinaCMS with Astro

The realm of web development is ever-evolving, and staying updated is key. Recently, I undertook the task of migrating from Gatsby/Netlify CMS to the innovative Astro/Tina CMS duo. The reasons? Astro's compelling performance promises and its flexibility to integrate with multiple JavaScript frameworks. Tina CMS stood out with its customizable blocks and intuitive drag-and-drop features.

Step-by-Step Migration Process:

Astro Installation:
Begin by setting up Astro following the official documentation. - https://docs.astro.build/en/install/auto/#1-run-the-setup-wizard

Tina CMS Integration:
Integrate Tina CMS with your Astro project using this guide. - https://tina.io/docs/frameworks/astro/

To avoid potential port conflicts with other ongoing projects, I adjusted the dev server script to:
"dev": "tinacms dev -c 'astro dev --port 8022'",

There will be a ready-made post in content/post folder.

Configuring Tina:
Configuration is critical for seamless integration. Navigate to tina/config.tsx for the setup. A sample configuration would look like:

// tina/config.{ts,js,tsx}
import { defineConfig } from "tinacms";

export default defineConfig({
  token: "get your token from Tina Cloud", // generated on app.tina.io
  clientId: "get your clientId from Tina Cloud", // generated on app.tina.io
  build: {
    publicFolder: "public", // The public asset folder for your framework
    outputFolder: "admin", // within the public folder
  },
  // See https://tina.io/docs/reference/schema/ for more information
  schema: {
    collections: [
      {
        label: "Blog Posts",
        name: "post",
        path: "content/posts",
        format: "md",
        fields: [
          {
            type: "string",
            label: "Title",
            name: "title",
          },
          {
            type: "rich-text",
            label: "Post Body",
            name: "body",
            isBody: true,
          },
        ],
      },
    ],
  },
});

Enter fullscreen mode Exit fullscreen mode

You should be able to see your admin panel in /{server-url}/admin/index.html. The index.html ending is important, as without having it will throw a 404.

Next in this series, I will cover how I converted my dev.to articles to markdown files to prepare them for showing in my blog.

In conclusion, the migration to Astro and Tina CMS has been a noteworthy step in optimizing and enhancing our web development process. I look forward to sharing further insights and learnings from this transition.

Cheers,
FM

Top comments (3)

Collapse
 
diomed profile image
May Kittens Devour Your Soul

hey Faith
would you be interested to modify this article here :
github.com/satnaing/astro-paper/bl...

into your post, since tina was one forestry.

Collapse
 
idiglove profile image
Faith Morante

Hi May, sorry I don't understand what you mean. What do you want me to do? :)

Collapse
 
diomed profile image
May Kittens Devour Your Soul

I'm just saying you could , if you choose so, make a PR that copies your current article into that template, since that temlate now shows how to set up something that actually changed into what you're talking about now.