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,
          },
        ],
      },
    ],
  },
});

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