How to add drafts to Eleventy

This post will show you how to build draft functionality on your Eleventy blog. This will let you add draft: true to the frontmatter of your posts to hide it from post feeds. To get started, you’ll need to add a collection to your .eleventy.js config file. In this example, I create an articles collection and filter out the posts that are marked as drafts:

module.exports = function (eleventy) {
// ...

eleventy.addCollection("articles", posts =>
posts
.getFilteredByGlob("./posts/*.md") // Point this to your posts
.filter(post => !post.data.draft)
)

// ...
}

In the example above, I named my collection “articles” (it’s the string I passed in as the first argument in addCollection). On the posts index, you can now iterate over that array to list your posts:

{% for post in collections.articles reversed %}
<a href="{{ post.url }}">
{{ post.data.title }}
</a>
{% endfor %}

If you’re iterating over your posts in other places, such as on a sitemap, you’ll want to make sure to add the filter there, too, or to check against the existence of draft in order to hide it.

You may also be interested in some of my other Eleventy posts:

The ultimate guide to Eleventy

Generating social sharing images in Eleventy

Fixing Eleventy’s dates being off by one day

Making external links open in new tabs

Jekyll vs Hugo vs Gatsby vs Next vs Zola vs Eleventy