I’ve recently been developing sites for some family/friends. I had one person request highlighting the currently selected menu item. I had built a custom theme which used a navbear defined in the site wide hugo.toml. There were a few different solutions but I wanted to highlight the solution I ended up using for my use case. A dummy of my site directory set up is:

content
    |-- section1
            |--_index.md
            |--section1Post.md
    |-- section2
            |--_index.md
            |--section2Post.md
    |-- section3
            |--_index.md

In my header partial I created a menu by looping over the entries in [[menu.main]] defined in the hugo.toml. It’s important here to end the url with a /. Hugo adds an ending /, to the urls of the pages that it creates. While this might not be necessary to make the hyperlink work, it will be necessary to get the highlighting correct. The definition of the menu looks like:

Now that I’ve graduated from my PhD, I find that I have more free time that was previously spent working on my dissertation. I also have the desire to continue to publish in some manner. My solution to both of these problems is to revamp my previous website which I only used as a portfolio site for job search purposes into a random blog.

In my time online I once came across a talk titled The Website Obesity Crisis. Since I’m already obsessed with minimalist systems, obligatory “I use Artix Linux and run dwm,” I internalized everything immediately and searched for the best way to design a modern and actually minimalist website (both design and size). I decided to try and serve a website which followed the design paradigm of the web pyramid graphic shown below: