Personal blog (This website)

I always wanted to have a nice & clean portfolio website to share my work and thoughts.

I was looking for some inspiration, and stumbled upon jxnblk.com. The look and feel of the site was just what I wanted, and I didn't want to spend time writing styles wanted to focus on the content instead. So I decided to use its open source codebase as a starter repo for my own site.

This project used Gatsby JS. I had no idea what Gatsby is.

Gatsby is a framework based on React that helps developers build blazing fast websites and apps.

But wait, isn't React already a framework for building websites and apps? Why do we need something on top React? What does it mean by fast websites?

I had to find the answers. So I spent some hours learning what Gatsby is and when to use it.

Gatsby can be considered a replacement for create-react-app, but it does a lot more.

A traditional SPA is one large bundle of javascript that's loaded in your browser. That javascript then handles everything from rendering pages, dealing with state, handling routes and a lot more. All of this can take a toll on initial page loading times, and importantly SEO.

What Gatsby does is, it uses powerful pre-configuration to build only static files for faster page load times. It gives extra benefits such as code-splitting, optimized image loading, data pre-fetching and asset optimization. Even though Gatsby generates static files, Gatsby apps rehydrate from static HTML rendered by ReactDOM APIs into an app running client-side JavaScript.

It also has a large ecosystem of plugins and themes you can use to speed-up your development. I used the gatsby-plugin-mdx plugin to write blogs in markdown and create HTML pages from it a build time. Also used gatsby-plugin-theme-ui to help manage the styles that support multiple color modes. (Try clicking the button at the top-right corner.)

Gatsby also uses GraphQL, something I had only heard of. I ended up reading all about it, and experimented with it for quiet some time.

(I will probably write a separate blog to explain Gatsby in detail).