Gatsby

created:7/29/2020

updated:2/21/2021

Below, we go over how to add a component-controls documentation site to new Gatsby projects, existing React projects, and existing Gatsby projects.

You can find a git repo and a live site.

New project

Create a new folder:

mkdir my-gatsby-project && cd my-gatsby-project

Initialize the project:

yarn init

Add Gatsby and its dependencies:

yarn add gatsby react react-dom

package.json

"scripts": {
    "build": "gatsby build",
    "start": "gatsby develop"
  },

The remaining steps are the same as for existing Gatsby projects.

Existing (non-Gatsby) React project

All you have to do is add Gatsby as a dependency:

yarn add gatsby

Then follow the steps for existing Gatsby projects.

Existing Gatsby project

Add component-controls theme

yarn add @component-controls/gatsby-theme-stories

Configure theme

Create a gatsby-config.js file in your project's home directory:

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: '@component-controls/gatsby-theme-stories',
      options: {
        configPath: '.config',
      },
    },
  ],
};

Create your documentation site

Check our create a documentation site tutorial

Getting started/Site generators/Nextjs

Tutorial