Ben Basten > Posts

Starting a blog with Hugo... lots to learn!

January 16, 2022

· 5min read

The other day, I watched a YouTube presentation called “Give Yourself a Blog for Christmas” that one of my favorite podcasters, Jack Rhysider, shared. Jack argued that anyone can benefit from a podcast, whether it’s for posting documentation to look back on later or to share out ideas for others to benefit from on the vast internet.

This really inspired me - why not start a blog? I think it’ll be a fun exercise to deliberately document my findings, share out anything I’ve learned, or just write about anything that’s been on my mind.

So… what next?

Choosing my blogging tool

Knowing that I’m particular and I will want granular control over the look and feel of the blog, I knew I would have to find a some sort of site generator with an extent of customizability. Plus, this could make for a cool project to learn about a new tool.

After some searching around, some names I found coming up frequently were:

They all had their pros and cons, but I saw a couple of intriguing examples leveraging Hugo that made me feel confident that it was flexible enough to meet my needs. Hugo it is.

Setting up Hugo

I followed the Binary (Cross-platform) instructions in the Hugo documentation to install it on my Windows computer. This required me to:

  1. Install Go, because Hugo is powered by Go
  2. Download the Hugo binary
  3. Add the hugo.exe file to my Windows PATH so that the command line will recognize the hugo command
  4. To test that everything is working, run the command hugo version in Command Prompt to see a version number

With everything installed, creating a project was fairly easy. In your desired directory to store the project (I’d recommend a Git repository for version control) run the command hugo new site sitename. That’s it - Hugo will generate the files and directory structure that you need.

But… there’s nothing to see yet. You’ll need to add a theme to make it look pretty! You can check out the themes list in the Hugo documentation for some potential options. I’d recommend digging into the theme documentation to make sure there’s clear instructions - it’s no good if you don’t know how to use it!

My learnings

After generating my initial site, I quickly realized that this tool wouldn’t be something that I could just look at and figure out right away. This Hugo tutorial YouTube playlist is what got me off the ground running. I’d recommend giving them a watch!

This is by no means all-inclusive documentation, but here’s a couple of helpful things that I wished I knew when I was getting started.

There are 3 main types of pages

  1. Homepage - the root of your site. Since the entry to any website may have special requirements, Hugo offers an option to make this its own template.
  2. List - display summarized contents of a directory in a list. For example, a list of blog posts.
  3. Single - the detailed content view of a file in a directory. For example, the blog post itself.

There are more fine-grained templates than this like taxonomy templates, but those big 3 are probably what you’ll need the most to get started.

Front matter is the metadata of your content

Every content file that you create can have front matter, which is essentially metadata for that content. For example, this could be the date of a blog post or its title. You can customize the default front matter when a new content file is generated by adding new custom archetypes in the archetypes/ folder.

Taxonomies offer a quick and built in way to organize content

Taxonomies are dictated in the front matter of a content file. Hugo comes set up with 2 out of the box, “tags” and “categories”, but you can customize these as you like in the config.toml file. For example, you can filter a list of post content by all posts that have a shared tag of “lifestyle”.

Pagination is super easy!

By default, Hugo is configured to paginate if a list is longer than 10 elements. Check out the sample code in the documentation, it’s really that easy. The logic for creating pages and the navigation is already done for you - enough said!

layouts/ is where the magic happens

This directory is where you determine what the different types of pages will look like. Hugo knows which template to render depending on the URL path, so you just need to dictate its layout and styling. Hugo offers various Site, Page, and Taxonomy variables that give you the power to dynamically generate the page. As a perk, the extended binary of Hugo supports Sass compiling without any additional configuration to make the page look the way you like! Learn more about variables here.

Final thoughts

If you’re looking for a static site generator that you can quickly choose a theme and get started, I probably wouldn’t recommend Hugo. It offers a lot of tools to craft an elegant page, but there’s definitely a learning curve. That being said, I’m excited to be getting started with this blog! I’m feeling encouraged now that drafting a new page is as simple as writing up a Markdown content file. Cheers to this new adventure!

Side note: I would highly recommend checking out Jack Rhysider’s podcast “Darknet Diaries”! He shares stories from the “dark side of the internet” about various hackers, exploits, social engineers, and more with excellent music/production quality.