I’ve implemented some randomized backgrounds for my website! I got a big download somewhere a while ago for different tiled backgrounds, like the kind you’d find on old 2000s websites. So, I decided it would be nice to have the backgrounds be randomized.
In my Hugo template, I already had an existing template for the header which included the opening of the body tag, so I decided I would do some inline CSS into the HTML & add the background there.
Here’s the relevant part of the template:
{{ $background := (index (readDir "/static/backgrounds" | shuffle) 0).Name }}
<body style="background-image: url('/backgrounds/{{ $background }}')">
First, we use the Hugo readDir to read the directory in the site template, /static/backgrounds, which is where I’ve copied a ton of the background images to. Then, we can use the Hugo shuffle function. readDir returns us an array of FileInfo structures, so we can use the shuffle function, which acts on arrays, to shuffle the order of the list.
Now we have the files all in a randomly sorted array. From there, we just need to index the first element of this array (or really any element of the array) to get a random image. We use the index function for this. From there, we have… some sort of FileInfo structure?
I couldn’t find the FileInfo structure listed in the Hugo docs, so I had to go to the Go programming languages docs to find it: here’s what’s contained in that struct. Hugo is built using Go, so a lot of its docs just assume you have knowledge of the Go programming language for some reason? Luckily I did a whole presentation on the language back in college so I’m fairly familiar with the language, but I’m certainly not fluent in the language.
Anyways, a quick look at this struct shows we want the Name field from it, so that gets us our filename. All we need now is the simple line of CSS where we insert the image into the style of the HTML:
<body style="background-image: url('/backgrounds/{{ $background }}')">
Only tricky thing here is that the directory is different from before: in readDir we used the /static/backgrounds directory, but here we use just the backgrounds directory. This seems like it’s just a caveat of how Hugo works. The static directory does not exist in the actually built website; rather, it’s just the place where Hugo grabs some of its files when build the website with the hugo command.
So yeah, I stand by what I said in my about page: Hugo is cool, but really a bit too confusing for what most people want to do with it. Though I guess I have randomized backgrounds now every time I rebuild my site, so that’s kind of cool I guess.
That all said, this could have just been done with a simple shell script on a regular site by, for instance, making a shell script run on the webserver every day that changes the background.gif file to something else randomly. Oh well, this is cool too I guess.
Site Licensing Site last updated: 2024-10-14