Empowering Teams with Gatsby ↘

Louis Novick
Development

Congratulations! You’ve found yourself on our brand new website. Pretty cool, huh? Under the hood, we’re using a modern framework for creating websites called Gatsby. Gatsby is a tool for building static sites with a modern toolset. While I wouldn’t call myself an evangelist, I have certainly benefited from many of the features Gatsby provides and am excited to share some of my favorites.  

Building Static Sites

If you want to build a site in the simplest way possible, what do you do? You grab a few HTML files, string them together, and bring them to life with some styles and interaction. Where to host these files? Anywhere. Database requirements? None. Chances are this site will be lightning fast too. This is the heart of the static site experience: simplicity and speed. 

There are countless tools in existence that build upon the idea of static site development and add their own flavor to the static site paradigm. For example, tools like Jekyll and Hugo utilize markdown files with front matter to provide data you might need in your templates. Both tools come with command line helpers, build pipelines, theme options, and the ability to define functions, variables, and other familiar constructs you’d expect in any framework. What you get when you put all these features together are robust “content compilers” that make it very easy for the savvy author/developer to publish, maintain, and deploy just about any kind of website they want.  

However, these tools aren’t always good enough. Sometimes you need the flexibility to pull data from multiple sources and integrate with third-party APIs to curate your content. You want all the benefits of a static site, but you also want to leverage the benefits of using a modern library like React to build your views. This is where Gatsby comes in.

Discovering Gatsby

“I heard Gatsby is good.”

I first heard about it at React Orlando, a meetup we help host, over 2 years ago. (You can keep an eye out for upcoming React events here.)

To be honest, a lot of decisions I make when it comes to which tools to explore start with what I’ve heard about at meetups, in podcasts, or by talking to other developers.

What Exactly is Gatsby?

To quote the Gatsby website, “Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps.” 

Gatsby combines your React components and the data you want at build time to generate a static PWA (Progressive Web App.) This means offline functionality, code splitting, pre-fetching, and many other features out of the box, batteries included. There are so many things to talk about that I probably won’t be able to cover them all in this article. If you’re interested in learning more, I recommend checking out the website

Show Me the Data

One of the main requirements for this site was it needed to be easily managed and editable by our content team. Historically, we have used WordPress as our CMS (content management system) of choice and while we’ve always been open to other options, WordPress usually cuts the mustard. Gatsby’s approach to data helped us build a solution that fulfilled this requirement. Using GraphQL in conjunction with plugins available in Gatsby’s generous ecosystem, we were able to pull data from WordPress while taking full advantage of the benefits that developing in React gives you. Everything from the custom post types we define ourselves to the SEO metadata for each page could be edited within WordPress by the team without developer intervention. Using the power of these queries with other Gatsby plugins created some magical moments. One great example of this is the Gatsby sharp plugin which enables you to query your images at any size and quality. This makes it easy to serve image source sets with retina ready options. As someone who hadn’t used GraphQL extensively before this project, I can say that aside from some common pitfalls, it makes it trivial to grab the data you want at any given time. 

Developer Experience

I believe that putting developer experience at the forefront of any new project is one of the key ingredients to building successful products. In a lot of ways, Gatsby does this the same way that working in a modern stack does. Working with React allows you to separate your logic and presentation into reusable components, building blocks that make up your UI. Using libraries like Styled Components, you can encapsulate your styles, avoiding common CSS pitfalls as a site grows in size. Gatsby ships with its own baked-in Webpack config, compiling your components on the fly and making iteration on what you’re building quick and painless. 

How It All Comes Together

Being so feature-filled does introduce a lot of complexity. Even though the docs are very good and provide plenty of examples, it can be a little overwhelming when first starting to use it. Take it slow and be patient. Once you get used to the tooling and overcome some minor quirks, you’ll find a great degree of flexibility and power to build whatever you want and empower your teams to make it their own.