Creating a Gatsby Site

Branching out from Single Page Applications

When all you have is a hammer...

Professionally, I build Single Page Applications in React. This is pretty useful for building JavaScript-heavy, powerful analytics tools for internal users on high-speed networks and snappy new machines. So, when I felt it was time to build a personal website and own my own corner of the web, creating a SPA seemed like the logical move. It was what I knew best!

...every problem looks like a nail.

I imagine this was to the horror of my users. Users of my professional SPAs are cruising along on snappy machines on high speed networks, but my personal site users could be using anything from fiber connection to 3G on a budget smartphone. I needed something faster and more suited to the website's needs, because building an SPA for a static blog site is overkill.

Enter Gatsby, stage left

Gatsby is a fantastic framework for building content-heavy sites that are fast by design since your HTML is statically served instead of being generated by JavaScript at runtime. Gatsby has plenty of plugins and you can make your website as simple or as complicated as you want to, so when you build from the ground up you really get an understanding of what is required to make your site the standout website it should be.

Using Gatsby for my new personal site, I was easily able to cook up strategies for content hosting, dynamic page creation, and SEO (Search Engine Optimization), a crucial feature that had eluded me in my SPA past. I also saw minor yet scalable speed enhancements (my original SPA site had virtually no content, but the SPA strategy would have increased load times as I added content) and a 30% reduction in bytes sent over the network due to not shipping a giant JS bundle for the whole site to the client, instead just sending the page the user is requesting at that point in time.

Worth switching?

Do you like having performant websites with great community support and best-in-class DX? Gatsby is worth looking into, especially if you find yourself stuck in the industry SPA rut and are looking for a more specialized tool for less feature-heavy sites. I have noticed too many junior web developers are drinking from the firehose on heavy Single Page Applications without any concern for performance or whether or not an SPA is even the right move for what they are trying to build.

If that description reflects your current standing, consider this advice: Build a demo website (like this one!) to familiarize yourself with what Gatsby has to offer! As with most things in tech, its value will become clear as you start to get your hands dirty.

Last updated: August 28, 2020