Hugo General

Programming
1

I use Hugo to build my website and I really enjoy using it. I wanted to make this thread so Hugo users could share advice, shortcodes, and generally discuss the things that are possible with Hugo. I considered making this thread about static site generators in general, but I only have experience with Hugo and I’m not sure how much overlap there is. I’ll start with a simple partial I use to change the highlight color underneath my navigation bar according to the section of the post being viewed:

{{ $color := "#51e6e6" }}
{{if eq .Section "blog" }}
	{{ $color = "#51e6e6" }}
{{else if eq .Section "versus-city-log" }}
	{{ $color = "orange" }}
{{else if eq .Section "blast-city-log" }}
	{{ $color = "darkviolet" }}
{{else if eq .Section "astro-city-log" }}
	{{ $color = "lawngreen" }}
{{ end }}

<style>
	div.posthighlight {
		width: 100%;
		height: 5px;
		background-color: {{ $color }};
	}

</style>

I’m a little hesitant to post my code because I am no programmer. A lot of my website is ugly under the hood, but it works.

Here is another little snippet used on my high score page:

<div class="latesthighscore">
	<h3>Latest Score</h3>
	{{ range sort .Site.Data.scores ".date" "desc" | first 1 }}
	<h4 style="margin-bottom: 20px;">{{ .date | time.Format "01/02/06" }}</h4>
	<img class="naomi" src="/highscores/naomi_highscore.png">
	<img class="highscorephoto" src="/highscores/{{ .name}}-{{ .date }}.jpg">
	<h3>{{ .game | humanize | title }}</h3>
	<h3 style="margin-top:10px; color: #51e6e6;">{{ .score }}</h3>
	{{ end }}
</div>

I keep all of the scores in a YAML file. That bit of code sorts the data by most recent, and uses the information for the most recent score to create the big feature at the top of the page. An entry for a game looks like this:

- game: donkey-kong
  name: dad
  score: 83,600
  date: 2025-05-18
  photo: true
  sprite: true

The whole file is kind of a mess, so I’ll just leave it at that for now.

2 Likes
2

This is no worse than I’ve seen from actual programmers at my day job. Nor is it any worse than code I’ve bashed out when I couldn’t be bothered to actually give a shit about my work. It’s still better than most of the code generated by LLMs.

As for the background highlighting, isn’t this something you could do with CSS? If you assigned a different color class to each section, and then set the background color in the stylesheet, then you’d have a solution that worked regardless of which SSG you use.

3

Nothing limits you in Hugo from reinventing the whole design of your website for a specific page. You simply create the appropriate file in layouts/{page_name}/(I use list.html because there’s only a single page under the given path and by default it’s treated as a “list” page). For instance, the design page on my website looks the same as every other page but I hand-wrote most of the HTML on there.

As for jank, here’s my footer template which has given me problems when adding new features on my website:

<footer>
  <nav class="between">
    {{ if ne .Page.Path "/" }}
    {{ if .IsPage }}
        <a href="{{ .Site.Home.RelPermalink  }}">{{ T "main_page" }}</a>
        <a href="{{ .FirstSection.RelPermalink }}">{{ .FirstSection.LinkTitle }}</a>
    {{ end }}
    {{ if .IsNode }}
        <a href="{{ .Site.Home.RelPermalink  }}">{{ T "main_page" }}</a>
        {{ with .GetPage "/tags" }}
        <a href="{{ .RelPermalink }}">{{ T "tag" 8 }}</a>
        {{ end }}
    {{ end }}
    {{ else }}
    <div class="license">{{ .Site.Copyright | markdownify }}</div>
    {{ end }}
    {{ with .GetPage "/about" }}
    <a href="{{ .RelPermalink }}">{{ T "about" }}</a>
    {{ end }}
  </nav>
</footer>

Here’s how it works:

  • I only want to display the site’s copyright notice on the home page.
  • Otherwise, I want to display the main page link and the parent section link.
  • If the page is a list-kind of page (like /articles), I also want to show a link to /tags.
  • Lastly, I want to always show the about page.

The logic is too complicated and I have a headache thinking about it, but it works and I’m not considering changing it :P.

4

I use Hugo and have been enjoying it a lot! I’ll happily post some code snippets that might be useful tomorrow, but my whole source is open on GitHub, link is in the footer of my site - https://ritual.sh

5

Here is a snippet I have found useful a few times, if I have a custom shortcode that requires a specific javascript file but I don’t want to include it on every page you can use this code and it will only execute once if the shortcode is found:

    {{ if or (findRE "{{<\\s*button-generator" .RawContent) (findRE "{{%\\s*button-generator" .RawContent) }}
    <script src="{{ "js/gif.js" | relURL }}"></script>
    <script type="module" src="{{ "js/button-generator/main.js" | relURL }}"></script>
    {{ end }}

This looks for either {{< button-generator >}} (template file usage) or {{% button-generator %}} (markdown file usage) and then includes the required javascript when that particular shortcode is found on the page.