I made a website: My experience using Hugo

How I set up Hugo using a custom theme.

Motivation

I’ve been meaning to create a personal website for a while now—a singular, consistent place to house my projects, writing, and photography. But the combination of wanting to go beyond the “easy” WordPress or other content management system (CMS) process and working at a startup meant I had to wait until I quit my job (future post on that) to seriously get started.

Why Hugo?

Why not WordPress? For starters, hubris. It’s a perfectly fine solution for most people, but as an engineer I wanted to really dive into a new technology and make whatever I built my own. With its huge community, limitless themes and powerful administrative dashboard, WordPress would be a little too easy and a lot less fun.

Enter static site generators. In addition to providing a learning experience, they promise better performance, security and configurability compared to traditional CMSs. The most popular one, Jekyll, is also the easiest to setup with its extensive theme library and tight integration with GitHub Pages, but lacks speed. This led me to Hugo. Despite not being as mature as Jekyll and having fewer themes, comparing the search results for “Jekyll to Hugo” migration versus “Hugo to Jekyll” suggested choosing Hugo would be a good decision to future-proof my site as it (hopefully) gets bigger.

Hacking together my own theme

After making the decision to go with Hugo, I was disappointed to find that the theme library didn’t have exactly what I wanted: a simple, clean, responsive site whose design got out of the way of content. I loved the two-column layout of the popular Jekyll theme Minimal Mistakes and the no-bs formatting of Marco Arment’s blog, so I incorporated elements from both into my fork of the well-documented Academic theme.

Two weeks of pulling my hair out over style sheets later, I finally ended up with what you see here: Minimal Academic. This theme is designed to be simple and unobtrusive, featuring a clean color palette and consistent formatting throughout, with an emphasis on my photography in the masthead. If you like what you see, feel free to fork the repository and follow the instructions to get started on your own Hugo site!

Deploying on the cheap

I bought my domain on Namecheap (disclaimer: this blog receives a small commission if you sign up for a domain through this link) for $32.88/year, which was cheaper than on Google Domains. Hugo is free of course, and so is my hosting solution, Netlify—everything cost less than WordPress’s cheapest $48 plan.

Conclusion

I’m happy that I achieved what I set out to do with this website: to have fun learning a new framework and to build something that I’m creatively proud of. All those hours spent hacking at CSS also reminded me of why I prefer working in the back-end versus web development, but it’s still been worth it. I hope this post has helped you in building your own Hugo site, and don’t hesitate to leave a comment if you have any questions. Thanks for reading!

comments powered by Disqus