Skip to Content

Building a blog with Hugo

Posted on 5 mins read

Hugo is a framework for building websites. It is not a framework like Bootstrap, React, Angular etc., that will give you helpful functions and methods to simplify building what you have envisioned in your head (though this can be added to sites built with Hugo), but instead it generates working websites from markdown files (with some added sprinkles called shortcodes, that really give Hugo its power and flexibility).

Why Hugo?

Why use a static website generator for a blog, when there a lot of CMS’s that have been around longer and proved to be worth their salt? Why not just one-click-install Wordpress on a server and go blog like there’s no tomorrow?

There are several reasons why Hugo caught my attention and why I eventually chose Hugo over other CMS’s and static website generators.

Simplicity

Starting a blog, making a first post and generating the site with Hugo took about 2 minutes:

  1. Install Hugo with homebrew or via snaps
  2. hugo new site
  3. Add a theme with git clone yourTheme themes/yourTheme
  4. Create the first post with hugo new posts/my-first-post.md
  5. Build the site with hugo

Done!

Your site is built and you can basically push it to production and be done with it. Of course, there is a lot more you can do with Hugo, but this is the basic principle.

Markdown awesomeness

I love markdown. Fire up a text editor, write your content, add links, images, lists, tables and formatting without ever touching the mouse, save it and you’re done. No hassle, no need for an internet connection when you feel like writing, no WYSIWYG text editors, clicking buttons and selecting options from drop-downs, no hassle when adding code blocks. Just pure and simple productivity.

I truly believe that the less bells and whistles you have, the more you can focus on being productive and concentrate doing what you are doing. With Hugo, I can manage my whole site without ever leaving the terminal.

Sane content management

CMS’s tend to make configuring your site and content easily graspable for the non-technical end-user. Which is fine, since most people using a CMS would quickly start pulling their hair when they’d have to learn a new language and use a terminal just to write a blog post.

But when opting for speed and productivity, then it hardly seems optimal to go through a parade of inputs and drop-downs to get your post up and running. Choose category, add tags, choose publishing date, choose post status, click-to-preview, click to publish…

Hugo uses something called Front Matter to configure your posts. Front Matter is basically a block of configuration parameters in the beginning of your post in toml/yaml/json format and it looks something like this:

title: "Building a blog with Hugo"
date: 2018-02-03T09:45:54+02:00
draft: true
tags: ['hugo']

There are of course, more options that can be defined via Front Matter, but just by looking at it, you can see what each parameter does. Hugo can even generate new posts with the Front Matter already in place, so you don’t have to remember the parameters or write them by yourself.

Blazing speed

Finally, speed. Not only the time it takes to get up and running with Hugo but also the speed of the final site. With static websites you do not have server-side code or database transactions. Everything is precompiled HTML/CSS/JS that gets delivered to the client. No dynamic HTML generation on server, no processing request parameters, no database. Basically all that affects your page loading times is how much JS and CSS have you put into your theme and the size of the images on your site. Besides just uploading .txt files, it does not get any faster than that.

Of course, there are tradeoffs to the lack of the database - like having to use Disqus or some other external tool if I wanted to add a comments section, but luckily this has been though through by people smarter than me, so it’s not much of a hassle.

Final words

I am quite happy with my Hugo blog at the moment. I have not ran into any walls trying to achieve what I want. Everything is quick, simple and easily understandable. I especially like that I can keep a tab open in VIM with the blog post while coding on other tabs. So at any point when I feel like a need to make notes or think through a concept, the tools are right there. I don’t even need to switch to the browser to do that.

Of course, I have yet to delve into all the possibilities that Hugo offers - actually I have only used and described the most basic of functionalities up to this point. I do have some ideas on the changes I want to make to the site, so I’m going to look into the belly of Hugo to see what can be tweaked and how. There’s sure to be a few posts about modifying Hugo in the future.

P.S: Currently the theme I am using is purely Minimo by @MunifTanjim. There might be some modifications in the future, but kudos for providing an excellent theme to start out with. Credit where credit is due.