Starters and Themes Together

In the last post in this series, we converted the gatsby-starter-blog repo into a theme. We only made changes that were absolutely necessary so in this post we'll take a look at how starters and themes can play well together as we move the content in the theme out into a starter.

Our content is still locked in our theme, which isn't super useful to theme consumers unless they want to display the same content everywhere. Notably, in gatsby-config.js we have a filesystem source pointed at our theme's content/blog directory.

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `${__dirname}/content/blog`,
    name: `blog`,
  },
}

Removing the __dirname prefix causes the filesystem source to look in the user's site for the content/blog directory.

{
  resolve: `gatsby-source-filesystem`,
  options: {
    path: `content/blog`,
    name: `blog`,
  },
},

We'll move the content/blog directory from the theme into our starter my-blog.

mkdir my-blog/content
mv gatsby-theme-awesome-blog/content/blog my-blog/content

Now, if we use our my-blog starter we can see that the content a user is going to modify is included in the starter, while all of the configuration is in the theme. This is the key for how to decide what goes into a starter that uses a theme and what goes into the theme itself. Example content can go in a starter because it's likely to get deleted by the user, while default pages can go in the theme because they can be overridden by the user already.