New Blog Front End Using GatsbyJS

📅November 14, 2018

If you visit this site often, you might have noticed a layout change this week. I rebuilt the front end of my blog in ReactJS and GatsbyJS. I’ve been wanting to rebuild the front end of the site for a while now, and I didn’t want to start a new project in PHP and try to shoe horn in ReactJS, which is my JavaScript front end library of choice. GatsbyJS was the solution I settled on. The blog now (as of writing this) consists of static files instead of rendering a PHP page every time. I’m going to write more about the entire process. Not all of it was smooth, but I really like the performance and product that this stack has provided so far.

To give you an overview of the tech stack.

WordPress is the CMS. I use the same WordPress install I had before, but I’m now using it only as a CMS. The REST API feeds the data into Gatsby.
GraphQL is the querying language that Gatsby uses to interface with the WordPress API. It’s pretty fresh at the moment. I found it easy to pick up in a basic, functioning sense. I have yet to set it up or do difficult queries.
ReactJS is used to create pages and components for the site. I have a lot to say about React in general, but I’ll save that for other topics. To me, using React in this context of generating static pages made it look like React is an evolved form of HTML.
GatsbyJS does A LOT. In short it takes your data with React pages, templates, and components then generates HTML/CSS/JS files for upload to a hosting platform. It also creates service workers and creates “blazing fast” sites. The speed bump alone is worth considering for a WordPress site. Not to mention it gets you out of PHP world.

There are a few downsides, since it’s a static site generator, it takes several minutes for a new build of this site, which is ~80 pages. I do not frequently update the blog, so this isn’t an issue here.

You could also build client-side apps and have dynamic data updated via AJAX calls, so the “static” part of the static site isn’t quite that rigid. You just can’t have a server render pages.