Eleventy it is
Switching static site generators
Every static site generator has idiosyncrasies, and Eleventy is no different. As is the case pretty much any time I try out software, I find that Eleventy often does things differently than I think it ought to, and it doesn’t always make itself as clear as I think it could. A couple of examples:
- Eleventy has no built-in mechanism for date-based archives. A common blogging convention I’ve adhered to for many years involves organizing post URLs something like this:
/blog/2023/05/post-title/
. Movable Type, WordPress, and Jekyll made that easy for previous versions of my site, but Eleventy includes no obvious way to do it. In fact, the only automatic post grouping mechanism available out of the box is the use of tags. - As it applies to the web, I’ve always thought of the term “pagination” referring to breaking up continuous content onto multiple pages. It can be sensible, as in the case of extensive search results, or obnoxious, as in the case of artificially inflating engagement metrics by forcing extra clicks on an article. Pagination is a prominent feature of working with templates in Eleventy, but its documentation, though detailed, lacks specific use cases and is mainly focused on putting different categories of data on different pages, as opposed to creating a chronology of pages. When it does address chronology, its top-down approach tries to fit everything on a specified number of pages rather than letting the content length determine the page count.
These and other hurdles were initially frustrating. I was concerned that Eleventy was built with a mindset that differed too much from my own, and that it might not be able to accommodate my very specific vision for how my site should be organized, at least not without a lot of extra headache.
But after a few days of digging around and seeing how other Eleventy users have solved problems similar to mine, the tide started to turn. I began to realize that a lot of what I wanted to do would revolve around Eleventy’s concept of collections, which is actually quite powerful, especially compared to how I’m currently using Jekyll.
On Tinnitus Tracker, my live music diary, which is built with Jekyll, posts can be browsed by genre, artist, venue, city, state, and year. Even though these varied taxonomies all offer identical tag-like browsing functionality to the site’s users, I had to use several different Jekyll features to get them all working under one roof: tags for artists, categories for venues, date-based archives for years, and collections for everything else. Jekyll’s version of collections in particular is not a great tool for the job and requires me to take extra steps any time I add a post with a new genre, city, or state. I could modify Jekyll to work the way I want, but to do so would put me at the mercy of plugin makers or require learning Ruby. I never had a reason to learn Ruby before, and I’m not especially interested in starting now.
JavaScript, however, on which Eleventy is based, is a programming language I know well enough to be somewhat dangerous. And using it in conjunction with Eleventy’s extensible concept of collections has turned out to be the gateway to the taxonomical menagerie I’ve always dreamed of.
Tinnitus Tracker’s six methods of browsing? I can create custom collections in Eleventy to make each one its own de facto tag class; set it and forget it. And once I got my head around Eleventy’s aforementioned notion of pagination, it proved to be a powerful tool for working with those collections to form exactly the organizational structure I want, date-based archives and traditional pagination included. So now I can set a post’s front matter like this…
---
date: 2005-02-02
artist: Low
venue: Trocadero Theatre
city: Philadelphia
state: PA
---
…and see all 2005 posts at /2005/
, all Low posts at /artist/low/
, all Trocadero Theatre posts at /venue/trocadero-theatre/
, all Philadelphia posts at /city/philadelphia/
, and all PA posts at /state/pa/
. And if any of those archive pages start getting too long, they can be broken into pages /1/
, /2/
, etc.
Accomplishing all this is admittedly not as straightforward as I’d hoped, but true flexibility often comes with at least a modicum of complexity, which seems appropriate for a site like mine, which is much more complex than a typical blog. And although I’m taking some important cues from others’ valuable work, I’m proud to say that so far, all the code I’ve used to customize Eleventy is my own. The function I wrote to create the custom collections described above is now available as a gist, in case it can be of use to anyone else.
My Eleventy experimentation is all still happening on a local test site for the time being, but I think Eleventy and I have gotten to know each other well enough that I can say with confidence and enthusiasm that it will be my path forward for building out v7.robweychert.com!