Create a blog using static site generator Hugo

A short step by step guide with links

Posted by daniel on Sat, Jan 20, 2018
In Hugo
Tags tutorial, hugo

This blog is created using Hugo, a static site generator (a nice post about this technique and its difference to dynamic pages by David Walsh) written in Go, and is hosted ob uberspace.

Get Hugo running on your local machine

  1. get the binaries from https://github.com/gohugoio/hugo/releases
  2. create a new site using hugo new site YOUR-SITENAME
  3. search for a theme on https://themes.gohugo.io/, clone it, and copy it into the themes folder [create the folder if it is not available]
  4. edit the config.toml and change the fields according to your information
  5. run hugo new post/YOUR-NEW-POST.md
  6. run hugo server (or hugo server -D when your post is still a draft -> check in the toml header of the file) to visit your site at localhost and test/adapt your post and theme

Version control your blog with git

Local

  1. in the root directory of the blog run git init
  2. add all files using git add . and git commit -m "initial commit"
  3. optional: create a .gitignore file and write all names of these files and folders you do not want to upload to the server (e.g. automatic backup files)
  4. Create a bare git repository that can be send to the server. To do this, leave the blog root directory (cd ..) and run git clone --bare YOUR-LOCAL-GIT-BLOG-FOLDER YOUR-SERVER-GIT-BLOG-FOLDER.git
  5. copy the newly created bare repository to your server (e.g. using scp)
  6. move again into your local blog folder and add the remote address to your blog using git remote add origin SERVERADRESS:REPOSITORY-FOLDER

Server

  1. ssh into your server
  2. cd into the hooks folder of your blog directory
  3. using your favorite editor (what is without doubt emacs) create a file named post-receive and add the following content:
#!/bin/bash -l
GIT_REPO=$HOME/your-blog.git
TMP_GIT_CLONE=$HOME/tmp/git/your-blog.git
PUBLIC_WWW=/var/www/virtual/$USER/html

git clone $GIT_REPO $TMP_GIT_CLONE
hugo $TMP_GIT_CLONE
cp -r $TMP_GIT_CLONE/public/ $PUBLIC_WWW
rm -Rf $TMP_GIT_CLONE
exit
  1. make the hook file executable chmod u=rwx post-receive
  2. test whether everything is working by manually executing the hook file .post-receive
  3. when everything works leave the server and enjoy writing of your site locally. After you pushed your changes to the server the site will be generated automatically

The information above was collected from these sources:

Hugo:

Uberspace [note that the instructions are for jekyll – and in German.]:

Git: