Converting static website to Hugo

Avatar
Aug 21, 2020
Image

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
arrow-up icon