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