5 Eleventy Tweaks That Make My Sites Better (and Maybe Yours)

Published on Aug 31, 2021 (updated May 18, 2024), filed under development (feed). (Share this on Mastodon or Bluesky?)

I like Eleventy. You probably do, too. I’m still getting to know Eleventy and am therefore still learning, but I’m also about to set up my third site with it. In my work with Eleventy I found a few things that helped me—here are five of them, in case they are useful for you, too.

Disclaimer: These are solutions, but not necessarily the solutions. They may be hacky, there may be better approaches. Please let me know if you have advice to share.

1. Centrally Defined Layouts

If you have a site with a lot of pages, like I have with Frontend Dogma, you feel repetition quickly. One thing I noticed I repeated was information on the layout or template; lines like layout: post.njk. (The Eleventy base blog uses used this approach.)

I can’t for the love of it find the source of this information, however— As the Eleventy docs describe (thanks Mike), there’s an easy way to define a layout for an entire collection. Using the Eleventy base blog as an example, instead of defining post.njk as the layout in each post, you extend the respective posts.json so that it, instead, sets the layout:

{
  "layout": "post.njk",
  "tags": [
    "posts"
  ]
}

This is exactly what I do on Frontend Dogma, saving a lot of repetition. (“Don’t repeat yourself.”)

2. Title Sorting

For HH Kaffee’s list of Hamburg coffee places I needed a way to sort by venue name. From what I recall, neither the default nor Nunjucks’ built-in filters helped. What did was searching for an existing solution, one of which Sean Leather had provided in an Eleventy issue. Essentially, create a filter as follows in your .eleventy.js:

eleventyConfig.addFilter("sortByTitle", values => {
  return values.slice().sort((a, b) => a.data.title.localeCompare(b.data.title))
})

…and call this filter through sortByTitle. The code for the café overview page shows it in action.

3. Easy Hiding of Posts

In order to hide content (precisely: not to add it to any collections), you can use eleventyExcludeFromCollections: true. As I’m frequently working with drafts, that’s quite a mouthful. When some light testing didn’t give any results, I asked in the Eleventy fora for help. It turns out that you can define an “alias” (here hidden) quite easily by adding or modifying eleventyComputed.js in the _data folder:

module.exports = {
  eleventyExcludeFromCollections: data => (data.eleventyExcludeFromCollections || data.hidden)
};

(You can also limit this to a particular folder or collection, as Dafiul Haq shared first.)

I prefer the global alias, allowing me to hide content using hidden: true. That, then, is quite similar to how Grow handles this—which is the site generator I used before switching to Eleventy.

4. Localized Date Formatting

It’s helpful to make dates unambiguous, and for that reason you can spell them out, as in “September 1, 2021,” or “Sep 1, 2021” (no guessing whether the numbers mean MDY or DMY). Eleventy works well with this, out of the box, but on HH Kaffee, which is all German, I wasn’t clear how to best localize the date.

At first I tried working with .toLocaleDateString() but couldn’t get this to work. Then I looked into Luxon, coming with Eleventy’s base blog, but struggled here, too.

In the end I modified Eleventy’s readableDate filter to make use of .setLocale() together with an adjusted date format:

eleventyConfig.addFilter("readableDate", dateObj => {
  return DateTime.fromJSDate(dateObj, {zone: "utc+1"}).setLocale("de").toFormat("d. MMMM yyyy");
});

This, as you can tell when browsing HH Kaffee, works.

5. Versioned Output

By default (or just in the base blog example?), all Eleventy output goes into a _site folder that is ignored by Git. There are good reasons for this and similar setups, but—and I’m curious how it is for you—for me this doesn’t work that well. I prefer a different approach.

What I like to do is have the output under version control, too, and to deploy to an entirely different folder as well. Obviously you can address this easily, by taking out the _site/ line from your .gitignore file. It’s also straightforward to deploy to a different folder entirely.

What you may find useful, too, however, are the benefits of having the output under version control. For me these are the following:

1. Output monitoring: By having the output under version control you can easily tell what files changed how. I find this invaluable for a good understanding of what ends up live, and also as a safety to catch regressions.

2. Backup: If for any reason, Eleventy would stop working properly, or there’s need to quickly go back to an earlier snapshot of the respective site, it’s easier to do that when output is also under version control.

The key to me is output monitoring—understanding exactly what goes live and what changed with each update. I’ve never needed this for backup purposes, and switching back to a previous version and reinstalling with npm ci should help in many cases. However, I do like the comfort of having quick and full access to the fully generated site.

❧ As mentioned, this is not to explain the world, but to share five random things that have proven useful for my work with Eleventy. What did I miss? What other things are there to consider? The comments are open, and so is there a tweet to chat more. Thanks!

Many thanks to Thomas Steiner for reviewing this post.

About Me

I’m Jens (long: Jens Oliver Meiert), and I’m a web developer, manager, and author. I’ve been working as a technical lead and engineering manager for companies you’ve never heard of and companies you use every day, I’m an occasional contributor to web standards (like HTML, CSS, WCAG), and I write and review books for O’Reilly and Frontend Dogma.

I love trying things, not only in web development and engineering management, but also in other areas like philosophy. Here on meiert.com I share some of my experiences and views. (I value you being critical, interpreting charitably, and giving feedback.)