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.


Web Mentions

𝙎𝙘𝙤𝙩𝙩 𝙎𝙥𝙚𝙣𝙘𝙚 👨‍💻

Yo dawg!

I heard you like starters in your themes...

Benjamin Lannon

Yeah. I am seeing the future of starters to include themes for chunks of sites rather than themes completely taking over

Dustin Schau

Ah - so they're a little more complementary than I expected. They'll make starters thinner and more focused on content.

Thanks!

Richard Nash

ok, kind of understand that idea...🧐

gotta dig into your posts further 🙂