Replacing Wordpress with Hugo - Part One: Hugo

After fifteen years of using WordPress, I finally decided it’s time to get rid myself of this cumbersome, error-prone beast. I find myself more attracted to Markdown language with it’s simple, unobtrusive syntax, so the convenience of the WordPress text editor and dynamic content has lost its appeal.

Instead of going back to the contemporary SELFHTML and writing the page code myself, I decided to use a static site generator. I ran across a Markdown-based static site generator called Hugo. Hugo is a compiled Go program that only requires the download of a single binary for easy setup regardless of the operating system.

The tools

  • Hugo – Generates my static website
  • GitHub – Hosts the source code and raw contents of the website
  • Rsync – Transfers the Hugo generated static website to the web hosting server

Create a new repository on GitHub

We’re creating a Git repository to store code at GitHub.

New Project

Install git

We install git to be able to issue git commands on our local command line:

brew install git

First-Time Git Setup

The first thing you should do when you install Git is to set your email address. This is important because every Git commit uses this information, and it’s immutably baked into the ‘commits’ you start creating:

git config --global user.email "Lieschen.Mueller@users.noreply.github.com"

Let us check your configurations settings:

git config --list

Personal API token

Give git access to the new repository. We create our own personal API token for use on the command line. Be careful; these tokens are like passwords, so you should guard them carefully. The advantage to using a token over putting your password into a script is that a token can be revoked and given limited permissions over your GitHub account: GitHub

Personal API token

Create a file

We open a command line, create a file, add this file to our commit and push it to our repository. When asked, we copy-paste the API token into the command-line.

mkdir vhit.de
cd vhit.de
echo "# vhit.de" >> README.md 
git init
git add README.md
git commit -m "Initial commit"
git remote add origin https://github.com/kulturfolger/vhit.de.git
git push -u origin master 

Hugo Setup

Thanks to the magic of the Homebrew package manager for macOS, installing Hugo is even easier than downloading the binary from their website:

brew install hugo

Create a new site

We now create a new site with hugo within the folder of our repository:

hugo new site . --force 

Add a theme

Select a theme from the gallery. Because I intended to keep the minimalistic approach of my previous WordPress page, I wanted a theme with a minimalist static front page. I eventually settled upon the simple and straightforward Hugo Coder theme. First, download the theme from Github and add it to your site’s theme directory:

git submodule add https://github.com/luizdepra/hugo-coder themes/hugo-coder

Then, add the theme to the site configuration:

echo 'theme = "hugo-coder"' >> config.toml

Add some content

hugo new posts/my-first-post.md

Start the Hugo server

hugo server -D

Navigate to your new site at http://localhost:1313/.

Conclusion

Now that we have a working website, we can work your way through the Content Management section to customize the view.