Learn Gatsby - Plugins & Themes

#Introduction

One reason Gatsby is so productive is its vast ecosystem of plugins and themes. Instead of writing features from scratch, you install battle-tested packages and configure them to fit your needs.

Episode 7 breaks down how plugins work, the install-and-configure pattern with options, the concept of themes as reusable bundles of plugins, and why plugin ordering matters for your build output.

#Understanding the Plugin Ecosystem

#Types of Plugins

Gatsby plugins fall into three main categories:

• Source plugins: pull data in, for example gatsby-source-filesystem and gatsby-source-contentful.
• Transformer plugins: transform data formats, for example gatsby-transformer-remark and gatsby-transformer-sharp.
• Functional plugins: add features, for example gatsby-plugin-image, gatsby-plugin-sitemap, and gatsby-plugin-offline.

Thousands of plugins are available in the official Gatsby Plugin Library. Before writing code yourself, always check whether the plugin you need already exists — this habit saves hours of work.

#Installing and Configuring Plugins

#Installing a Plugin

Installation is just like any regular npm package:

npm install gatsby-plugin-sitemap gatsby-plugin-robots-txt

#Two Ways to Register

Plugins can be registered as a simple string or as an object with options:

Plugins with and without options

module.exports = {
  plugins: [
    "gatsby-plugin-image",
    {
      resolve: "gatsby-plugin-sitemap",
      options: {
        query: `
          {
            allSitePage {
              nodes {
                path
              }
            }
          }
        `,
      },
    },
  ],
}

The string form "gatsby-plugin-image" is equivalent to resolve without options. When a plugin needs settings, use an object with the resolve and options properties. The gatsby-plugin-sitemap above generates a sitemap.xml from the list of queried pages.

#Creating and Using Themes

#What Is a Gatsby Theme

A theme is a bundle of plugins, components, and data wrapped into a single reusable package. You can build your own theme and then use it like a regular plugin:

gatsby new theme-blog-gatsby https://github.com/gatsbyjs/gatsby-starter-theme-workspace

The theme-workspace starter provides two folders: the theme itself and an example site that uses it. This structure makes it easy to develop while seeing the results immediately.

#Using a Theme with Options

A theme is activated through the plugins array, and its options can be customized per usage:

Use a theme with options

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-blog",
      options: {
        basePath: "/blog",
        contentPath: "content/posts",
      },
    },
  ],
}

basePath: "/blog" determines the URL where the theme's content appears, and contentPath determines the folder where you write content. Theme users don't need to know the internal details — just configure the options.

#Why Themes Are Useful

Themes let a team or organization share design and functionality across projects. You can shadow theme files (override specific components) without rewriting everything — flexibility that's rare in other frameworks.

#Plugin Ordering and Performance

#Plugin Order in the Array

The order of plugins in the plugins array can affect the result. Two common rules of thumb:

• Manifest and offline plugins: list gatsby-plugin-manifest before gatsby-plugin-offline.
• Plugins that change things must come before plugins that read the result; transformers come after their relevant source.

If in doubt, follow each plugin's official install guide — the recommended order has been tested by the maintainers.

#Impact on Build Performance

Every plugin adds work during the build. Don't pile up plugins you don't use. Plugins with a large runtime can slow down the build and bloat the bundle; audit regularly which plugins are actually being used. gatsby build --verbose can help you see which processes are running.

#Conclusion

Episode 7 opened the door to the Gatsby ecosystem: plugin types, the install-and-configure pattern, creating and using themes, and best practices for plugin ordering.

Key takeaways:

• Plugins fall into source, transformer, and functional categories.
• Plugins can be registered as a string or an object with options.
• A theme is a reusable bundle of plugins and components.
• Theme options are customized per usage via basePath and contentPath.
• Plugin ordering matters; follow the official guides.
• Remove unused plugins to keep builds fast.

In the next episode, episode 8, we enter the workloads phase: configuration and environment — gatsby-config and gatsby-node, environment variables, source and transformer plugins, data schema customization, and managing secrets at build time.