You Should Seriously Build Your Next Site With Gatsby

Gatsby is a static site generator that lets you write React and gives you back a lightning-fast static site.

It's the only way I build any type of website that doesn't have data that gets updated more than every 30 minutes or so (hint: that's the vast majority of sites). Even if you do have frequent data updates, there's really nothing keeping you from using Gatsby + APIs to take advantage of delivering as much of your site as you can as a static site.

Seriously, look at this Lighthouse audit for reports.embarccollective.com, a site for which I spent exactly 0 seconds thinking about optimzation:

reports embarc audit

The developer experience is incredible, the community is strong, and having the larger React community to lean on is a huge help as well. I've built several different sites with it, and it has excelled in every use case. Here are some of the other great tools I've used in conjunction with Gatsby to solve pretty much all of my web dev problems.

Contentful + Gatsby = my favorite CMS experience

Contentful is a headless CMS that makes modeling and managing your content very easy. With Gatsby, you simply install and configure an npm module (gatsby-source-contentful), and then you can write graphql queries to access your content. As if that isn't enough, you can also set up Contentful to trigger a site build whenever you publish new content. If that isn't enough for you, you can also set up content previews in Contentful to see a preview of the content you're working on in the context of your site.

Netlify + Gatsby = painless deployment & hosting

Netlify lets you build and deploy your site without getting in the way of your existing workflow. You could probably get a new site up and running in two minutes, and that would include getting it to deploy whenever you push to your master branch. You can also set it up to deploy your site when you publish new content on your CMS. Want a branch that triggers a preview build for your final QA testing? Netlify can do that. Want to run an A/B test? Netlify can direct a portion of your visitors to a build based on a specific branch. Netlify also provides easy (and free up to a point) functions, form handling, identity management, and more. In my opinion it's one of the greatest tools for anyone looking to get their site up and running quickly to test the demand for a new product.

Other things you can do with Gatsby:

  • Need to build a blazing fast e-commerce site? Flamingo (Harry's female shaving brand) is built with Gatsby. They wrote about their experience here
  • Would you like to connect to an API you've built? I wrote a custom source plugin to connect Gatsby with Embarc Collective's jobs API in about five minutes, which let us build tampabaystartupjobs.com on Gatsby.
  • Do you want interactive data visualizations? Embarc Collective's reports site integrates with both Plot.ly and D3.js (granted, that's more of a React thing than a Gatsby thing, but it goes to show the variety of things you can do)

In Summary

Give Gatsby a shot if you haven't already. Their tutorial is one of the best examples of developer onboarding out there. Try it for your next side-project or microsite. Make the web a faster place.