Why did I give up using Gatsby for my blog?

#it #javascript #gatsby #11ty

I was rewriting my blog multiple times. Honestly, at least once a year. It's stupid, I know, but that's a topic for a separate article.

The important fact here is that I have been using Gatsby for the last two years.

Why I like Gatsby _

More than two years ago, I decided to use React as a primary javascript library. No more Angular, no more Vue. I will be doing all new projects in React.

I was using Hugo as my blog generator. I liked it because of the speed. I didn't like the template engine, assets management and so on. I wanted to use something that I am used to and use every day. I found Gatsby.

I like Gatsby because of the large community. I can use React, Typescript, CSSinJS, Material UI, MDX, etc. Gatsby/React has a huge number of libraries and plugins that speed up the development. This is what I like.

I even created my theme, AXII - A Gatsby blog theme. It's available on Github and NPM. It's not perfect and I would like to improve a million things there, but it works.

Why I decided to stop using Gatsby _

It's a small blog. I have four pages and about 150 articles. All articles are written in markdown.

I decided to use Material UI. It's the best React UI library in my opinion. I could write my CSS from scratch but I am lazy and I preferred to use something ready and well tested. I have created Material UI components for MDX. I also decided to use Algolia to provide a search engine for my blog posts.

What is the process of generating a static website for my blog? When the Gatsby starts the build process, it fetches all the data (MDX) to feed GraphQL service. I can get the data using GraphQL to create static pages.

The problem is that it doesn't just generate HTML and CSS. It generates a javascript application, quite a large application.

Do I need to use MDX instead of markdown? Do I need to create MDX components? Do I need GraphQL? Do I need the entire javascript engine to convert markdown to HTML? Do I need my search? Do I have time to constantly develop a theme that no one uses?

I know I can use markdown instead of MDX, I can remove Algolia and I don't need Material UI but... it was fun to use all those things and I liked it but...

Overengineering _

My blog has become more complex than some of the projects I have done in the past. React, Gatsby, MDX, Algolia, Conventional Commits, Husky, Lerna, Typescript, Material UI, CSSinJS, dozens of Gatsby plugins. At one time, I even had to add Sentry to track JS errors.

The main goal was to generate HTML from markdown and create a simple and readable blog. Somewhere along the way I got lost. It is not only and exclusively related to Gatsby. I could cut down on the amount of libraries I use, but it's not just about that.

Build time _

I don't like the build time. Netlify shows 6m 46s. I know that many things are done during this time, including generating multiple image sizes and data indexing in Algolia, but it's still a lot of time. I could use an additional plugin (cache) to speed up the build process but it is extra work. I could use Gatsby Cloud but sometimes I need more than 100 edits per month and paying $19 to speed up the build time is not something I would like to pay.

Page size _

Another thing I don't like is the page size: 687KB. It's a single article with three images (lazy loading). A lot of requests, a lot of files, a lot of data. Just to display simple text and three images.

Gatsby - page size

Performance _

Next issue. I'm a developer. I care about performance. These aren't the worst stats I've ever seen, but still only text and photos.

Gatsby - performance

I'm not the only one with this problem, look at this github issue.

What I use now _

I decided to use 11ty. Why? It's simple and I can still use javascript. A small configuration file, SCSS, Nunjuck templates and the blog is ready.

It is important that the 11ty is not the only solution here. I decided to use it because I like how it works. I could use a different solution (Hugo, Pelican, Jekyll, even NextJS). The point is to use the easiest solution to generate HTML and CSS files without unnecessary javascript.

I know my blog looks different now. I like simple and readable websites. I don't need awesome layouts. Text with good typography is enough and that's what I need to display blog posts.

The difference in build time _

11ty generates the entire blog in 13 seconds. I have to confess something. I don't generate multiple image sizes like when building a blog with Gatsby. I decided to use imgix service. I also removed Algolia search. It's a bit of a cheat.

The difference in page size _

Look at this. These statistics are for the same article that I tested with Gatsby.

11ty - page size

It takes 34KB instead of 687KB. The current page displays the same content as previously. The only difference is the navigation (I have got two links less now) and the footer (I removed the social icons).

The difference in performance _

11ty - performance

Perfect result without effort!

Do I like the current setup? _

Yes... and no. I like the simplicity, speed, the page size an performance. There are things I don't like. I would like to use JSX instead of Nunjucks/HTML, CSSinJS instead of SCSS and Typescript. I could probably use it somehow... but it's not worth it. It's a simple page and the current setup is more than enough.

Will I ever use Gatsby again? _

I think so. It's not that I don't like Gatsby. It just isn't for everything. Sometimes a simple solution is enough. If I need to build a large project with different data sources, I will think about Gatsby again.