Site generating with the great GatsbyJS

Oct 01, 2017

When someone mentions static site generation many people think of Jekyll. I had heard some good things about it and noticed it would allow me to build a blog quite easily. I was eager to learn something new and get something up and running that was more than just my usual WordPress theme. I was on the verge of rebuilding my portfolio site until a certain Scott Tolinski released a video on GatsbyJS.

GatsbyJS is a static site generator, similar to Jekyll, however it is written using React and allows you to write your pages as React components! It is somewhat similar to create-react-app where almost all the scary Webpack config has been abstracted away from you and everything is setup ready to go, so you can get to the important stuff like…building the site! (If you are a fan of React and not convinced, the React website/docs were just released using Gatsby!)

This caught my attention for multiple reasons. I wanted to:

  • Be able to build a new site with a blog relatively quickly
  • Have a site that loads quickly/is performant
  • Learn some more React and JavaScript

Another reason I ended up going with Gatsby was the promise that your project could be connected to various APIs or even a CMS of your choice.

The magic of GraphQL and Gatsby Plugins

Originally, following Scott’s and the official Gatsby tutorial, I had it pulling my content from good ol’ Markdown files. Then I saw it… too good to be true, the mention of connecting it to WordPress… I have been writing WordPress themes for almost 2 years now, so this got me super excited. To have my back-end as WordPress (including ACF) and the front-end in React, I had found the perfect place to test my front-end abilities.

I was skeptical at first: would I have to parse large amounts of JSON to get the data I needed? I have never even interacted with the WordPress REST API, how will I query it?

The answer… GraphQL. Gatsby ships with it and through an npm install of a gatsby-source plugin of your choice and a tiny bit of a config, you can start querying in no time. I was amazed with how simple queries are using GraphQL. You look at them and you go “Huh, that’s it? Really?”. Gatsby even ships with an in-browser query tester so you can see exactly what data you are getting from your GraphQL queries. Wanna sort those blog posts by date? No problem, just add a flag.

Wrap up and future

In just a few weekends I managed to rebuild my portfolio site with the blog I wanted. I’d highly recommend Gatsby for anyone who has started getting acquainted with React. Before I started this project I didn’t know a lot about:

  • Static site generation
  • Creating a Progressive Web App (PWA) and what qualifies as one
  • React Router
  • GraphQL
  • WordPress REST API

Moving forward I’d like to extend the project to include pagination within the blog, use Styled Components and ensure the site scores a 90+ overall on Lighthouse (Google performance auditing tool)

tl;dr – Side projects are great and you can learn a lot from them. Stay in the loop and listen to others whether that be watching tutorials, listening to podcasts, following devs on twitter, reading articles on dev.to, blogs etc. #neverstoplearning

If you are like me, learn something, build something, even if it’s small, then write about it, then you’ll have a first blog post, just like this one 😀

Back to Blog