Tina CMS

Astro JS with Tina CMS

How to Integration with tina cms for astro js project

Installation Tina CMS

TinaCMS can be added to your Astro site locally , makes it easy for you to update your website, For first you need to install cms on your astro project, run this command

npx @tinacms/cli@latest init

Run locally

Next you can test tina cms with run npx tinacms dev -c "npm run dev"

Backend admin

And you can access your admin panel on localhost:4321/admin/index.html

Then you need - Click on edit mode.

No need for login credentials because we work tina cms on premises.

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 post, your services article, image gallery and video gallery.

Configuration Note

Note: You must configure tina cms and integration with your article collection for tina cms to be used properly.

If you need our help for tina cms integration with your astro project, you can hire our team developer services. https://www.fiverr.com/creativitas/convert-your-figma-and-ui-design-to-flatfile-cms-or-ssg

Tina Cloud

What is next ?? You can deploy astro CMS in the cloud, using tina API. For first you need to push your project in to your github repo. read here how to push your astro project in to github repo →

Sign Up

Sign up and Create an account on tina cms.

Create Project

You can click - Create new project

Connect with Github

Next you can click custom project, and import from your github repo.

Select Github Repo

You can select your repo project. - and click select

Enter URL Website

Next you need to insert your website url for auth.

Copy The ID

Now you need to copy the app project id and paste on your tina cms configuration.

Copy Token ID

Next you can click on token , then copy your token id and paste on your tina cms configuration.

Build .env Files

Now you can run npx @tinacms/cli init backend for build .env files.

Note: by develope .env files, make sure your github repo is private and not public.

Okay,After you have insert your remote tinacms data, now you can configuration your build command, from npm run build to be npx tinamcs build && npm run build

Redeploy your project.

Edit Your Site

After all , now you can click on overview - then edit your site.

Troubleshoot

If you have max memory limit or failed for production build - Tina cms - Failed: build exceeded memory limit and was terminated

So how to solved it ??

• Set your node your enviroment variables NODE_OPTIONS="--max-old-space-size=8192" and try to redploy again.
• If you have error again , so back prod command from npx tinacms build && npm run build to be npm run build