Thoughts on Switching to Gatsby from Jekyll

Contents

• Introduction
• What about Jekyll?
• Why did I make the switch?
• Enter Gatsby
• Clean and Minimal
• Deployment
• Performance
• Summary

Introduction

I recently made the switch to Gatsby as my framework of choice for building this website (and now, blog). Gatsby is a Static Site Generator framework that uses Javascript and React under the hood. I use markdown to write the content in the website, and Gatsby automatically con

If you don't know what static site generators are, I encourage you to read about them briefly. In summary, static site generators allow you to code up your website using the frameworks of your choice, and then create static HTML pages, along with JS and CSS files for you to deploy your website to a hosting service. For the cases where the complex full-stack systems of dynamic websites are not required, static websites offer optimised performance, better security, and blazing fast speed. A case can be made that static site generators are now mature enough to handle complex backends and content management systems to build complex applications that include the benefits mentioned above.

What about Jekyll?

Jekyll is another static site generator that uses Ruby under the hood. The previous version of this website was built using Jekyll. You can check it out on the wayback machine here (snapshot from July 2019).

Jekyll is absolutely perfect for simple static sites (think, a one page resume or portfolio) and even for blogs. Like Gatsby, you can write your content in Markdown and Jekyll will convert it to static pages at build time. My website was deployed for free on Github Pages and linked to my custom domain.

Why did I make the switch?

Jekyll was more than enough for my needs, until I needed to optimise the performance of my website even further, or experiment with different designs. I noticed that the first paint of my website was a bit slow, the JS scripts were blocking (i.e. they loaded first before the content) and the same was true for the CSS.

I worked around these issues after a lot of research. For example, I extracted the critical CSS - the style sheets required for the initial load. While this served me well, the thought of doing similar things when I wanted to add new stuff to the website was a lot for me to stomach. My final lighthouse score for the website was still a commendable 97.

Enter Gatsby

Even though Gatsby existed when I deployed the initial version of my website, it was not a mature framework and had limited community support. There was also the roadblock of using React. Knowledge of React is required if you wanted to customise the your website beyond what the started themes offered. Mind you, there are some free amazing themes on offer from Gatsby.

After taking a course on React from Udacity, making the switch to Gatsby was a perfect opportunity to start using my new skills. You don't need to be an expert to start changing some of the themes and UI components to your liking.

Gatsby offered to solve most of my qualms with Jekyll, and then some. Auto optimisation of JS and CSS, intelligent page rendering, image optimisation, and magnificent SEO. These are some of the advantages offered by Gatsby and its plugins. It has an awesome community that continues to build new plugins and support existing ones to keep things at the bleeding edge. Taking the plunge was an easy decision.

With on and off development, it took me around a couple years to complete the switch. The project was not a priority for me. It doesn't have to take you this much time to build a website, or blog, using Gatsby.

Clean and Minimal

I prefer my website to have a minimalist look with a focus on content. In the Minimal Blog starter, I found the perfect base to build on. Shoutout to Lennart for the amazing Gatsby themes!

All of the UI components are built using React, and with theme shadowing it is easy to change components in the original theme without impacting the unrelated parts.

A nice use case for React components was building the Project Cards in the portfolio section of the website.

The cards pick up the summary and links directly from the frontmatter of markdown files for each project.

Example Markdown File:

Copycopy code to clipboard
1---
2cardImage: "segment-header.jpg"
3date: 05.02.2017
4description: Analyzing customer spending data using Unsupervised Learning techniques for discovering internal structure, patterns and knowledge.
5layout: notebook
6externalType: Github
7externalUrl: https://github.com/sajal2692/data-science-portfolio/blob/master/customer_segments/customer_segments.ipynb
8highlighted: true
9skills: Python, Scikit-learn, PCA, Clustering
10slug: /portfolio/customer_segments
11title: Creating Customer Segments using Unsupervised Machine Learning
12---
13
14## Introduction
15
16In this project, we will analyze a dataset containing data on various...

Gatsby uses GraphQL to 'query" markdown files in your filesystem (or other data sources). Bending GraphQL to my will was a bit of a hassle, and probably had more to do with this being my first exposure of such a technology.

With similar changes to other types of content (portfolio pages and blog posts), and a host of theme configurations, I was done!

Deployment

I use Gatsby Cloud to host my website right now. It is connected to my master branch of my Github repo. A merge to master kicks off the build and deploy functions of Gatsby cloud to make sure everything is a-ok before publishing the latest version of my website. The service is free for websites with limited traffic and optimises sites built with Gatsby further, so it suits my need for now.

You don't need to be limited to Gatsby Cloud for your hosting needs. Gatsby offers support and documentation for a ton of hosting providers. I imagine that you can deploy the built static website on cloud buckets like Amazon S3 just as easily.

Performance

Now for the best part:

These were the Google Lighthouse scores for the mobile version of my webpage, without any explicit optimisation done by me. I simply configured the plugins supplied with the minimal theme starter to my liking.

The page was indexed in a few hours by Google, and my website shows up on the first page for searches of "Sajal Sharma".

The website is blazing fast to use, with pages loading almost instantly. Though your mileage may vary depending on the internet resources at your disposal.

I have a set framework for adding UI components, or pages or blog posts now. My only focus for the coming months and years will be to add meaningful content to this website.

Summary

Using a static site generator provides you with cheap (or completely free) options to build a blazing fast website or blog, with a low profile of security vulnerability. There are a lot of static site generators available today on different programming languages.

You can also pick a framework based on your familiarity a programming language. If you are more familiar with Ruby, than with JS - then by all means use Jekyll. If you use Go, take a look at Hugo!

Jekyll is a great framework to start with, and still my recommended option for beginners. If you want to be on the bleeding edge, a framework like Gatsby can provide what you want - barring the initial learning curve.