Adding a draft mode to 11ty

While writing recently I wanted an easy way to draft posts and publish them, allowing me to share with others before publising to RSS or sitemap feeds, or showing in the blog index.

Turns out with eleventy this is easy. You need to add a hook to your .eleventy.js config to check for a draft YAML flag, and remove it from collections if set.

module.exports = function (config) {
  // ... whatever other config you have here
  // allow for non-indexed and included in collection drafts
  config.addGlobalData(
    "eleventyComputed.eleventyExcludeFromCollections",
    function () {
      return (data) => {
        // Always exclude from non-watch/serve builds
        if (data.draft) {
          return true;
        }

        return data.eleventyExcludeFromCollections;
      };
    }
  );
};

Then in your post frontmatter simply add draft: true like:

---
title: Adding a draft mode to 11ty
date: 2024-03-29
tags: eleventy
summary:
draft: true
---
post content

This will publish your post so it's internet accessible, and you can share a direct link, but won't appear in your sitemap, RSS, or blog listing, if you use collections for all of these as a data source.