This content originally appeared on Go Make Things and was authored by Go Make Things
Today, I wanted to share how I schedule content snippets to only display on my Hugo website between certain dates.
Let’s dig in!
WTF would you need to do this?
Back when I still sold courses, I would run sales for holidays, and want to display messages on my site to promote them.
Stuff like…
❄️ Holiday Sale! Today through New Year’s Day, get 40% off all of my courses!
And…
❄️ Last Chance! My holiday sale ends today. Don’t miss your chance to get 40% off all of my courses!
I didn’t want these messages to show up before the sale started, and I didn’t want them to still be up on my sale after the sale ended, either.
And as you can see from the example above, sometimes I’d switch up the messaging as the sale was coming to an end.
For the first few years, I did this manually, updating my text in various places and pushing those changes live on specific dates.
Then I found a simpler way to do automate this in Hugo.
Step 1: a data file
Hugo has a built-in way to store information in data files: JSON, TOML, YAML, or XML you can use to hold data and use it elsewhere.
Let’s say I had a file called messages.yml, that looked like this…
sale: "<p>❄️ <strong>Holiday Sale!</strong> Today through New Year's Day, get 40% off all of my courses!</p>"I could access that content and use it in a template, partial, or shortcode like this…
{{ .Site.Data.messages.sale }}I decided to setup a file like this for all of the messages on my site.
But instead of just having a default message, I would also have some limited ones that are scheduled with a start and end date in YYYYMMDD format.
sale:
message: ""
limited:
- message: "<p>❄️ <strong>Holiday Sale!</strong> Today through New Year's Day, get 40% off all of my courses!</p>"
start: 20241226
end: 20241230
- message: "<p>❄️ <strong>Holiday Sale!</strong> Today and tomorrow, get 40% off all of my courses!</p>"
start: 20241231
end: 20241231
- message: "<p>❄️ <strong>Last Chance!</strong> My holiday sale ends today. Don't miss your chance to get 40% off all of my courses!</p>"
start: 20250101
end: 20250101Now, I have a way to define a bunch of content ahead of time, with the specific dates it should be visible.
Step 2: a shortcode
In Hugo, shortcodes are a way to add snippets of content in various places in your content files.
I created a cta shortcode (short for call to action), and dropped it in the various places where I want to render my different marketing messages. The cta shortcode has one argument, for, that’s used to identify which message in the messages.yml file to look for…
{{cta for="sale">}}In my cta.html shortcode file, I get the .Site.Data.messages file, use the .Get method to get the value of the for argument, and use the index method to get the corresponding $cta in that file.
{{- $cta := index .Site.Data.messages (.Get "for") -}}If there’s a matching $cta, I use the $.Scratch method in Hugo to store the default message, and the safeHTML method to properly escape any HTML.
Then, I display the message.
{{- $cta := index .Site.Data.messages (.Get "for") -}}
{{- if $cta -}}
{{- $.Scratch.Set "message" ($cta.message | safeHTML) -}}
{{ $.Scratch.Get "message" }}
{{- end -}}Now I’m ready to look for any time-limited messages, and use those instead.
If there’s a limited property on the $cta, I range over it. I use the now.Format method to convert the current date into YYYYMMDD format, and compare it to the start and end dates on each message.
If the current date is within those dates, I reassign the message in my $.Scratch variable.
{{- $cta := index .Site.Data.messages (.Get "for") -}}
{{- if $cta -}}
{{- $.Scratch.Set "message" ($cta.message | safeHTML) -}}
{{- if isset $cta "limited" -}}
{{- range $limited := $cta.limited -}}
{{- if and (ge (now.Format "20060102") $limited.start) (le (now.Format "20060102") $limited.end) -}}
{{- $.Scratch.Set "message" ($limited.message | safeHTML) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{ $.Scratch.Get "message" }}
{{- end -}}Now, the message that’s displayed out is either the default or, if there is one, a time-specific message.
Step 3: showing these on the appropriate day
To get the messages to actually update on the correct day, I have a cron job that runs a build every day.
This is part of the same process I use to schedule posts ahead of time. It runs at midnight every day, and at 10:30 am (for scheduled posts).
Like this? A Lean Web Club membership is the best way to support my work and help me create more free content.
This content originally appeared on Go Make Things and was authored by Go Make Things
Go Make Things | Sciencx (2025-01-14T14:30:00+00:00) How to show snippets of content only on certain dates in Hugo SSG. Retrieved from https://www.scien.cx/2025/01/14/how-to-show-snippets-of-content-only-on-certain-dates-in-hugo-ssg/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.