From Gatsby to 11ty

Well, I finally did it. I've moved this blog from Gatsby to 11ty. You probably won't notice any difference. That was my goal.

The catalyst was writing my last blog post. There are things that have stopped working in dev mode and they are getting harder to fix as the npm packages get older. Gatsby was woefully out of date and I figured that in the time it would take me to get everything upgraded, I could just start over with 11ty.

One of the main reasons I chose 11ty was its flexibility. Unlike Gatsby, which is heavily tied to React, 11ty allows you to use whatever templating language you prefer. I opted for Nunjucks, which I find intuitive and easy to work with because of my experience with Django. I was able to reuse all the markdown files from my old site without any changes except for one - I now use a shortcode to render images. I just wrote a script to update all the blog posts. I can continue to use this script to convert any markdown image references to the new shortcode.

Here is an example of the shortcode, this markdown:

[!Image Alt Text](./path/to/image.jpg) _Caption for Image_

becomes this shortcode:

{% responsiveImage "./path/to/image.jpg", "Image Alt Text",
"custom-class", 720, "Caption for Image" %}

The migration process wasn't without its challenges. I had to rewrite many React components as 11ty shortcodes as well as other scripts and tooling, which took some time. ChatGPT and Claude AI via Cody were helpful to do many of the basic tasks. However, this process allowed me to simplify my codebase significantly. I no longer needed complex state management or GraphQL queries - 11ty's data cascade system proved more than sufficient for my needs.

Another significant improvement was the build time. With Gatsby, my site would take several minutes to build, even for small changes. Now, with 11ty, the entire site builds in seconds. This speed improvement has made the development process much more enjoyable and efficient.

In terms of performance, the switch to 11ty has resulted in a leaner, faster site - especially while building locally. I really liked the effect of loading vector images as SVGs and I have re-created that effect in 11ty. This is the slowest process as far as build times go, but I have set up a caching mechanism to mitigate this issue when building locally.

One major update to the blog that I did in the process was to create scripts to generate the data from my "Uses" page. Now I have scripts that will read all the applications and CLI tools that I have installed on my Mac and generate a data file that 11ty will use to generate the page. I can now just run this script whenever I want to update the page. As a bonus, to make things even easier for me, I have integrated it with my OpenAI account to use AI to get the URL and app description.

Overall, while Gatsby served me well for a time, I'm thrilled with the move to 11ty. Its simplicity, speed, and flexibility align perfectly with my needs as a blogger and developer. If you're considering a similar move, I highly recommend giving 11ty a try. The learning curve is gentle, and the benefits are substantial.

If you are interested in migrating your site from Gatsby to 11ty, I'm happy to help. Feel free to reach out to me with any questions you may have.