Manual Setup

Learn how to set up Tina on an existing Gatsby site.

After this guide, you will have installed and added the TinaCMS sidebar to your project. However, this won't make your content editable. Go to the next guide to learn how to make content editable.

Assumptions: This guide assumes you have the Gatsby CLI installed, Node & a package manager.

Note: Don't have a site yet? Refer to the quickstart page.


npm install --save gatsby-plugin-tinacms styled-components


yarn add gatsby-plugin-tinacms styled-components

Adding the Plugin

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


module.exports = {
  // ...
  plugins: [
      resolve: 'gatsby-plugin-tinacms',
      options: {
        sidebar: {
          hidden: process.env.NODE_ENV === "production",
          position: "displace",
        plugins: [
          // We'll add some Tinacms plugins in the next step.
    // ...

Accessing the CMS

  1. Start the Gatsby development server

    gatsby develop
  2. Visit your Website

    Go to https://localhost:8000 to access your website.

  3. Open the CMS

    You will notice there's a pencil icon, this is the way you can toggle the Tina sidebar.


If you see the icon and can open the editing sidebar, this means you've successfully installed & configured Tina. You will see a note that there is no editable content on the site yet. Follow the next steps to learn how to make content editable.