Hugo VS eleventy 🕚⚡️

The site has been built with the Hugo static site generator since day one. Back in 2017, when I was originally building the site, I was a big fan of Hugo for its flexibility and speed. Hugo, which is built in Go, is known for extremely fast build times (for example, my 1200+ pages generate in about 7 seconds). This wasn't important when I built it, but it has been beneficial as the site grew large. And, while a lot has changed in the web development framework world since 2017, Hugo still does what I need it to.

The large differences in approaches and product features led us to rebuild the documentation for Camunda 8. C7 docs are hosted at docs.camunda.org; the version 8 documentation lives at docs.camunda.io. The two different sites are built with different tooling (Hugo vs Docusaurus).

In terms of GitHub stars, SSGs like Next.js, Hugo, Gatsby, Docusaurus, Nuxt.js, and Jekyll top the list. Some popular SSGs even host conferences and workshops, providing resources and networking opportunities for those looking to explore more advanced topics in depth.

After running my blog with Hugo hosted on Netlify for nearly a decade, I decided to migrate to a custom solution. I think I resisted the urge to rewrite my personal site for long enough and I deserve to have some fun. I am not going to find an excuse. I wanted to do this in Elixir. I wanted to build all the details of a static website from scratch once. It feels empowering to understand everything. And everything I learned along the way is generally useful Elixir knowledge. There are no concepts specific to a single static side generator.

I have migrated from Jekyll to Hugo for my own website, but the whole Hugo project is just weird. It took me like a year to migrate my simple website because of all the different paper cuts that drained my will to work on it.

You are only able to only use partials in HTML pages and shortcodes in Markdown pages. Why? They use 2 different syntax, so the best you can do is awkwardly wrap a partial in a shortcode. What's the point? They serve basically the same purpose.

Want to set up RSS? Oh yeah, for some reason by default it will not show full content in your feed reader, instead only a small extract with the only way to fix it is by making your own template[1]. But wait, why are we using RSS instead of Atom? Who knows, but if you want to use Atom, you have to use your template and insert some stuff to your config.

Also don't look at the bug tracker, that thing is frustrates me to no end.

You of course have the everyone's favourite Stalebot that you might have noticed in my previous link, but if you look at older issues, you will see the maintainer self-botting as a Stalebot[2][3] for some reason.

You will also see the maintainer moving issues between milestones for years with no end in sight[4].

Changelogs can sometimes feel a bit, odd too:

> but also a big shoutout to @dependabot[bot], […] for their ongoing contributions.

And commit messages sometimes are just… a bit too long[5] (it is truncated by GitHub, you can append .patch to see the full message).

Their documentation is awful to read too[6]. Oh and the templating engine? Yeah, not documented at all. Also the quick start guide will tell you to git clone some random theme, but I don't want my website to look like someone's, I want to write my own styles and have my own structure, but they don't really tell you anywhere how you should go about it. Because of it, I would search GitHub to sometimes find answers on how to do some stuff, but you would quickly find that most people had no idea how to actually use it. For example you can find a lot of people making opening and ending partials to have a common page layout instead of actually using the built-in Hugo layouts.

So why have I bothered switching? i18n support, so far out of all SSG I tried, Hugo does it in the least painful way.

[1]: https://github.com/gohugoio/hugo/issues/4071

[2]: https://github.com/gohugoio/hugo/issues/385#issuecomment-283...

[3]: https://github.com/gohugoio/hugo/issues/1035#issuecomment-28...

[4]: https://github.com/gohugoio/hugo/issues/448

[5]: https://github.com/gohugoio/hugo/commit/6dbde8d731f221b027c0...

[6]: https://news.ycombinator.com/item?id=30527884

That issue should have been closed. This was resolved in Hugo 112. https://github.com/gohugoio/hugo/releases/tag/v0.112.0

The fact that Hugo still doesn't play nicely with Tailwind 3 (2 years after T3 was released) is a real pain point.

I gave up on this ever being fixed quite a while back, but still check on the issue [1] every now and then. Seems like the only activity these days is bep bumping the milestone every month.

[1]: https://github.com/gohugoio/hugo/issues/8343

For creating a static site I recommend Hugo. In short this is because it is popular, well-supported, fast, and allows you to get up and running quickly with premade templates.

https://doublejosh.com/post/186193119278/metalsmithjs-is-sti...

Then two years ago I needed a more robust SSR system based on React, so I went with GatsbyJS. It's insanely mature and intuitive, but as we all know that community and business is now drying up too. But the framework is still great.

Now everyone sings the praises of NextJS, which can be used for SSR but is intended for applications and active server endpoints. But more complexity doesn't mean better.

I'm keen to try other simple frameworks when the result is a static site. I may give https://www.11ty.dev a shot.

I've been very impressed with Eleventy:

https://www.11ty.dev/

I find my lingering desire to roll out an SSG slowly fading.

11ty is a lightweight static site generator. I chopped up my HTML and used the 11ty starter template called eleventy-base-blog as the structural foundation for the site.

If you know me, you already know that I'm a big Eleventy fan. So far, it's my favorite choice for creating a static project. But you can do so much more with it. You can even build an SPA with 11ty! The only downside to the escalation of my personal projects is the lack of a CMS to generate new content.

I’d ideally like this to be an Eleventy plugin that can be installed on an Eleventy site, rather than a full Eleventy site in itself. As far as I can tell there’s not a way to do so until Virtual Templates are made available.

"as simple as possible but no simpler" - (not Albert Einstein, probably)

Pure HTML + CSS, with the CSS in the

or inline in each html tag... this is a fine way to get something going. And then when you have two pages, you pull the CSS out to a separate file.

But once you start making any site which has multiple pages of the same format, you want some kind of template system with includes and a (static page) generator.

If your pages are data-driven, then you might want a programmable site generator which can ingest the data and spit out pages.

But if your data is "live", you end up needing per-view page creation, which is at minimum PHP realm (and certainly leaning into modern web framework with running servers realm).

I recently built a pro-bono website for a hobby of mine. The site is a dance promotion and event site, and the owner is a very non-technical dance teacher. It uses Eleventy (https://www.11ty.dev/) to generate a static site on Netlify (free tier), and it has some custom build code which pulls data from a Google Sheet which I have setup for the teacher to use to define upcoming events. It took a good dozen hours to build, but now it works like a charm while costing nothing to operate or manage. Now having built this, I have discovered a great and powerful sweet spot between absolute bare minimum and Rails/Phoenix/Django level.

Now that progressive hydration’s pros and cons are understood, what are the recommended ways to try it? At the risk of being repetitive, Eleventy and Astro have improved the developer experience significantly in this area, so the recommended way to learn is to start with either tool to gain experience. If more granularity is desired, build on top of either framework’s primitives or eventually build your own once the concepts are mastered.

Perhaps this is worth checking out and utilizing when I have the time to attempt another JAMstack project. Possibly Eleventy?

I like 11tu and GitHub pages. https://www.11ty.dev/