[Go Make Things] How to show content on specific dates in Hugo

Hugo is my static site generator of choice. Today, I wanted to share how I display content on specific dates in Hugo.

Let's dig in!

Some examples

I sometimes share date-specific messages around sales or events.

<div class="callout">  	🎉 <strong>Launch Sale!</strong>  	My <a href="/web-components">new course on Web Components</a> just launched.   	Today through Monday, get 30% off at checkout.  </div>

Rather than manually publish those on the day they start and manually remove them on the day they end, I set them up ahead of time, and have them only show up between specific dates.

Yesterday, I shared how I added the Pride border to my website for Pride Month.

body.border-lgbtq {  	--border-color: linear-gradient(  		to right,  		#ffafc7 10%,  		#73d7ee 10% 20%,  		#613915 20% 30%,  		#000000 30% 40%,  		#e50000 40% 50%,  		#ff8d00 50% 60%,  		#ffee00 60% 70%,  		#028121 70% 80%,  		#004cff 80% 90%,  		#760088 90%  	);  	border-image: var(--border-color) 1;  }

I now have that setup to automatically get show up on June 1 and revert to the normal gray border on July 1.

Dates in Hugo

There are few little developer Lego pieces in Hugo that I use to make this work.

  1. The now method (an alias for time.Now) that produces a Go date object for the moment that it's run.
  2. The dateFormat method (an alias for time.Format) that produces a formatted string from a date object.

Using them together, I'm able to get the month, year, or a specific date string that I can compare against.

Hugo uses a really weird syntax for formatting date strings. I'm not sure if this is a GoLang thing specifically, or just a Hugo thing.

In PHP, you'd pass in F for the full month (eg. March) or m for the numeric month (eg. 03). In Hugo, you always use January (or Jan, 01, or 1) as for month formatting.

For example, to get the current month name, you do this…

dateFormat "January" now

Today, June 4, that function would return June.

If I wanted the month as a digit, I'd do this…

dateFormat "1" now

And get back 6.

Similarly, years always use 2006 (or 06), days always use Monday (or Mon), day of the Month uses 2 or 02, and so on. They thankfully now have a table that shows you the options.

Comparing dates

Let's look at how you can use date strings to compare the current date to some window where content should be shown.

Hugo has a few functions for comparing values…

  • eq checks if two values are equal
  • ne checks if two values are not equal
  • gt checks if the first value is greater than the second
  • lt checks if the second value is less than the second
  • gte and lte are greater-than-or-equal-to and less-than-or-equal-to variants

Only show content during a specific month

For Pride Month, I want to add the .border-lgbtq to my <body> element, like this…

<body class="border-lgbtq">

To do that, I get the name of the current month, and check if it's equal (eq) to June. If it is, I display my class.

<body   	{{ if eq ( dateFormat "January" now ) "June"}}  		class="border-lgbtq"  	{{ end }}  >

Every year in June, the class gets added. Every other month of the year, it does not.

Only show content between specific dates

Let's imagine I'm launching a course on July 1, and I want to run a sale starting on launch day and lasting one week: July 1 through July 7.

For that, I can specific my start and end dates in a YYYYMMDD format, and compare them to now. In Hugo/Go, the YYYYMMDD format is achieved with 20060102.

{{ $dateNow := dateFormat "20060102" now }}

I can compare that to my start date (20250701) and end date (20250707) using the gte and lte methods.

For this one, I use numbers instead of strings, and use Hugo's | and piping syntax.

{{ $dateNow := dateFormat "" }}  {{ if (gte $dateNow 20250701) | and (lte 20250707) }}  	<!-- Sale message -->  {{ end }}

My message will show up on July 1, 2025, and disappear on July 8. It will not repeat on any future year.

Rebuilding the site

Hugo is, of course, a static site generator.

Unlike WordPress or some other dynamic CMS, the HTML is generated ahead of time, and does not run dynamically whenever someone requests a page.

The final piece to making these date specific changes work is that I have my site setup to automatically rebuild itself every day at midnight.

I have a whole separate article on how to do that, but the short version is…

  1. Install Hugo on the server
  2. Keep the source files in a non-public /build directory
  3. Setup a cron job to run hugo at a specific time every day, and then copy the contents of /public to the public directory for your site

This is also how I schedule blog posts ahead of time and them automatically go live.

Zach Leatherman (creator of another great SSG, 11ty) is the one who taught me this trick.

Like this? A Go Make Things membership is the best way to support my work and help me create more free content.

Cheers,
Chris

Want to share this with others or read it later? View it in a browser.

Share :

Facebook Twitter Google+ Lintasme

Related Post:

0 Komentar untuk "[Go Make Things] How to show content on specific dates in Hugo"

Back To Top