When it comes to efficient content authoring and website development, Astro ↗️ has proven itself as a versatile and powerful tool. But what if you’re working on draft pages that you don’t want to publish immediately? This is where the magic of content collections and a smart utility function come into play.
Let’s take a look at how we can set up draft pages in Astro with a configuration-driven approach.
Before we dive into the nitty-gritty details, let’s quickly revisit the concept of content collections in Astro ↗️ which was added in Astro v2.
Content collections are a fantastic way to organize your content, like blog posts, articles, or any structured data, validate the frontmatter and provide type-safety for your content in a clean and manageable manner.
While in Astro v2, we could opt for draft pages ↗️ by adding a
draft: true property to the frontmatter and control is via config in
astro.config.ts to exclude draft pages from production build.
However, this approach has been deprecated in Astro v3 ↗️. Instead, we can now use the
draft property in the frontmatter to manually filter out draft pages from being included in the production build.
Note: This also means you don’t need to specify the exact
draftkey, instead you can opt for whatever convention suits you best, like
If you opt for some other convention, you’ll need to update the
filterproperty in utility function we’ll be creating it the next section accordingly.
This is how the frontmatter of this blog page looks like:
Let’s now take a look at how we can exclude draft pages from the production build in Astro. This is the following code snippet I use personally as well while authoring content on this site.
In the code snippet provided, the
getPublishedAndSortedPosts utility function takes an array of posts from a
'blog' collection and performs two primary tasks:
Filtering Drafts: The function filters out draft pages when your project is in production mode. If a page is marked as a draft (
post.data.draftis true), it won’t be included in the returned list.
Dev Mode Flexibility: During development (
import.meta.env.PRODis false), you have the flexibility to toggle draft page’s visibility based on a configuration setting called
showDraftPages. This means you can locally see and work on draft pages without impacting your production site.
showDraftPagessetting is defined in a config file called
siteMetadatawhich is imported in the utility function. This config file is also used to store other site-wide settings like
Now that we have the utility function in place, let’s see how we can use it in our Astro project. Let say you display list of blogs on your website’s main page. You can use the utility function to get the published and sorted posts as follows:
The posts here would be an array of published posts sorted in descending order of their
In development mode, you can toggle the visibility of draft pages by setting
false in the
siteMetadata config file.
And during the production build the draft pages would be automatically excluded.
The beauty of this approach lies in its simplicity. By using a configuration-driven strategy, you can seamlessly manage your draft content. Adjusting the behavior of draft pages in production and development becomes a breeze, thanks to Astro’s power and flexibility.
With the combination of content collections, smart utility functions, and configuration-driven development, Astro empowers you to effortlessly manage draft pages. This approach ensures that your draft content remains hidden in production while providing you with a straightforward way to write and preview your content locally.
In the end, effective draft page management not only streamlines your workflow but also ensures a seamless content authoring experience. So, whether you’re building a blog, portfolio, or any content-driven website, Astro’s got your back when it comes to striking the perfect balance between draft and published pages.