Hugo Inside Container

I recently bought a new notebook. And as usual - at least initially, I hesitate to install too many things on my device to keep it as clean as possible. With docker we have the possibility to have everything contained in the container and not mess up the system.

In the next few steps, I’m going to set up an ubuntu container with a hugo installation that I can use to create a static website. I want to keep the content of the site on my local file system, so I only use the container to build the site.

First I create a new folder d:\hugo on my local disk where I want to store the hugo files. Next we start the docker container with the following command

docker run -it --name testblog -v d:/hugo:/home/data -p 1313:1313 ubuntu:latest /bin/bash

This tells docker to start a new container with the name “testblog”, map d:\hugo to /home/data, forward local port 1313 to port 1313 in the container and use the latest version of the ubuntu image.

Before we can install hugo, we need to update the ubuntu package manager. Afterwards we can go ahead with the installation of hugo

apt-get update
apt-get install hugo

Now hugo is installed and we can create our first hugo site. Switch to the mounted directory and initialize a new hugo site with the name “testblog”

cd /home/data
hugo new site testblog

Hugo will now create an empty side, but before we can see the result, we need to configure a theme and add a first post. I decided to use the theme “hugo-clarity”, but you can find more themes on https://themes.gohugo.io

cd testblog
git init
git submodule add https://github.com/chipzoller/hugo-clarity themes/hugo-clarity

This will download the theme into the themes folder. Next we need to configure hugo to use that theme

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

Now we are ready to create the first post. You can either create the file yourself in the /content folder (you can also do that from your windows machine) or let hugo create the file for us, including the header in the markdown file

hugo new posts/hello-world.md

Now we are done, let’s check the result by starting the hugo server:

hugo server --bind 0.0.0.0 -D

Now you can open your browser and connect to http://localhost:1313 to see your hugo powered website.

If you come back later and the container is no longer running, just start it with the following command (and use the custom name of the container)

docker start -i testblog