Hugo Primer

STC India Chennai Regional Conference

August 31, 2019

I am Xavier.

I work at Genesys as a Staff Technical Writer.

@paperarrow

🎙️

• 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

• Jekyll
• Hugo
• Gatsby
• VuePress
• Eleventy
• and many more…

You can find more SSGs at StaticGen.

🤔

What can I use Hugo for?

Blogs

Landing Pages

Conferences

Presentations

🎉

Like the one you’re seeing right now…

🤩

Resumes

Documentation

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

• Download Hugo from https://github.com/gohugoio/hugo/releases.
  • Install the Hugo Extended version.
• Add to Windows ‘PATH’.

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

http://locahost:1313

Add a theme

We will be using the Whisper theme.

• Download the Whisper theme from https://github.com/JugglerX/hugo-whisper-theme/archive/master.zip
• Extract the downloaded zip file inside the themes folder in your docsite folder.

• Rename the extracted folder from hugo-whisper-theme-master -> hugo-whisper-theme.

\docsite
- 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

hugo

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

You can copy the contents to your website.

🙋

Questions?

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