In this blog post I will go over how I deployed a marketing website built with Hugo, a static site generator written in Go lang.

About the website

The website is for a new app I'm building called Trackrrr, which is a privacy-first period tracking app that keeps the data on your phone. With everything that's going on with period tracking apps selling your period tracking data to businesses and anti-abortionists to track you, this seemed like a timely build. Granted, this was not the original reason I built this app, but it seemed to be happening around the same time. I chose to build Trackrrr because I wanted more control over the notifications my period tracking app sent. I'm excited to say that the app will be in beta soon.

The website is built using HTML, CSS with Sass (SCSS), and a tiny amount of JavaScript.

You can visit the website here: trackrrr.techygrrrl.stream

About Hugo

One of the quirks about Hugo that I learned early on is that Hugo has 2 versions: a standard one and an extended one. If you install the Hugo binaries via the tarballs, you'll need to grab the extended version to work with Sass. That was a bit of a frustrating discovery. The Homebrew installation method abstracts that and installs the extended version by default, so if you like Homebrew, you can get that one and you'll be ok for local development.

Problems with the existing Github Action

There is some official documentation for how to deploy a Hugo site using Github Actions but unfortunately these instructions, even with the extended mode enabled, don't work for projects using Sass. I found that the Sass files didn't end up transpiling properly, and in the final build there were .scss files in a directory I wasn't expecting and no .css file.

Final Solution for Github Actions and Github Pages deployments for Hugo with Sass

The final solution was a combination of the action that didn't really work and the one defined in this blog post.

The main things to note:

1. Install a specific extended version of Hugo from the release tarballs. Refer to the blog post for how to download and build, but ensure to change the URL to an extended release and not a regular one by adding _extended_ near the version. I also chose to run it on push to the main branch instead of via a manually triggered workflow dispatch.
2. The actions-gh-pages action defined in Hugo's official docs works great to deploy the ./public directory that Hugo generates
3. Be sure to copy your CNAME file into ./public before running that action to ensure your custom domain is configured.

You can see the final Github Actions workflow here: github.com/techygrrrl/trackrrr/blob/main/.g..

So the final solution was a combination of these 2 solutions with modifications to support Sass by using the extended version of Hugo.

You can see the deployed website here: trackrrr.techygrrrl.stream