Making a Hugo Website

2024-07-252 minutes

Contents

Hugo is a static site generator written in Go for building fast, fairly complex websites. You do not need to know Go to use it; you can build a site by writing only Markdown. Some HTML, CSS, and JavaScript are nevertheless useful for deeper customisation, such as pulling data from other sites or adding a commenting system.

Hugo has a wide range of uses. I have used it to build technical documentation for several teams at a previous job, as well as this website.

How to get started

Start with Hugo’s Quick Start guide. Then browse the complete list of Hugo themes and choose a base template to customise. I have found this the fastest route to a minimum viable product. Each theme has a Git repository that you can build on locally.

Examples of What You Can Do with Hugo

This blog post uses Markdown, and I’ll demonstrate some of the cool things you can include!

Code Examples

You can easily include code snippets in your Hugo posts. Here’s an example of a simple HTML structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Hugo Website</title>
</head>
<body>
    <h1>Hello from Hugo!</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

And here’s a little bit of CSS to style it:

body {
    font-family: sans-serif;
    line-height: 1.6;
    margin: 20px;
}

h1 {
    color: #333;
}

You can also show more complex code, like a Go function:

package main

import "fmt"

func main() {
    fmt.Println("This is a Go program!")
}

LaTeX for Mathematical Expressions

If you need to include mathematical equations, you can use LaTeX syntax. Here’s an inline example: The famous equation $E=mc^2$ relates energy and mass.

And here’s a display math example:

$$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$

Another example is the quadratic formula: $$ x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a} $$

And even:

\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}

More…

To learn more, check the documentation for the theme on which this website is based: