DEV Community

Cover image for Use environment variables in Hugo to show branch information
Elio Struyf
Elio Struyf

Posted on

Use environment variables in Hugo to show branch information

For the new documentation website of Doctor, I wanted to do something similar like I did for Pimp Your Own Bike to show a message depending on the version/branch of the site I am using. For the doctor documentation, I wanted to use this method to show a beta message when using the beta site (

Related article: #DevHack: Configuring domains for your branches on Vercel

The beta banner looks like this:

Difference between production and beta documentation site

My approach

I used an environment variable for the bike stickers site, which I configured on Vercel. In the code, I used the process.env.<variable> to check the branch during the build.

For doctor, I used Hugo as the static site generator. These environment variables work a bit differently but still easy to achieve.

To achieve the same in Hugo, you will need to create an environment variable prefixed with HUGO_ or defined differently when using version >=0.79.0 of Hugo.

I created a HUGO_GIT_COMMIT_REF variable for the' doctor' site, linked to VERCEL_GIT_COMMIT_REF, which passes me the branch name.

Environment variable on Vercel used in Hugo

In the theme for Hugo, I retrieve the environment variable and check if it is not equal to the main branch. When that happens, the build will generate the static site with the beta message included.

{{ $branch := getenv "HUGO_GIT_COMMIT_REF" }}
{{ if ne $branch "main" }}
  <div class="banner-beta py-2">
    You are currently checking the beta version of the documentation.
{{ end }}
Enter fullscreen mode Exit fullscreen mode

Article originally published on

Top comments (0)