Migrating to Gatsbyjs from Jekyll

A brief history of my blog:

• September 2005: I started my blog on blogspot. I believe the address was infomofo.blogspot.com. At this time it was mostly some weird observations to share with friends, and screenshots of tv shows I was watching. I don’t really think I had any tech plans or goals for the blog other than just playing with the tools out there.
• September 2005: I quickly got frustrated with the limitations of the blogspot platform and moved my content to blogsome, a free WordPress host. Over time I added features like a delicious tag cloud. During this phase most of my interactions with my friends’ blogs and even my own were through RSS aggregators like Google Reader.
• 2016: I had stopped blogging regularly in 2009, but in 2016 I decided to migrate my blog off of wordpress and onto a subdomain of my vanity domain infomofo.com and in the process I figured I would try playing around with Jekyll. In the meantime I also got very into blogging my personal recipe experiments and started Food I Made, a personal recipe blog I also created in Jekyll.

What I liked about Jekyll

I liked the idea of building a static site- building each component of a jekyll site gave me complete control over the experience without the db backing of a wordpress site. I was mostly interested in a free-hosted site that could be really fast and have all the expressive capabilities of a wordpress blog.

I wasn’t too concerned with the lack of interactivity features like comments as generally most of the comments I received were spam.

Why I decided to move to GatsbyJS

I liked Jekyll but updates were quite limiting. It largely uses a custom liquid syntax that was very niche- outside of jekyll and shopify it wasn’t widely used, so extending it or finding good documentation on it was quite difficult.

I also was having a lot of trouble keeping the Jekyll build chain working. Whenever I upgraded versions of MacOS, or other dependencies on my machine, I had issues with the various ruby dependencies staying functional.

What I like about GatsbyJS so far

Gatsby’s toolchain seems much more robust than Jekyll’s. I really like the build speed and the out-of-the-box page speed improvements like progressive image loading. Though it is younger than Jekyll, the framework seems to have a lot of modern world-class plugins that provide new functionalities out of the box.

I also like that the organization allows for modern component styling, so that blog posts can be organized along with the images they reference, rather than organized separately.

Lastly, I like that the toolchain uses modern standards like React and graphql. Since I will be experimenting so much with the framework I love that in the process I will be deepening my understanding of useful modern technologies that I will hopefully be able to apply in other areas of my work.

Migration steps

The actual process of migrating from a jekyll blog to Gatsby was really easy.

Jekyll already has transformers for interacting with markdown files with frontmatter. I was able to create a starter blog using the gatsby-starter-blog starter, and then migrate all of my jekyll blog posts directly into the path content/blog. One or two of the posts didn’t translate perfectly and had to require tweaking but for the most part I haven’t had to do too much else to customize the blog to work for me.

Next steps

I am hoping that migrating to gatsby allows me to blog more regularly. In the process of setting up the gatsby blog I’m also trying other relatively new technologies that I haven’t had time to play with like Github Actions.

If all this goes well, I’ll probably be updating my food blog to follow!

Written by Will who lives and works in New York. You should follow him on Twitter.