Docs

Project Setup

Table of Contents

Prerequisites
Installing
Add the Plugin
Accessing the CMS

This guide will show you how to set up Tina on a Gatsby site. Since Gatsby lets you pull content in from multiple data sources, these docs will only cover adding to Tina to your site and creating forms for content stored in memory. This guide does not show you how to set up a backend, which would persist content changes.

The purpose of this is to get you familiar with the rudimentary steps of setting up Tina on a Gatsby site.

Prerequisites

To run all the tools required you need at least the following installed:

Node.js (8.0.0+)
Yarn (Optional. You can still use npm if you want, but this is for your own sanity.)

We're going to use the Gatsby Starter Blog as the base for our project. Create a new project by running the following commands in your terminal:

# If you don't have Gatsby CLI installed
yarn global add gatsby-cli
# Create a new starter blog
gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

This will create a new blog starter in the gatsby-starter-blog directory. Navigate to the project directory and run yarn dev to start the website in dev mode.

cd gatsby-starter-blog
gatsby develop

You will now be able to visit your site at https://localhost:8000

Installing

yarn add gatsby-plugin-tinacms styled-components

Add the Plugin

Open your gatsby-config.js file and add 'gatsby-plugin-tinacms' to the list of plugins:

gatsby-config.js

module.exports = {
  // ...
  plugins: [
    {
      resolve: 'gatsby-plugin-tinacms',
      options: {
        // The CMS will be disabled on your production site
        enabled: process.env.NODE_ENV !== 'production',
        sidebar: true,
        plugins: [
          // We'll add some gatsby-tinacms plugins later
        ],
      },
    },
    // ...
  ],
}

Accessing the CMS

Restart the Gatsby development server

    gatsby develop

Visit your Website
Go to https://localhost:8000 to access your website.
Open the CMS
You will notice there's a pencil icon, this is the way you can toggle the Tina sidebar.

Hooray!