Long gone are my days of hosting my website using a dynamic web content management system like Wordpress or some custom PHP thing. My needs are simple and a static site generator is perfect. A couple years ago, I was trying to decide which one to choose and started with Pelican and it worked fine but I wanted something that felt a little more modern. Enter Hugo.
Background
I’ve had a website for many years at this point. I started with hosting static html files at University of Maryland in my home directory. I thought it was the coolest thing to be able to connect to my web pages from anywhere.
Then, when I was a Windows admin in a previous life, I hosted my site on IIS using ASP pages and was able to write some dynamic content. I quickly followed that with making my own site using PHP hosted on Apache and then Nginx. And, of course, at some point I started using Wordpress, as one does. But… yuck.
Pelican
I wanted to lower my attack surface by removing something like php from the mix altogether. I wanted to host straight up HTML files, but did not want to go through the hassle of managing a navigation structure, etc. So I tried Pelican. I spent a lot of time getting the site working the way I wanted and even found a theme that I could customize and make my own. I used an old, un-maintained program called Stork. I admittedly did not spend TOO much time working on how Stork presented its data and I thought it looked… okay.
Hugo
But recently, I had been seeing some Youtube videos about and sites built on Hugo. So I decided to give it a try.
I’m so happy with it. It wasn’t TOO difficult to bring over my content – I mean, we’re only talking about 23 markdown files or so. But I was able to use some sed and awk to change the Front Matter at the top of the files to match Hugo’s documentation. I had to fix some links, again with sed, and then I had to spend some time getting image display working the way I wanted. But I am extremely happy with the result.
I found the Tailroad theme and I really didn’t have to customize it that much to make it fit my needs. In fact, being able to copy files from SITEDIR/themes/tailroad/layouts to SITEDIR/layouts and make my modifications without actually touching the Tailroad files directly is awesome. Tailroad includes the ability to use Hugo’s json output mechanism to generate a searchable index, but it was not as robust as I wanted.
I decided to go with
Pagefind for local searching.
After building my site with hugo build, I run pagefind --site public --output-path static/pagefind to create the index. Then I followed
JP
Verkamp’s
Blog to see how to integrate the search into my site. I just had to modify
a little bit of the Tailwind code (in my SITEDIR/layouts directory) so that
I could submit a search to a search.md page from the navigation bar.
Conclusion
Take a look around and let me know what you think. I’m pretty happy with the results so far.