Hugo Primer

STC India Chennai Regional Conference

August 31, 2019

I am Xavier.

I work at Genesys as a Staff Technical Writer.



  • An introduction to Hugo
  • A live walkthrough to create a documentation site


What is Hugo?

Hugo is a static site generator.

A Static Site Generator (SSG) takes some text-based markup and generates a static website using some templates.

Popular SSGs

You can find more SSGs at StaticGen.


What can I use Hugo for?


Landing Pages




Like the one you’re seeing right now…




API Documentation


Who uses Hugo?

  • Google
  • Kubernetes
  • Docker switched to Jekyll recently.
  • and many more companies for their docs…


Using Hugo to create a site

Install Hugo

setx path "%path%;<HUGO EXE Folder>"
  • Verify if Hugo is installed correctly.
hugo help

Create a Site

  • Create a new site where the docs will reside.
hugo new site docsite
  • Go to the docsite folder.
cd docsite
  • Test if the site is created.
hugo server

Hugo will now create a temporary site at


Add a theme

We will be using the Whisper theme.

  • Rename the extracted folder from hugo-whisper-theme-master -> hugo-whisper-theme.
- archetypes
- content
- data
- layouts
- resources
- static
- themes
-- hugo-whisper-theme
- config.toml

Configure the site

Let’s copy the entire contents of the .\hugo-whisper-theme\exampleSite folder to the root folder of the Hugo site.

Edit config.toml

baseURL = "/" 
title = "My Docs Site"
theme = "hugo-whisper-theme"
... Other parameters as required

Test the site

Let’s check how the site looks.

hugo server

Hugo will now create a temporary site at http://locahost:1313.

Generate your site


The site will be now available at public folder for deployment.

You can copy the contents to your website.



What is next?

Run a website for free

Hugo + Github + Netlify = 🆓🌐

Hugo Workshop

Create a full-fledged documentation site with Hugo:

  • Chapters
  • Search
  • ToC
  • Indexes with tags

Workshop Details : TBD