Gatsby.js Review

Gatsby.js has been getting a lot of hype in the frontend community and I have been itching to try it out. Recently, I discovered the domain for this site had not been autorenewed, and when looking at my personal site, I realized that I was never really satisfied with the way things turned out with Middleman. Since I wasn’t hosting on GitHub pages (they don't have HTTPS support for custom domains support for HTTPS was recently added), I didn’t have a good deployment proces and it was a pain to publish new content. Since Gatsby.js is billed as a "blazing-fast static site generator," it didn’t take long for me to decide to take Gatsby.js for a spin and port my blog over.

Architecture

The main reason for using Gatsby.js: Build static sides with technology I already know. Obviously this would only apply to those who use React.js regularly, but this is a huge win. In the past, I built my personal site with Jekyll and Middleman. As great as those technolgies are, I don't use ERB or Liquid templates often so every time I wanted to update my site I had to re-learn and re-google to fill gaps in my knowledge. There may come a time where I don't do React.js on a daily basis, but using the same tech to build static sites as you use to build dynamic applications is a productivity saver--I didn't have to learn a new tech stack.

At a high level, Gatsby takes your content, whether it be on the file system, in a CMS like Wordpress, or in any other 3rd party datasource, and generates a GraphQL API for all your site content. Then you build your site with normal React and GraphQL queries. Any Gatsby.js related code is mostly on the content generation side. It took 20 min of reading through the tutorial to see how straightforward it is and to have a good grasp of how the architecture worked.

Plugins

Part of the power in this approach is the pluggable architecture of Gatsby. There is a huge list of plugins that are dead simple to use and integrate. As part of this site update, I migrated my content to Contentful, a headless CMS. To get Gatsby to create content from Contentful, all I needed to do was add gatsby-source-contentful and fill in my API keys. BOOM! Gatsby pulled all my published Contentful content into the GraphQL API!

When using the built in GraphiQL tool (also setup for you by Gatsby), I noticed the body field of all my blog posts was in Markdown. So I started thinking of how to parse the Markdown in my posts to display on the page. Again, it turned out adding gatsby-transformer-remark magically added a new field, childMarkdownRemark, with the HTML output. It felt too easy.

Conclusion

My overall experience with Gatsby.js reminded me of this tweet:

Gatsby feels like one of those applications of React. Building a static site with tech normally used for dynamic applications is a great idea with a great developer experience.