Using hugo and git for a personal blog

2017/07/25

Using a static site generator which consumes text files and spits out html is a nice way to set up a small personal blog.
— My brain, some time in the past.

So here I am, describing how I set up my blog and the hugo/git pipeline.

At the end of this post, we will have our site hosted on a server in a bare git repo, which we can check out on any git enabled device, and hugo building our blog automatically after pushes to the server. Update: I realized it’s more realistic to split the story in smaller parts. That way I will have more motivation to actually write it and keep updating the blog continously.

Part 0 – Intro

Hugo is a static site generator, that means it takes input files (usually only with text content) and produces a public_html folder, which in turn can be served by any webserver.

Everybody working with software probably encountered Git at some point in his life. It is not only a great tool for code, but also a valuable helper when writing texts. By utilizing the power of git for plain text it is possible to trace the history of thoughts and work on content from many different devices.

After you follow all parts of this story, you have all the skills necessary to fill your blog with content in the most nerdy way possible. You are going to write (mostly plain) text, possibly on your phone as well, and publish your thoughts from any place in the world. The only tools necessary will be a text editor of choice and a git client.

But first things first, let’s start with the site generator.

Install hugo

Since hugo is written in Go and just a single binary, you can download that and run it from the command line like any other program.

If you don’t want to do that, you can install hugo with Homebrew (on macOS)

$ brew install hugo

or Chocolatey (on Windows)

choco install hugo --confirm

or any Linux package manger (e.g. on Ubuntu)

# apt install hugo

(Everybody running any other platform can probably figure out by themselve how to install hugo).

After a successful install, check that the installed version is up to date:

$ hugo version
Hugo Static Site Generator v0.25.1 linux/amd64 BuildDate: 2017-07-10T16:47:12+02:00

(See my rant)

Initialize site with hugo

Create a folder to initialize your site:

~ $ hugo new site myblog
Congratulations! Your new Hugo site is created in /home/jonas/myblog.

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

This creates some folders and files to start your blog:

~ $ ls myblog
archetypes/  config.toml  content/  data/  layouts/  static/  themes/

Now you can cd into your myblog folder and create the first post:

~ $ cd myblog

~/myblog $ hugo new post/my-first-post.md
/home/jonas/myblog/content/post/my-first-post.md created

This file has a YAML metadata header for configuration (marking the post as draft, changing author or date, etc…) and contains the actual content:

~/myblog $ cat content/post/my-first-post.md
---
title: "My First Post"
date: 2017-07-25T21:49:16+02:00
draft: true
---

(The part enclosed in --- is the YAML header, any content has to placed below that.)

With this you can start writing and create content for your own personal blog.

The next part will contain a little tutorial on how to choose a theme and actually render HTML pages from the text we created up until now.


PS: I’m happy about feedback, just DM me on Twitter at @sn_3rd or write me an email.