Migrate from Jekyll to Gatsby

Recently I migrated my site from Jekyll to Gatsby, here is why and what I learned.

A couple "Whys"

Jekyll is great, I learned it in the beginning of Feburary (This post). I know Ruby so it is an easy start for me, it worked out OK, a couple reasons I decided to migrate to Gatsby:

I don't like "Liquid"
This is the trigger. For those who doesn't know, Liquid, is a templating language to process templates. An easy example is such as

<h3>{{site.title}}</h3>

As you change the title in Jekyll config file, your site's title changes dynamically. For simple tasks Liquid is doing fine, however, for a bit more complicate case, for example

{% assign numberArray = "7, 5, 4, 1" %}
{{ numberArray | sort | join: "," }}

The problem I see is that trying to program Ruby inside html is not easy, but on the contrary, adding html in Javascript (React) is way easier.

Gatsby has awesome data feeding
Specifically I mean Graphql. I learned it when I was working for Facebook but I didn't realize it could be used to manage the site data and it does an awesome job to separate data from the UI part.
One example is adding tags. In Jekyll is relatively harder. I need to tell Jekyll what kind of tags to add and create templates for different posts with written code. In Gatsby it is straightforward:

Firstly to provide the data, with nice Graphql query built in support

query {
  allMarkdownRemark(limit: 2000) {
    group(field: frontmatter___tags) {
      fieldValue
      totalCount
    }
  }
}

then just pass the data to generate pages. All the tag data of a post stays with the post, no logic is needed in the code to render the page, as the filtering part is done by Graphql. Data is just data, it's the fact, no matter what, but code can change. Besides, with the graphql tool provide by Gatsby, you can easily view queried data and you know it will work if you see the same data.

One language rules them all

Any application that can be written in JavaScript, will eventually be written in JavaScript.

Yeah, it's arguably true or false but for creating a static site, it is 99% true. All you need is javascript, the last 1% is the embedded html. This part is sort an overlap of my first point. With javascript, sorting and joining string wil be in native javascript, much easier to read and write.

Also you don't need Ruby 100% this time.

What I Learned

First of all is that Gatsby is based on React and I learned more about javascript while developing with it. Compared with other languages that I know, javascript plays a very minor part. I'm pretty sure it will be very helpful sometime in the future when I construct a product. My work is usually hidden, as I work for infrastructure most of the time and I'd like to bring people with less technical background visibility, with javascript.

I also learned CSS modules. Now I understand why sometimes when I inspect the class name of an html element, it shows something like header-module--Header--1rC_P. I used to wondering "What's going on with the names?". Turned out such names are compiled and managed by using CSS modules.