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.
I downloaded the latest release from its Github repository. As of writing, it was at version 0.76.3. I downloaded and installed the
You can install Hugo with
apt once you’ve downloaded the
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:
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
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
sudo apt install xclip
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.