I have previously introduced static site hosting platforms like Cloudflare Pages and GitHub Pages. To build a static site, however, you also need static site generation software. Among the many similar tools available—such as Hexo and Jekyll—Hugo stands out as the fastest and easiest to get started with. Written in the Go language, Hugo is incredibly fast, capable of generating a site with thousands of pages in just a few seconds, making it one of the best choices for building personal websites today. Below, I will explain how to build a static site using Hugo.
Step 1: Install Hugo
Before installing Hugo, you first need to install Git and Go from the following links:
Git download: https://git-scm.com/install/
Go download: https://go.dev/dl/
Once those are installed, you can install Hugo from this link:
Hugo download: https://github.com/gohugoio/hugo/releases/latest
You will see multiple versions of Hugo listed; it is recommended to download the “Hugo Extended” version, as most package managers install this version by default.
For Windows systems, Hugo consists of a single executable file (.exe). You can place it in any directory, but that directory must be included in your system’s “Path” environment variable (e.g., C:\Windows).
Afterward, open Command Prompt (cmd) or PowerShell and type hugo version to check the currently installed version of Hugo.
Step 2: Create a Site
Once installed, you can use Hugo to build your website.
First, create a directory, then use a single command to generate the basic directory structure for a new static site (in this example, the site is named “mysite,” but you can choose any name):
hugo new site mysite
You will then see a new folder named “mysite” in your current directory; this folder serves as Hugo’s working directory.
Here is a brief explanation of the key directories:
content/: Stores your articles and page content (Markdown files)
layouts/: Website template files
static/: Static assets (such as images and fonts) that are copied exactly as-is to the final generated site
themes/: Directory for storing themes
hugo.toml: The site’s core configuration file
By editing the hugo.toml file, you can customize settings such as the site’s language, title, URL, pagination, and permalinks. Step 3: Install a Theme
Hugo does not come with built-in styles, so you need to install a theme separately. Here, we use the lightweight and minimalist “PaperMod” theme as an example, adding it via a Git submodule:
git submodule add https://github.com/adityatelange/hugo-PaperMod.git themes/PaperMod
Next, edit hugo.toml and add the following line to specify that this theme should be used:
theme = “PaperMod”
Alternatively, if you prefer not to use Git submodules, you can simply download the theme’s archive from the GitHub repository and extract it into the themes/ directory; the result is the same.
Step 4: Write an Article
After creating the site, it is currently empty. Run the following command to create a new article in Markdown format:
hugo new posts/hello-world.md
The section enclosed by --- at the top contains the article’s configuration details—metadata such as the title, publication date, draft status, tags, and categories. You can write the main content using standard Markdown syntax; it supports common elements like headings, lists, code blocks, and images.