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:

I personally am a big fan of navbars as they are a clean way to navigate any website. The classic navbar, that you are likely seeing on this site if you are viewing this on a desktop browser, is extremely simple to make and you can easily find guides to develop these. The one I personally used is here. What was not as simple for me was creating a decent navbar for mobile. I had to develop it for a site that I was working on for my church that never concluded development. I copied it over to my personal site and learned a lot in the process of developing it so all was not wasted. It did however end up taking me way more time than it should have and in the hopes of saving some other poor soul some time, I decided to write an article about how I did it on my site.

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: