New Gatsby Tutorial: Learn How To Create Source Plugins

I have exciting news to share: A new tutorial for Creating a Source Plugin from scratch is available now!

Why did we need a new tutorial?

As explained in Gatsby is joining Netlify, Gatsby is the go-to framework for large, content-rich websites. Gatsby’s data layer is one of the key features and an enabler for composable architectures. One of the key driving forces of Gatsby since its beginning has been its 800+ source plugins. These plugins make it easy to connect and source from every data source you could imagine.

While our documentation always had a guide on how to create a source plugin, the content was dense and at times difficult to follow. It didn’t show how easy it is to create a barebones source plugin and how many additional features you could add. We wanted to make it easier for users and customers alike to create their own source plugins.

Therefore, I’ve spent a couple of months authoring a completely new tutorial, explaining everything step-by-step.

What you’ll learn

The Creating a Source Plugin tutorial is split up into multiple parts. You’ll learn how to create a Gatsby source plugin that follows best practices and uses Gatsby’s latest features. The tutorial is intended to be an additive guide, with each part building on the last. However, after part 2, you’ll already have a functioning source plugin. Each part in the guide explains individual concepts, so you can revisit each section when you’re ready to implement new features into your source plugin.

The tutorial has the following structure:

1. Prerequisites: To get everyone on the same page, this part explains the basics of a source plugin, how the guide is structured, and what previous knowledge is expected. I recommend going through the main tutorial before following this one.
2. Project Setup: You’ll use a companion project to develop your plugin. This part familiarizes you with everything you’d need to know.
3. Create Nodes: The heart of a source plugin. Learn how to source data into Gatsby, create GraphQL nodes, and display them in a site.
4. Define GraphQL Schema: This is a deeper dive into Gatsby’s GraphQL data layer.
5. Utilities: There are many helper functions provided by Gatsby to build a source plugin, this part will give you an overview.
6. Incremental Builds: Explanations on how to best build your source/API and plugin to support fast builds.
7. Image CDN: Let your users defer image processing to the edge.
8. Advanced Topics: Collection of topics that didn’t fit into the flow of the tutorial but that are still worth a read.
9. Publishing: Learn how to publish your plugin to npm.
10. What’s Next: Additional learning resources and links.

What’s next?

Authoring this guide in a completely new structure will allow us to better update and add information in the future. We are working on new APIs and features to make it even easier to create and maintain source plugins. Once those updates are out, the tutorial will be updated!

In the meantime, I’d love to hear your feedback on the new tutorial. What do you like about it? What suggestions do you have for further improvements? Let me know! Every page has a “Was this doc helpful to you?” widget in the bottom right corner. You can also always contact me through Twitter or Mastodon.

Want to make the tutorial better? Head over to our contributing docs.