You might notice something a little different if you’ve visited the site today. That’s right, a new theme based off VMware’s ClarityUI that’s in use across almost all of our products.

I was envious of Cody De Arkland’s The Humble Lab blog and his work to integrate Clarity to his blog. Once I saw it, I knew that I wanted to do something similar but with my own touch and give myself a chance to dig deeper into Hugo. I built out the theme from the ground up, using none of my original theme. It took quite a few hours over a couple of weeks to get it looking how I wanted and learn all the nuances of Hugo, which has given me an even greater appreciation for the power of Hugo.

It wasn’t until I had finished the layout and basic features that I found Christopher Lewis’ thecloudxpert (sorry Chris!) and saw he had already done something very similar to my own design. Let’s face it there aren’t going to be many variations when there’s a clear design language for Clarity.

I’d like to outline some of the resources I used to build the Hugo theme. There are some great resources out there, but I found these to be the best when getting started:

Project Clarity Documentation

Absolutely none of this would be possible without the great reference material found in the Project Clarity Documentation. I used a number of the card variations for, you guessed it, the cards.

The flexible grid system provides the structure of the layout, separating the card lists from sidebar.

The header was Super Simple Stuff™. It provides the navigation menu along with the search bar and rows for the social media icons to the right of the header.

I used a mix of clickable and non-clickable labels for tags both in card lists and in the ’tag cloud’ in the side bar.

This is all tied together by following the application layout to get an idea for which components sit where in the Hugo code.

Creating the Hugo theme

There was one excellent resource I leaned on when learning how to create the structure of the theme and how everything ties together: Janne Kemppainen’s “An Introduction to the ‘Blog with Hugo’ series”. I went through the entire series once just to build a basic theme as described, then went back to the start and used the series to flesh out and piece together my new theme using Clarity.

Of course, the official Hugo documentation was also useful. However, I found it to be basic with regards to examples and explaining how particular functions tie together, forcing me to lean heavily on community posts or hunting for examples in other themes.

To handle images, I simply wrapped the standard <img> HTML tag with a Hugo shortcode, and used it to scale the images to fit the content column.

The goal of this post wasn’t to provide a detailed write-up of how to create your own Clarity UI Hugo theme, but the sources of information that I worked from. If you are trying to do something similar and have any questions, feel free reach out on Twitter.