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
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
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.
hugo building our blog automatically after pushes to the server.
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
But first things first, let’s start with the site generator.
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
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.