Hello Gatsby!
This post is an introduction to Gatsby.js and some of its amazing features.
A few weeks ago I started building this website with Gatsby. In this post, I will explain what I’ve learned about Gatsby and my reasons for using it to build this website.
I’m no web development expert, just an amateur hobbyist. If you think something I’ve mentioned here or the code on my GitHub repo could be improved, please feel free to email me or open a PR. Now let’s get started.
What is Gatsby?
In essence, Gatsby is a React application.
Gatsby serves two broad use cases.
- First, it serves as a static site generator. Think Jekyll, a personal portfolio site, or a blog like this.
- Second, it serves to build dynamic web applications. Think Twitter or e-commerce sites i.e. websites that fetch dynamic data, support client-side JavaScript and authentication for example.
Gatsby is an excellent tool for both use cases.
Three reasons why Gatsby is appealing
- Gatsby specializes in making websites fast. Here, ‘fast’ refers to, fast for the developers to build and also fast in terms of performance for the end-user experience.
- Gatsby has a rich plugin ecosystem. Or in other words, it is possible to add features to your web app in a plug-and-play manner. A plugin is a Node.js package that implements the Gatsby APIs. For example, this website uses the markdown plugin to convert posts written in markdown into HTML. (If this doesn’t make sense to you, you are not alone. It took me some digging around to figure out the role of plugins.)
- Gatsby builds are quick to process. It uses optimizations to speed up the build and deploy process. The Gatsby website claims the build and deploy process is “2.5x faster than other static frameworks”. This is extremely cool! (Even though a light-weight personal website like this would see microscopic benefits in this regard- if any).
Why did I decide to use Gatsby for this website?
When I was scouring the internet for static site generators (in mid-2020) it quickly became clear that several smart arguments made the case in favor of Gatsby. I went down the Gatsby rabbit-hole for myself to see if the benefits of Gatsby for a simple static personal website justified the cost. The cost refers to the time/energy to learn- keeping in mind the aim of this website/blog is to write.
I decided to use Gatsby for three reasons.
- Hit the ground running with starters. Starters are boilerplate Gatsby sites. So I could pick a bare-bones template site and all I had to do was the styling/customization I wanted. This was important because I could focus on writing- and not get lost in the labyrinth of learning a new web development framework.
- Learn React as I go along. At several points in time, I have gone through the odd React app tutorial. This would end either in learning something basic I had forgotten or an overly ambitious project that never got close to completion. With Gatsby, I saw the opportunity to tinker with and deconstruct a React component at a time. Brownie points for the clear, easy-to-follow documentation and a hugely supportive community!
- Free personal website + blog I could have my very own place on this big old internet. I’d no longer need to depend on third-party platforms or be required to follow unnecessary guidelines to have my content published. And anyway the signal to noise ratio on these platforms is poor. Gatsby is an excellent open-source and very much a community-driven tool i.e. it’s free! And who doesn’t love high quality especially when it’s free?
This cost-benefit analysis suggests that the benefits kinda justify the cost.
TL;DR All this was to say two things. One, Gatsby is a great framework that lets you do important things fast. Second, this website of mine is now powered by Gatsby!
P.S. Did the thought of setting up your own website cross your mind? Or you don’t like something about your current website? If this is true, I hope my post makes you consider (if it has not convinced you) to change that with Gatsby.
Originally published at https://rhearodrigues.me.
