Creating Drafts in Astro 5

Tuesday, 25 Mar 2025

Part of the Astro series

Last week or so, I started writing a blog post as I sometimes do, this one pertaining to my Automation Workflow for Media Reviews. Unfortunately, I wanted to preview it as I went along, so I copied it in progress to my git main branch of the local copy of the website.

You can see where this is going.

Yes, I updated something else on the website and published it, INCLUDING the partial draft of the blog post I was working on. This wasn’t a super huge deal, except that I use EchoFeed to automatically post to Bluesky and Mastodon whenever I post something new on the site.

Sigh.

The good news is that this finally pushed me to add drafts functionality to my site, so that I could have drafts render when running locally in development mode, but not actually get written when doing a site build. It’s a good, basic feature to have.

Initially I started with the method shared by Alex Curtis in his post How to Create a Draft Post in Astro, but his filter didn’t actually work for me. I think this is because his example was for a different version of Astro, possibly. I wound up using the Astro Docs example for Filtering Content Collection Queries.

Basically, there are three steps to adding draft posts to Astro 5:

Add an optional draft data property to your blog post collection in your content.config.ts, as below,

1
const postCollection = defineCollection({
2
  loader: glob({ pattern: "**/[^_]*.{md,mdx}", base: "./src/content/posts" }),
3
  schema: ({ image }) =>
4
    z.object({
5
      title: z.string(),
6
      description: z.string(),
7
      link: z.string().optional(),
8
      date: z
9
        .string()
10
        .transform((str) => new Date(str))
11
        .optional()
12
        .nullable(),
13
      keywords: z.string().array(),
14
      cover: image().optional(),
15
      coverAlt: z.string().optional(),
16
      series: z.string().optional(),
17
      draft: z.boolean().optional(),
18
    }),
19
});

Filter based on this in any page that uses this content collection, the way the Astro Docs show,

1
---
2
import Base from "../layouts/Base.astro";
3
import Post from "../components/Post.astro";
4
import Pager from "../components/Pager.astro";
5
import { getCollection } from "astro:content";
6
import site from "../data/site.json";
7

8
export async function getStaticPaths({ paginate }) {
9
  let posts = await getCollection("posts", ({ data }) => {
10
    return import.meta.env.PROD ? data.draft !== true : true;
11
  });
12

13
  posts = posts.sort(
14
    (a, b) => new Date(b.data.date).valueOf() - new Date(a.data.date).valueOf(),
15
  );
16

17
  return paginate(posts, {
18
    pageSize: site.posts.paginationSize,
19
  });
20
}
21
const { page } = Astro.props;
22

23
const title = site.title;
24
const description = `Posts Page ${page.currentPage}`;
25
---
26

27
<Base title={title} description={description}>
28
  <section aria-label="Post list" data-pagefind-ignore>
29
    {
30
      page.data.map((post, index) => {
31
        return <Post post={post} />;
32
      })
33
    }
34
    <Pager page={page} />
35
  </section>
36
</Base>

And finally, use it in a draft post!

1
---
2
title: Creating Drafts in Astro
3
description: describe
4
date: "2025-03-25T00:10:00-08:00"
5
keywords: ["keyword"]
6
draft: true
7
slug: "creating-drafts-in-astro"
8
---
9
I’ve always wanted to be a writer, and I’ve always wanted to create drafts in Astro that won’t get published until I want them to.
10

11
[Now I can!](https://jacurtis.com/notes/astro-draft-posts/)

One more thing though – none of this keeps the post page itself from being rendered during a build. It just keeps anything from linking to it or showing it in a list of posts. This means that it will show up in your RSS feed unless you edit your RSS template to also filter it out.

1
import rss from "@astrojs/rss";
2
import sanitizeHtml from "sanitize-html";
3
import { rfc2822 } from "../components/utilities/DateFormat";
4
import { globalImageUrls } from "../components/utilities/StringFormat";
5
import site from "../data/site.json";
6

7
export function GET(context) {
8
  const postImportResult = import.meta.glob("../content/posts/**/*.md", {
9
    eager: true,
10
  });
11
  const posts = Object.values(postImportResult)
12
    .filter((post) => post.frontmatter.draft !== true)
13
    .sort(
14
      (a, b) =>
15
        new Date(b.frontmatter.date).valueOf() -
16
        new Date(a.frontmatter.date).valueOf(),
17
    );
18

19
  return rss({
20
    title: site.title,
21
    description: site.description,
22
    site: context.site,
23
    xmlns: {
24
      atom: "http://www.w3.org/2005/Atom/",
25
      dc: "http://purl.org/dc/elements/1.1/",
26
      content: "http://purl.org/rss/1.0/modules/content/",
27
    },
28
    items: posts.map((post) => ({
29
      title: post.frontmatter.title,
30
      link: `${site.url}${post.frontmatter.slug}`,
31
      pubDate: rfc2822(post.frontmatter.date),
32
      description: post.frontmatter.description,
33
      customData: `<summary>${post.frontmatter.description}</summary>`,
34
      content: globalImageUrls(
35
        site.url,
36
        sanitizeHtml(post.compiledContent(), {
37
          allowedTags: sanitizeHtml.defaults.allowedTags.concat(["img"]),
38
        }),
39
      ),
40
    })),
41
  });
42
}

That’s it! Hit me up on Bluesky or Mastodon if you have any questions.