How to get started with Gatsby

So, you're thinking about using Gatsby? When working with React, Gatsby is a good choice if you want to create a static website, a portfolio or a website that pulls content from a CMS.It comes with a whole ecosystem of available plugins suited for all kinds of different needs.

But as a beginner, it's easy to get lost in the plethora of options that Gatsby provides. Combined with the fact that a lot of tutorials and plugins are based on older versions of Gatsby, it can lead to a lot of hair pulling moments before you can even really get started. In this article I will share my findings and mistakes I could've avoided as a starting web developer in the hopes that it might help a fellow junior, excited to start a project with Gatsby.

Deciding if Gatsby is right for your project

This one speaks for itself, but I feel like it should be said either way. I wanted to create a project in React that created pages for me based on repetitive content, for this purpose, Gatsby was perfect. Next.js was also a possibility but based on all the different plugins and options Gatsby provided it was the better option in my case. So do your research and make sure you make the optimal choice for your project, look at what Gatsby offers in plugins beforehand.

Choose the right starter

Gatsby has a whole library of starter projects which give you a base to start with a structure and plugins you might need for a specific project. For each starter there are demo's and Github repo's for you to explore, so even if you use the basic Gatsby starter, you might find some inspiration there. Some are made by the devs at Gatsby, some are starters that are created by other developers. You can filter these by use, for example blog, e-commerce, ... But you can also find starters with a CMS you want use. For my content I wanted to use Contentful, and if I had used a starter from the beginning it would've saved me a lot of time. Another thing to consider when using a starter is to filter by version, because there are quite a few differences between versions.

Learning about Graphql

Gatsby uses Graphql for it's queries out of the box, and it's also used to generate pages from templates. To use my project as an example, I needed pages created for every entry I had on Contentful and for this I needed Graphql. I jumped in before really getting to know the basics about Graphql. At the start I didn't how much Graphql would be involved, especially with a headless CMS like Contentful. Realize that you might need to have a basic understanding of Graphql before diving into your project in order for it to go smoothly. Graphql is a very powerful tool once you understand how to use it.

Check plugin versions, and versions on official documentation

When Gatsby was updated from v2 to v3, there were a lot of changes. That means that a lot of plugins either don't work with the newer version or there are other plugins available for v3. I found that some official docs are not always updated and it's important to check these thing before you install the packages. There are also different plugins available that offer the same functionality, check out your options before your projects is full of packages installed that you end up not using.

So let's recap

Gatsby is a powerful React based site generator that when used right, it does a lot of the heavy lifting for you. I had a lot of issues in the beginning that wouldn't have taken up so much time had known these things before I started. This brought a lot frustration. A lot of these tips are obvious for the expert developer, but as a beginner are not the first things you thinking about when diving head first into a personal project. Once I knew this things, working with Gatsby was a lot less effort and frustration, and I look forward to creating a new project with Gatsby and my new found knowledge. I hope you are too!