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
Top comments (3)
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.
Hi May, sorry I don't understand what you mean. What do you want me to do? :)
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.