Go Hugo!

I’ve always wanted to use a static site generator for my website. Static site generators allow you to generate .html files from text files, most commonly in Markdown (.md files) format. Static websites are more lightweight compared to dynamic websites that use platforms like WordPress because it does not need a database to generate the pages. However, implementing it usually requires some level of technical know-how.

After looking around at available solutions, Hugo looked like a good option. Hugo is written in Go, but you don’t have to be familiar with the language to use it.

I like how it’s distributed as a single executable binary.

Installing Hugo

I downloaded the latest release from its Github repository. As of writing, it was at version 0.76.3. I downloaded and installed the .deb version.

You can install Hugo with apt once you’ve downloaded the .deb file.

sudo apt install hugo_0.76.3_Linux-ARM.deb

On a side note: You could also install it via apt but it comes with an older version.

Run the following to check if it was properly installed:

hugo version

And it should display something like this:

Hugo Static Site Generator v0.76.2-207913F3 linux/amd64 BuildDate: 2020-10-07T08:59:22Z

Installing a Theme

The next step before you start adding content is to install a theme. There is a nice collection of community shared themes that you can download and use.

mywebsite
-- archetypess
-- content
-- layouts
-- resources
-- themes
    -- mytheme (the theme directory)

Most of the community themes will suggest that you checkout a git repository as a submodule so that if an update is available, you can pull it in via git.

After browsing through a few themes I decided to build my own simple theme from a blank theme, https://themes.gohugo.io/blank/

Instead of checking out the code as a submodule, I cloned the repository into my themes directory.

git clone https://github.com/vimux/blank themes/mytheme

Copy-pasting Images in Visual Studio

Being more familiar with WordPress, I missed the ability to conveniently copy-paste images directly into the editor. I am used to copying and pasting screenshots directly into the editor when I write tutorials and user guides.

Currently, I use Visual Studio Code as my main text editor which I also use to edit my markdown files. I found a neat extension, conspicuously named Paste Image which allowed me to paste an image directly into a markdown file. The extension would then save the image in the same directory as the markdown file and generate the appropriate markdown syntax.

The extension can be downloaded at https://marketplace.visualstudio.com/items?itemName=mushan.vscode-paste-image.

Side note: On Ubuntu, I had to install xclip first which can be installed with apt.

sudo apt install xclip

Wrapping Up

Hugo is an easy to use static site generator. However, the documentation can be a bit terse. This is in no way a comprehensive post about Hugo. Maybe I could write a few detailed posts on how I got my site up and running.

Thanks for reading.