How to Check if Content Is Draft or a Future Post in a Hugo Template

Every time I finish writing or editing content for my Hugo static site, my first instinct is to check the website a few seconds later after it finishes building.

Most of the time, I find myself wondering why my content wasn’t published or why my edits weren’t updated.

There are two possible causes when a blog post isn’t published or updated:

• I forgot to set draft to false.
• I set the publishDate to a future date.

Obviously, I could just use the command line to list all files that are still in draft mode or scheduled for the future.

But that’s not very intuitive.

I wanted some kind of color indicator directly on my Hugo site — visible only in the development environment — so I could quickly scan which posts are still drafts or scheduled for the future.

My method is simple:

• If a blog post is in draft mode, I want it to show a [Draft] label next to the title.
• If a post has a future publish date, I want it to show a [Future] label next to the title.

That way, I can instantly see the status of each post.

Want something similar? Here’s how I did it.

How to Check and Label Draft Posts in Hugo

To check whether a post is marked as draft in a Hugo template, you can use the {{ .Draft }} variable.

Here’s a simple example:

{{ if .Draft }}
    <span style="color: darkorange">[Draft]</span>
{{ end }}

If the post is in draft mode, it will display the [Draft] label next to the title.

This makes it very easy to spot draft posts while running the site in development mode.

How to Check and Label Future Publish Dates in Hugo

Checking for future publish dates is slightly trickier.

There isn’t (at least for now) a built-in {{ .Future }} or {{ .IsFuture }} variable in Hugo templates.

So the only way to check for a future publish date is by comparing {{ .PublishDate }} with {{ now }}.

Here’s how I do it:

{{ with .PublishDate }}
    {{ if gt . now }}
        <span style="color: darkturquoise">[Future]</span>
    {{ end }}
{{ end }}

If the post’s publish date is set in the future, it will display the [Future] label next to the title.

Combine Them Both

Now that we have both checks, we can combine them.

Here’s an example from my layouts/_default/list.html, where I display a list of posts:

<a href="{{ .RelPermalink }}">
    {{ if .Draft }}<span style="color: darkorange">[Draft]</span> {{ end }}
    {{ with .PublishDate }}
        {{ if gt . now }}<span style="color: darkturquoise">[Future]</span> {{ end }}
    {{ end }}
    {{ .Title }}
</a>

Simple and effective.

Testing Them

As mentioned earlier, these labels will only appear in the development environment.

If you build your site for production using the hugo command, draft and future posts won’t be included — so no labels will appear.

To test draft and future posts locally, run:

hugo server -D -F

• -D includes draft content.
• -F includes future content.

Conclusion

That’s it.

It’s a simple trick, but it significantly improves my productivity.

Hopefully, it’s useful for you too.

As usual, if you have any questions or a better method, leave a comment below.

Thanks for reading, and see you next time!