How This Blog is Made

How This Blog is Made

This blog started as a way to share my thoughts and ideas, and as a way to learn GatsbyJS and publish it under my own name. Behind that link is a concise comparison of Gatsby against typical website setups, in case you are thinking about starting your own blog. Next I will explain the motivation behind my tech choices, and then go over the actual setup for this blog.

Medium is Not a Public Square

Medium provides an absolutely dreadful user experience. If you open a Medium article on mobile, more than half of your screen real estate will be covered by pop-ups. Why are you asking me to subscribe to an author before I’ve even had a chance to glimpse at their article? No I don’t want to get notifications, why would anybody want those from a blogging site? No I don’t agree to your user tracking, even though you only have an “agree” button as pseudo-GDPR-compliance. I just came here to read an article, can I just do that?

Yes, Medium, I’m aware I’m using up my “free” articles quota. When those are gone, I’ll find my way around your paywall.

Just Say No (To Wordpress)

To be fair, if you just want to write, Wordpress is not a bad choice. You can self-host. You can tinker a bit. If you want to tinker a lot, it’s much easier to just create your own website. My main issue with CMS’s like Wordpress or Ghost is that while you theoretically own your own content, it’s going to be in a format which will be difficult to move to another platform. Sure you can theoretically do it, and Gatsby actually has source plugins for Wordpress and Ghost, but in practice you won’t move. You’ll be stuck with the limitations of the Wordpress monolith. Not to mention that Wordpress just feels like old Web. When you create your website by yourself instead of using a platform, you won’t really have limitations other than the ones imposed by your own tech choices, which you can always change.

Why This Blog is Statically Generated

GatsbyJS is a static web site generator. This means that my blog is generated into HTML, JS, and CSS at build time. Meaning I don’t have costly server dynamically generating pages (I’m talking dollars and time). The main advantages of a static site generator are:

  • Hosting the blog costs nothing at providers like Netlify or Surge.
  • Improve loading times to most places on earth because assets can be delivered by CDN (instead of a single server in a single location, you have many servers in many locations and any request is routed to the nearest one).
  • No server maintenance is required.

I write my blog posts in Markdown. It’s really easy to format and my content will not be married to any platform. For example, if I want to ditch Gatsby in the future and create my own static site generator, I can do that knowing that transforming Markdown isn’t going to give me too much trouble.

Why GatsbyJS Specifically?

There are many static web site generators out there. I didn’t do much of a comparison. I like that Gatsby is made with React. Their developer community seems active and friendly. But the main thing that attracted me to Gatsby was its promise of delivering performance out of the box. If you have any non-trivial website and you want good performance, there’s a lot of optimizations required. The kinds of things that need to be taken into consideration before any code is even written. The idea that a framework can do those optimizations for me is really appealing. Gatsby isn’t perfect. It’s opinionated and rigid on how certain things must be done. But despite its faults, I’m pretty happy with the performance and behavior of this site:

  • The website is visible and functional after only 1 round trip and ~20kB of data.
  • Internal links are prefetched on hover, meaning subsequent pages load almost instantly.
  • Autogenerated burred-up image placeholders are stylized to create a smooth look and transition as the image loads (yes I know, just like Medium).
  • Also works for users who have JS disabled. A static version of the website is generated, which is rendered on first load, and then the page is loaded with React (for users who have JS).

Gatsby has grown significantly in the short few months I’ve used it, and I’m excited to see where it goes in the future.