Hugo part 1: getting started

2017-07-24

Categories: software Tags: hugo guide

Welcome to the obligatory “blog about the blog” post. Settle in, this might take a while.

What is Hugo

This site is built using a tool called Hugo. If you’ve never heard of Hugo, it’s a static site generator.
What that means is that it’s similar to eg. Wordpress in that it uses templates and content you put into it to generate HTML files people can view in their browser. It’s also different from Wordpress in that it does this before, not when someone tries to view a page.

With Wordpress (and similar “dynamic” content management systems) you have to run it on a server that will generate the HTML each time it’s requested by someone’s browser. Hugo (and similar site generators) on the other hand generate the HTML before anyone tries to view your page so when they do the already generated HTML is just sent to them.

The main benefits of Hugo are speed and portability.
It’s much quicker for a server to just send HTML files than to go through a bunch of templates and other code to generate them. If your site is not something dynamic (eg. a blog and not an online forum) it’s much easier to generate just once instead of each time someone wants to look at a page. It’s also easier to move and host your site since you can just take the generated HTML files and put them on any server that can do basic static serving.

If you want to learn more about Hugo, the best place to start is the Hugo documentation: gohugo.io/documentation/


Getting started with Hugo

To build a Hugo site, you’ll need to have the Hugo program on your local computer. You can get it for Mac, Windows, Linux or FreeBSD from here.

Once you have Hugo, you can get started on the command line by typing hugo new site sitename, this will create a folder called “sitename” and set up the basic structure for your site.

Before you can actually see your site you’ll need a theme for it. You can find lots of great themes here or you can use the “xmin” theme I’m using: ttps://github.com/fonorobert/hugo-xmin/tree/tilde.

Now that you have a theme, you can run hugo in the folder of your site and Hugo will generate all the HTML files within the “public” folder.

You can add a new post to your site by running hugo new post/post-title.md and then editing the “post-title.md” file in the content/post/ folder. When you open that file you’ll see there is some stuff at the beginning like this:

---
title: "Post Title" 
date: 2017-07-01T10:30:00Z
draft: true
tags: []  
categories: []
---

This is called front matter and it has the basic information about your new post like it’s title and when it was created. You can write your content after the ---.

Once your post is ready, you should change draft to false and then run hugo in the main folder of your site to generate the site again, now with your brand new post.


This is part 1 of my intro to Hugo. If you want to get started, I highly recommend you check out the official documentation: https://gohugo.io/documentation/
Part 2 is coming soon with a dive into sections and archetypes, stay tuned