Gatsby + TinaCMS Setup Guide

Introduction

TinaCMS can be added to your Gatsby site locally. In this doc, we'll guide through the local setup, as well as editing on your production site.

You can reference our TinaCMS Gatsby Starter for an example.

Getting Started

From within your site's directory, run:

This will ask you a few setup questions.

When prompted for the "public assets directory", enter: static.

If you are importing your site from Forestry.io CMS, some models & config will be auto-imported.

Workaround for GraphQL Mismatch issue

For Gatsby sites, you may run into the following error:

To work around this, add the following lines to your package.json file.

That way you can force the graphql version to be the one TinaCMS needs.

To be sure which version you need, you can run npm list graphql in your project folder

Allowing static /admin/index.html file in dev-mode

To make TinaCMS admin accessible in dev-mode, you will need to add the following code to your gatsby-node.ts file.

Model your content

To edit your site's content in TinaCMS, you can model your content in the tina/config.ts file.

Learn more about content modelling

Starting TinaCMS

You can start TinaCMS with:

gatsby developcan be replaced with your site's custom dev command.

With TinaCMS running, navigate to http://localhost:8000/admin/index.html

^ The above default port may differ depending on your framework.

Hint: One common error is caused by running gatsby clean after tinacms build. This causes your admin html file to be wiped out. For more common errors, please see the Common Errors page.

At this point, you should be able to see the TinaCMS admin, select a post, save changes, and see the changes persisted to your local markdown files.

Setting up Visual Editing (Optional)

If you want to power your pages with TinaCMS's API, you'll be able to leverage TinaCMS's visual editing features.

Read more about data fetching and visual editing.

Note: Visual Editing with Gatsby is considered experimental.

Next Steps

• Check out the content Modeling docs
• Learn how to query your content
• Deploy Your Site

See Also

• Astro setup guide - Using TinaCMS with Astro (our default starter)
• Next.js setup guide - Using TinaCMS with Next.js
• Visual Editing setup - Enable live preview editing