Jens Oliver Meiert

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

Post from August 31, 2021, filed under .

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 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. Staying with the Eleventy base blog, 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 a few weeks later, 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 don’t know how it is for you—for me they don’t work as 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.

Tweet this? (If it changed your life, you delight me with a coffee.)

About Me

Jens Oliver Meiert, on April 29, 2020.

I’m Jens Oliver Meiert, and I’m an engineering manager and author. I’ve worked as a technical lead for Google, I’m close to the W3C and the WHATWG, and I write and review books for O’Reilly. Other than that, I love trying things, sometimes including philosophy, art, and adventure. Here on meiert.com I share some of my views and experiences.

If you have questions or suggestions about what I write, please leave a comment (if available) or a message.

Comments (Closed)

  1. On August 31, 2021, 20:51 CEST, Mike said:

    Source of centrally defined layouts: [Template and Directory Data Files]

  2. On September 1, 2021, 12:16 CEST, Jens Oliver Meiert said:

    Thank you!

Read More

Have a look at the most popular posts, possibly including:

Looking for a way to comment? Comments have been disabled, unfortunately.

Cover: The Web Development Glossary.

Perhaps my most comprehensive book: The Web Development Glossary (2020). With explanations and definitions for literally thousands of terms from Web Development and related fields, building on Wikipedia as well as the MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.

Stay up-to-date? Follow me by feed or on Twitter.

Found a mistake? Email me, jens@meiert.com.

You are here: HomeArchive2021 → 5 Eleventy Tweaks That Make My Sites Better (and Maybe Yours)

Last update: August 31, 2021

Professional frontend developers produce valid HTML and CSS.