Why I rebuilt my blog with Eleventy
There are already common templating languages such as Pug, Handlebars and Mustache, but they’re often used with servers like Express, and there aren’t a ton of places to host a server for free with no downtime/cold starts. I’m sure there’s a way to prerender a site using Express with one of the template languages above and some Markdown files, it doesn’t seem to be a very common solution.
Hence I began my SSG exploration! I tried Hugo and Eleventy. Hugo because it is touted as the most performant solution. Eleventy because it has gathered a lot of traction despite being quite new, and is currently powering web.dev, A11y Project and eslint.org, organisations that care a lot about best practices (which I assume to mean that Eleventy does conform to their definition of best practices).
My limited experience with Hugo was quite confusing. I tried and retried a couple of starter templates but felt stuck trying to understand Hugo’s
config.toml and templating syntax, as well as working out a development process with asset compilation in the theme folder and Hugo’s own site generation process. Overall my takeaway was that It’s hard to customise a Hugo site, especially with limited Go experience. Since I do want to be able to customise freely, and didn’t want to spend too much time trying to figure out Go, I decided to not pursue Hugo for now (though I’m pretty sure I’ll revisit it someday).
And there we have it, why I ended up rebuilding this blog with Eleventy. Appreciate the very supportive Eleventy community on Discord who have helped me with my questions. Eleventy isn’t perfect, but it’s pretty good at its job right now and it’s still improving. I look forward to how much more awesome it will be when V1 is launched! 😍
I use Alpine.js as a replacement for Vue.js on this blog. I’ve not mixed Alpine components with Nunjucks macros yet, but I do foresee possible issues with code duplication when declaring Alpine components with the Alpine Data syntax. Will have to explore further on this.
P.S. It was pretty exciting to get a 100 Lighthouse score on mobile, not surprising since Eleventy itself doesn’t inject any scripts, and Eleventy Img handles image processing so well. Thankfully Alpine.js and the Tailwind CSS (with PurgeCSS) have minimal impact on the site’s load time.