Introduction to “Learning Gatsby Themes” Series

In this series, I am documenting my journey in trying to understand, use, and make Gatsby Themes. In the next posts, I’m going to post code, thoughts, and other materials as I learn. Please note that these might not be polished, full-fledged content, but more of a “learning in public” nature.

What and Why

Gatsby themes work similarly to plugins, but at a new level of abstraction. They can add configuration to a project, implement pages, provide components, and set up data sources to query in GraphQL. — Gatsby Themes Introduction

Themes are an exciting—albeit still experimental—new feature introduced late last year. A theme is a reusable block of a Gatsby site that can be shared, extended, and customized (source). You can find a summary of the use cases and rationale in this post.

My first encounter with (the description of) themes was on the Themes Team Github page. The team were inviting new would-be contributors on Twitter and I expressed interest. Unfortunately I did not find anything in the issues and roadmap that suits my skill level at present, but it all sounded so fun I was instantly hooked!

I find Themes interesting because:

• Theming makes good use of modular, component-based, JAMstack architecture. Each theme solves a specific problem/need without restricting you to any particular structure, data source, or styling method that it’s not concerned with. A blog theme would add a blog to your site; component shadowing gives you the liberty to bring your own UI (CSS-in-JS? Sass? Import vanilla CSS? Your call!). Considering how devs on Twitter never seem to agree with each other about… most things, it’s good that we can start building without waiting to agree on everything! 😬
• This approach encourages creative customization and experimentation. In addition to making it easier to build multiple related sites (by abstracting away the common part and separating specific functionalities into themes) and add functionalities to a site, it also gives rise to projects like Digital Garden and Blocks.

However, I’m also slightly uncertain about themes because:

• I have not grokked the practical implementation of themes. I’m not sure about the best practices and the “correct” way of abstraction. For [use case X], should I put the site metadata in the site or in the theme? How much default config (or none) should be set in the main site?
• I’m not sure how much technical prowess is needed to take advantage of theming. Will it be way above my skill level? How easy/hard is it to learn in my spare time?

Well, the only way to start learning is by making something.

Resources

• Official Theme docs
• Official blog posts tagged “theme”

• Github issues and PRs

• Videos (talks and live coding)

  • Introducing Gatsby Themes (Chris Bicardi)
  • Build a Gatsby Theme With John Otander (Jason Lengstorf)
  • Gatsby and Themes The Future of Gatsby (Dustin Schau)

• Example repositories

  • jlengstorf/livestream-gatsby-themes
  • ChristopherBiscardi/gatsby-starter-theme
  • ChristopherBiscardi/gatsby-theme-examples
  • carbon-design-system/gatsby-theme-carbon

• Articles

  • Creating Your First Gatsby Theme by Alex Luong

Have other theme-related resources you’d like to share? Please share them in the comments!