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.
- 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.
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
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
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/.
Now that we have a working website, we can work your way through the Content Management section to customize the view.