Workshop Prep: Building a Personal Site with Hugo

This post accompanied the ACM Luther workshop "Building a Personal Static Website" on October 18, 2020. The commands have been updated to work today.

Why a static site generator

Hugo is a fast, open-source static site generator. You write content in Markdown, Hugo renders it to plain HTML, and you can host the result almost anywhere for free. In the workshop we built a personal portfolio and published it on GitHub Pages; the workshop example site is still online.

Before the workshop, set up Git and install Hugo.

Step 1: Git and GitHub

The workshop uses only a handful of Git commands:

git status
git add <path>
git commit -m "Describe your change"
git push origin main

If Git is new to you, GitHub's Git cheat sheet is a good one-page reference.

1. Create a GitHub account if you don't have one.
2. Install Git:
   • Windows: Git for Windows
   • macOS: run git --version; if Git isn't installed, macOS offers to install the Command Line Tools.
   • Ubuntu / Debian: sudo apt install git
3. Set your name and email. Git records them on every commit.

git config --global user.name "Jane Doe"
git config --global user.email [email protected]

4. Generate an SSH key and add it to your GitHub account, so you can push without typing a password.

Step 2: Install Hugo

Follow the official installation guide for your platform. The common options:

# macOS (Homebrew, from https://brew.sh)
brew install hugo

# Windows (winget)
winget install Hugo.Hugo.Extended

# Ubuntu / Debian
sudo apt install hugo

Many themes need the extended edition of Hugo for Sass support. The Homebrew and winget packages are extended; distribution packages may lag behind, so check the version.

Step 3: Verify

hugo version
# hugo v0.xxx.x+extended ...

If that prints a version, you're ready for the workshop.

Prepared by Swopnil Shrestha for ACM Luther's 2020–21 workshop series.