Tips for building fast static sites with Hugo and Wowchemy

I wanted to remake my porfolio site, which I had made from scratch with Django and Bulma for the learning experience. Hugo (site, donate) is a fast, minimal, and popular static site generator. Wowchemy (site, donate) provides a popular theme for academic portfolios. Also, and very importantly, you write all content in simple markdown, which makes it future-proof: even if both Hugo and Wowchemy would disappear, your content can be easily read by humans and parsed by computers. Other static site generators and content managers out there lack or do worse in the mentioned features/metrics.

This post exists because the documentation is there but some things are less obvious or harder to find.

• Hugo docs
• Wowchemy docs

Where to place files

• All content (markdown) goes in content.
• Files to serve go into static/uploads.
• Images go into assets/media. Also, sometimes to the directory of the page in content. Reduce their size with cwebp -q 80 pic.png -o pic.webp.

Adding publications

1. Put all BibTex-formated references in a file inside the site’s directory e.g., publications.bib.
2. Create all subdirectories and files under content/publication automatically with academic import --bibtex publications.bib.

If a publication in publications.bib exists already, it won’t overwrite anything.

Building and deploying

• Preview the site with hugo server --noHTTPCache to a avoid artifacts due to cache
• Build it with hugo --gc --minify.
• Deploy it with rsync -avz --delete public/ USER@ADDRESS:~/www/.

Extra resources

Hugo Actually Explained — Luke Smith.

Simple Hugo Shortcodes — Luke Smith.

Build your own website.

License

Copyright 2022–present Carlos de la Torre licensed under CC-BY-SA.