How to handle post drafts with eleventy (11ty)

aug 01, 2022
  • engineering
  • writing
  • blog

I'm using Eleventy for this blog. It let's me write posts in Markdown in my favorite editor (which, as an engineer and programmer, I spend a shitload of time in anyways) and publish them as simple plain html. Which is nice.

This simplicity comes with some downsides. Like 11ty having no integrated notion of drafts and published posts.

I tend to create a lot of draft posts: basically whenever a thought comes to my mind which causes me to think "oh i should probably elaborate on this eventually" i create a new post and start collecting notes. And eventually, write it again in prose.

So i have a lot of half-assed posts with random thoughts, bullet points and notes floating around.

Ok, enough with the rambling, how do i prevent these draft's from being rendered?

It's easy actually because 11ty is simple yet powerful.

First, in my /posts folder, i created a posts.json which automatically tags all contained markdown files as post and assigns the layout:

{
  "layout": "blogpost.liquid",
  "tags": ["posts"]
}

This gives me a posts collection which i can iterate over to render all posts:

{% for post in collections.posts reversed %}
<li class="post">
  <!-- ... -->
</li>
{% endfor %}

But it still just shows everything. So first things first, to remove all drafts, we create a custom collection in .eleventy.js which will filter posts based on a custom data attribute:

eleventyConfig.addCollection("published", (collection) => {
  return collection
    .getFilteredByTags("posts")
    .filter((post) => post.data.published);
});

I can now start iterating over the published collection...

{% for post in collections.published reversed %}
<li class="post">
  <!-- ... -->
</li>
{% endfor %}

...which will only contain posts with a custom data attribute published set:

---
date: 2022-08-01
title: How to handle post drafts with eleventy (11ty)
published: true
tags:
  - engineering
  - writing
---

I'm using [Eleventy](https://www.11ty.dev/) for this blog. It let's m...

This mechanism can, of course, also be inversed by adding a draft attribute to specifically mark posts as drafts.
But i prefer to, instead of blacklisting drafts, just whitelist only those posts which i want to have published. I tend to forget things and i prefer not to forget to hide stupid ideas i'm never going to publish.

You can still view the posts (if you know the slug url) while working on it. Just look at the console output when running eleventy serve - it will also post the slug urls for all draft posts.

← Back