How I made the website

Published on October 24, 2019

I had a few simple criteria for the website, which is primarily for hosting blog type content. I wanted to be able to manage the source using version control, it should be able to be deployed as a static website so that I could publish it using AWS S3. Generating the static source should be easy to do using a docker container. Of course, the site should look modern and allow me to customize it fairly easily if needed. And finally, since I should have already done this in the late 90s, no site is complete without an ‘Under Construction’ graphic…

Possible static website generators

After a limited amount of research I found this helpful guide that gave a reasonable overview. I could rule out a bunch for various reasons, leaving the list below.

• Hugo
  • Seems to fit the bill.
  • Apache 2.0 license.
  • There is an official docker image - but it’s a couple of years out of date.
  • There is a theme that I really like the look of, and another.
• Hexo
  • Looks interesting.
  • MIT license.
  • There’s a ready made Docker image that may be suitable. But nothing official
  • There is a theme that I think should be customisable enough.
• Jekyll
  • Seems to be the standard, but Hugo seems a bit newer.
  • MIT license
  • Official docker image
  • Didn’t check themes.

Initial testing

Now that the Hugo framework is chosen I’d like to be able to start testing it, and have a reproducible environment to do that in. I’ll build a Vagrant VM to run Docker containers, and make sure to have a Dockerfile to build the website.

The previously mentioned Dockerfile is basically for building from source, and perhaps since it was developed the installation process got much easier. So I just followed the installation instructions and created a simple Docker image based on Alpine Linux.

Put the Dockerfile into a convenient directory (where vagrant can access it).

vagrant up
cd /srv/website
sudo docker build -t hugo:latest .

Then run the container port forwarding 1313, so that it can be accessed from the host VM (and also the host machine, since the Vagrantfile also forwards port 1313).

sudo docker run -it -p 1313:1313 -v /srv/website/src:/srv/website/src hugo:latest

Next take a look at the quick-start guide. https://gohugo.io/getting-started/quick-start/ Here I adapted it to use the Massively theme.

hugo version
cd /srv/website/src
hugo new site quickstart
cd /srv/website/src/quickstart
git clone https://github.com/curtistimson/hugo-theme-massively.git themes/massively
echo 'theme = "massively"' >> ../config.toml
hugo new posts/my-first-post.md

I got a bit confused about how new pages were created (other than new blog pages, so took a look at this really handy example which has customized the template. After playing with the Massively theme I wanted to take a look at the Colordrop theme…

hugo version
cd /srv/website/src
hugo new site quickstart
cd /srv/website/src/quickstart
git submodule add https://github.com/humrochagf/colordrop.git themes/colordrop
echo 'theme = "colordrop"' >> ../config.toml
hugo new post/first-post.md

Start the Hugo server to preview (note need to port forward 1313 to the local machine). Also note that you need to bind to docker 0.0.0.0 otherwise the service won’t be accessible on the host VM, or host machine.

hugo server --bind="0.0.0.0" -D

Note also that I was already using Github style ‘code fences’ with my notes, so adding pygmentsCodeFences: true to the hugo config file means that no extra shortcodes were required. Which is nice in case I decide that Hugo isn’t the write system for me at a later date.

At this point, I’m fairly happy with the outcome. Next step is to generate the static files for the website.

Generating the static website

You can generate the whole website as static files in the public directory, as simply as typing:

hugo -t colordrop

Unfortunately you need a little more configuration to be able to test the static site locally since the paths are all relative to root. It looks like you could add --baseURL to the command and set that to the directory that you are testing from.

At this point I’d assumed that I would just need to copy the files to S3 and do a little more setup. I guess that is one option, but there are a whole bunch of helper applications to make deployment super simple.

I’ll follow up in a separate post on how I deployed the whole website to S3, including grabbing a domain name and setting that up.

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License .