The move to GatsbyJS - Part 1

Posted on June 23rd 2018

This is the first of many in a series in which I'd like to walk through how I moved off of my WordPress blog to a staticly generated website powered by GatsbyJS. To start though, I'd like to give a brief overview of why I'm doing it and how it was done.

The requirements

I had several things I wanted to accomplish in this move:

  1. Stop having to worry about keeping a WordPress installation up to date and secure.
  2. Cut down on my webhosting costs. I could lessen them with my current website, but I wanted to do better.
  3. Have a really fast website because I'm older and remember when websites were "better".
  4. Learn React and GraphQL. I manage teams of software engineers now and I should be more knowledgable about modern technologies if I'm to be in any way effective at my job.

With those requirements laid out, I quickly started putting all of the pieces together.

Hosting on Github

Staticly generated websites mean they compile down to HTML, CSS and Javascript so I don't need a webserver providing dynamic content anymore. I already pay for a basic GitHub account, and my code for this website was going to live there anyways, so why not leverage Github Pages?

Updated on 7/30/18 I've actually updated this site to no longer be hosted on Github Pages and instead am using S3 and Cloudfront. You can read all about it here 😊

GatsbyJS and React

For the past several years, I've primarily stuck to native application development, mostly Swift and a bit of Java, while also building out web applications primarily for their APIs. This meant my webdev skillset has been outdated overtime and React has taken over most of the modern tooling when it comes to building clients on the web. I figured it'd be a natural way for me to start figuring out what all the hubub is actually about and it really is quite nice.

UIKit

I also wanted an excuse to play around with a more modern CSS framework (one we too are also starting to use at Plated) to make my website lightweight while also responsive. It was fortunate that UIKit is currently beta-ing their v3 of their framework and it works great! That, paired with SASS, and I'm able to create my own theme on top of UIKit. I'm not too sure how I feel about styled-components just yet, but that'll probably be the next place I start delving deeper into.

Contentful as a free CMS

I merely found out about Contentful when browsing through various Gatsby starters. I simply signed up for a free acount, not really knowing what I was doing, and it clicked really quickly for me. I could "recreate" the fundamental models provided by WordPress and reuse it for this blog. It also really helped the gatsby-source-contentful works really, really, well.

Deploying

We've used CircleCI over at Plated for the past 3+ years, so I was already really familiar with how to set it up. I figured I could leverage its build and deployment jobs to make things more "automatic". It's also free for personal projects, so I mean, why not?

Putting it all together

I think I've gotten the build to deployment process down pat now. It looks like this:

  • I create my blog posts in my Contentful account with their respective properties (title, header image, slug, text and preview) and hit save/publish.
  • I run yarn dev locally in my Gatsby application.
  • The Gatsby Contentful plugin pulls down any new content from Contenful that my local machine hasn't seen yet and throws it into GraphQL.
  • Gatsby builds all of that content for development into my specified templates (blog posts, pages) and I'm ready to work.
  • When I feel good with whatever feature I'm building out, I push up my commits and open a PR in my Github repository to then be merged back into my master branch.
  • When new commits are found in master, CircleCI recognizes the changes, runs yarn generate, which compiles the entire website for production, copies it into a docs folder (for Github Pages), and commits it into master and pushes it back into the repository.
  • About one minute later after the Github Page's cache resets, my changes are now live on my website.
  • If I'm just adding or editing new content in Contentful and I don't want to have to push changes up via Git, I've created a webhook in Contentful that triggers rebuilds on CircleCI every time new content is published via the CMS.

There's a lot of detail I've left out in these steps, but I'm excited to keep working on this site and flushing everything else further.

I've made the repository running this website public. Please feel free to check it out.