How I made the website
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.
- Seems to be the standard, but Hugo seems a bit newer.
- MIT license
- Official docker image
- Didn’t check themes.
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
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
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 .