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 <SITENAME>
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
We will create a new theme, in which we will port our exisiting website to a Hugo Theme.
hugo new theme <THEMENAME>
This command will create a folder in themes/ with the following structure.
└───THEMENAME
├───archetypes
├───layouts
│ ├───partials
│ └───_default
└───static
├───css
└───js
The first will we will look at is the baseof.html. This is the base of every other page and look like this.
<!DOCTYPE html>
<html>
{{- partial "head.html" . -}}
<body>
{{- partial "header.html" . -}}
<div id="content">
{{- block "main" . }}{{- end }}
</div>
{{- partial "footer.html" . -}}
</body>
</html>
The first thing we notice the use of partial. This keyword will include a html file. The power of partials is that every part of your website is reusable if you make it a partial.
This article is a work in progress and will be finished in the future.
