How to get started with Gatsby themes

Gatsby is a static site generator in React. It uses React components, then serves static using GrapQL. Themes were recently introduced in Gatsby. Let us understand themes in Gatsby.

Why are Gatsby themes useful?

When you build your site in Gatsby, the content of the site and the layout/theme of the site are all in one place. You cannot reuse your layout and theme in another Gatsby site directly. Also, if you are using some Gatsby starter application, and built your site on it, then it is difficult to update the Gatsby starter application to a newer version.

So Gatsby themes are kind of plugins in Gatsby, which allow you to separate out the look and feel of Gatsby site and the content. This allows you to develop your theme independently, across many Gatsby sites.

In order to show the benefit of Gatsby's site truely, we are going to download two starter applications in Gatsby. One will be the Gatsby starter application, and another will be the Gatsby theme starter application. Both of these applications do the same thing, except that in the Gatsby theme starter application, the look and feel of the application are separated out.

How do you create a Gatsby theme?

There is nothing special about creating a Gatsby theme. You can just initialize an npm package, add Gatsby as a dependency, and you have your theme ready. It's just won't do anything. There are no special steps to create a Gatsby theme.

Normally, you would want to test your theme before publishing to npm repository. It would be helpful to create a setup, which you enable you to test the theme and develop the theme parallelly.

So you would find many tutorials, and even Gatsby theme workspace starter, which uses yarn workspaces. Yarn workspaces allow you to add a local dependency, and keep it synced. You will create two workspaces, one workspace to test your theme (workspace1), and another workspace(workspace2) to develop your theme. The workspace2 is added as dependency to workspace1.

Is Yarn workspace really required to create Gatsby theme?

No, yarn workspaces are not required. You can create your theme without it, although the process will be difficult and tiresome.

What are the steps to create Gatsby theme?

Simplest step is to clone the gatsby theme workspace starter. This starter will have the yarn workspace initialized.

How do you publish Gatsby theme?

Gatsby themes are created as npm packages. These npm packages can be published to the npm repository.

How do you consume a Gatsby theme?

Add the Gatsby theme npm package as a dependency to your Gatsby project. Then you need to add it in the plugin array in the gatsby-config.js file. In the below code, the gatsby-theme-minimal is the theme name.

gatsby-config.js file

module.exports = {
  plugins: [{ 
      resolve: `gatsby-theme-minimal`, 
      options: {} 
  }],
}

package.json file

"dependencies": {
    "gatsby": "^2.13.45",
    "gatsby-theme-minimal": "^1.0.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }