Moving from Jekyll to Gatsby

May 29, 2018

Documenting my decision to migrate my portfolio site from Jekyll to Gatsby.

For the past few months, I'd kinda been waffling back and forth between a few states - it seemed like I was overdue for a facelift, but the questions remained: Do I update my personal site? Is it worth it? Why do I need to update?

The truth is I didn't, but I was eager to try something new. As of this past week, I redesigned this site and migrated from Jekyll to Gatsby.js. I'll provide all context as to my decision and future plans for this site below:

A brief history of peterhironaka.com

I first purchased this domain back in 2009(?), and needless to say I've changed or updated the site a bunch of times. At a time I hosted a few static files and served the site directly from Dropbox, then I switched to Wordpress. Most recently, I moved to Jekyll, and managed all my content via Siteleaf, which is a great CMS Publishing tool for Jekyll sites. They have great customer support, the community is still growing, and building a customized site is relatively intuitive. If you have a good handle of building sites with Liquid templating, or have experience in Ruby, it's pretty intuitive.

Reasons for making a change

Choosing the right tech stack always involves a bit more thought than I typically anticipate right off the bat, even for a seemingly minimal straightforward site or web application. For a personal site I know a few things are for certain:

  • The only content that's not being generated by me would come through an API, which means a database isn't essential.
  • Performance is paramount (duh).
  • Content needs to be managed via some content management system, otherwise I'll make no real effort to update the site with any regularity.

To be clear, there's absolutely nothing wrong with Jekyll or Middleman or any other static site generators out there. They're all good in their own ways. The main reason I went with Gatsby was all the performance. Gatsby is opinionated in the sense that your starter files already get you to meet PWA specs right out of the box. It's great! Especially for us Android users. Here's a screengrab of my performance since moving to Gatsby:

lighthouse

This is "the future of the web": Javascript, APIs, and Markup: more commonly known as JAM stack. If you don't need a server or a database, then why use one? It only adds costs and developer time to your project. The goal of any web project should be to host content and distribute that content to its users as quickly as possible.

Picking my CMS

There are many different ways you can manage content these days, especially within the JAM stack. There's a way to still use Wordpress via their API w/Gatsby. Contentful was another great CMS solution I'd hear about. The only issue was its pricing tiers. While they do offer a free tier, you're obligated to placing their logo branding in the footer of your site. Next tier up was a few hundred bucks a month - no can do on my budget.

After reading through Gatsby's plugins they have listed on their site, I found Netlify's CMS and was instantly impressed with its out of the box functionality. Before I set it up with this site, I decided to follow along a Netlify CMS/Gatsby test tutorial I found on Github, which ended up being extremely useful. Once I figured out how add in my data points (blog posts, projects etc) to the CMS, it was pretty smooth sailing.

Closing

Really excited to keep this site updated with my latest projects as well as continuing to publish new blog posts. The next big test will be to implement different data type and eventually using this stack to build for client projects.