Hugo Themes on Branch Subdomains

2 min read

I made this site with Hugo, the static site generator built in GoLang. To use Hugo, you don't need to understand Go aside from its template system. The repository for this site is hosted on GitLab GitHub and deployed to Netlify's CDN. With branch subdomains, Netlify allows my "about" section to exist as a branch utilizing an entirely separate Hugo-based theme. I thought this was cool and extensible.

Here's a brief explanation of how you can accomplish the same result. You could have any number of sites/site variations - even utilizing various templates - living on git branch subdomains, useful in version demos and UI/UX testing. Branch subdomains on Netlify are currently only available while using a custom domain.

Firstly, create a new branch from master:

$git checkout -b my-new-branch

Modify the branch to include a new theme, including partials, defaults, and content:

$git clone https://example.com/aNiceTheme.git themes/aNiceTheme

Alternately, you could create your own using Go's template system. Modifying the theme path in the Hugo site's config.toml file will be necessary.

$hugo new post/examplePost.md

Push the branch to the remote repository, then navigate to Netlify's branch subdomains panel. You can choose to deploy all existing and new branches as subdomains or choose individual branches. By default, Netlify will use the branch name in the subdomain URL. For example, the branch 'about' will turn into 'about.exampledomain.org'

(or you could do this using Netlify's CLI)

For my 'about' section, I went with a UI cardio theme ported to Hugo with some CSS-fade-in action. I wanted it to have a different feel and style from my blog. So far it's bad, but I'm slowly making it my own, tearing it up and reformatting it piece by piece.