GatsbyJS: The Next Step in Static Site Generation

When I began my internship with Alembic 5 weeks ago I figured I would be playing ball within a known court. TypeScript? No problems, I know JavaScript it would just take a little adjusting of the brains. Elixir? I knew enough of Elixir to know that I would enjoy learning it. GraphQL? Piece of cake, makes more sense to me than REST.

But GatsbyJS?

What the hell was Gatsby? Outside of a fictional reference and a South African street food I had never heard the term being used. Little did I know I would be spending the good part of my internship (and now my employment) delving into it's secrets. And I have to tell you, I fell in love with it really quickly.

Oh heart don't fail me now

GatsbyJS is a JavaScript framework geared towards the creation of static sites. Traditionally, static sites were HTML driven, and when you wanted to change the data contained on the site, you would have to change the HTML. Gatsby allows you to create a static site using React components. What does that mean? It means you get to programmatically generate content using all the power of React components, such as props and hooks. But even more than that, you can pull data into your components using GraphQL.

But even MORE than that - and this, for me, is the pièce de résistance - you can create content using Markdown or MDX, link it up to a default layout and node creator, and Gatsby will generate the pages for you using GraphQL calls.


This, what you are reading currently, is in an MDX file sitting somewhere snug in our filesystem and being delivered to you courtesy of GraphQL. No longer need we sift through the riff raff of HTML tags and badly indented code (you know who you are!), Gatsby allows us to smugly retain distance from the forest, and throw seeds of content into the thicket. And Markdown isn't the limit. Gatsby will parse XML, CSV, Excel files, YAML, JSON, PDF....the list goes on. Whatever format your data is in, Gatsby has a plugin to handle it.

And it's fast. Blazingly fast. Page loading is instant. Just like what you would expect from a static site. And the Gatsby eco-system is modular, allowing you to easily add functionality via the use of plugins. And if you can't find the functionality you want...make a plugin for it. Gatsby allows you to do that.

To manage content, the options are numerous. You can connect it to any CMS such as Wordpress or go headless such as Contentful. But what I like to do, and what we have chosen here at Alembic, is to use Github as your CMS. Using Netlify you can take advantage of their continuous deployment by linking it to your Github repository. Every time you make a change to a file and push it up without errors, Netlify will automatically update your hosted website. Combine that, with the ability to use Markdown, and you will never need a CMS again.

So why use it over something like WordPress? Language barriers aside, the biggest thing about Gatsby is the ability to leverage React and GraphQL. With this combination you push the boundaries of what it means for a site to be static. You get the speed of a static site with the scalability of a Web App. Using React's component system and GraphQL's structured queries gives you the power to pull in massive amounts of data and programmatically generate static content quickly and beautifully.

It's powerful. And fun! Gatsby brings the joy back into website development. It's complex enough to be challenging but fluid enough (as long as you stick to the Gatsby conventions) to allow a certain flow in how you create your web site. It at times blurs the line between what it means for a site to be static or dynamic, but it does so in a way that makes complete sense.

Check it out. This could be the framework you are looking for.