Tina CMS

Astro JS with Tina CMS

How to integrate Tina CMS with your Astro JS project. Tina CMS is a Git-based CMS with visual editing — you can see changes as you type, and content stays in your repository.

This guide covers local setup, cloud deployment, and troubleshooting.

---

Installation — Tina CMS

Tina CMS can be added to your Astro site locally, making it easy to update your website. First, install the CMS on your Astro project:

npx @tinacms/cli@latest init

Run Locally

Test Tina CMS locally with:

npx tinacms dev -c "npm run dev"

Backend Admin

Access your admin panel at:

localhost:4321/admin/index.html

Then click on Edit Mode.

No login credentials needed when working with Tina CMS locally.

Dashboard Area

Once you access it, you can see all your blog posts and pages ready to be updated in Tina CMS.

Update Article

You can quickly update blog posts, service articles, image galleries, and video galleries.

Configuration Note

You must configure Tina CMS and integrate it with your article collection for Tina CMS to be used properly.

If you need help integrating Tina CMS with your Astro project, you can hire our team developer services.

👉 Order Tina CMS Setup on Fiverr

---

Tina Cloud

What’s next? You can deploy your Astro CMS in the cloud using the Tina API. First, push your project to your GitHub repo. Read how to push your Astro project to GitHub →.

Sign Up

Sign up and create an account on Tina Cloud.

Create Project

Click Create new project.

Connect with GitHub

Click Custom project, then Import from GitHub repo.

Select GitHub Repo

Select your repo project, then click Select.

Enter URL Website

Insert your website URL for auth.

Copy the ID

Copy the app project ID and paste it into your Tina CMS configuration.

Copy Token ID

Click Token, then copy your token ID and paste it into your Tina CMS configuration.

Build .env Files

Now run:

npx @tinacms/cli init backend

This builds the .env files.

Note: When developing .env files, make sure your GitHub repo is private, not public.

After you have inserted your remote Tina CMS data, update your build command from:

npm run build

to:

npx tinacms build && npm run build

Then redeploy your project.

Edit Your Site

After all is set up, click Overview, then Edit your site.

---

Troubleshoot

If you hit a max memory limit or your production build fails with:

Failed: build exceeded memory limit and was terminated

How to solve it:

1. Set your Node environment variable:

   NODE_OPTIONS="--max-old-space-size=8192"

   Then redeploy.

2. If the error persists, revert your production build command from:

   npx tinacms build && npm run build

   back to:

   npm run build

---

Need Help?

If you need Tina CMS integrated into your Astro project with full configuration, professional services are available.

👉 Order Tina CMS Setup on Fiverr