While rebuilding my personal website I wanted to add my projects and blogs. Since I didn’t want to copy-paste a page for every project or blog I started looking for alternatives, and ended up at static site generator Hugo. A static site generator generates all pages as html files, so nothing needs to be done dynamically anymore.
Traditional HTML
A traditional website structure looks more or less like this
<!DOCTYPE html>
<html>
<head>
<title>
<!-- A title, which is different for every page -->
</title>
</head>
<body>
<!-- A navbar -->
<main>
<!-- Content, which is different for each page -->
</main>
<footer>
<!-- A footer -->
</footer>
</body>
</html>
As you can see, there are only two things that change. We are going to make use of this while converting the website to Hugo.
Creating the Hugo
First, install hugo on your system. On my Arch Linux system it is as simple as running
sudo pacman -S hugo
Next, create the site skeleton by running:
hugo new site <name>
Structure
After creating the website using the previous command, you end up with the following structure
└── your-site
├── archetypes
│ └── default.md
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes
