Create Our Blog as a Static Site with Hugo

Hugo is a static site generator written in Go. We write static pages in Markdown, then choose a theme (I chose Ezhil), then Hugo will generate static HTML with our theme’s CSS.

• Install Hugo

• Create our site

1$ hugo new site charlie-blog
2$ cd charlie-blog
3$ git init
4$ git submodule add https://github.com/vividvilla/ezhil themes/ezhil
5$ echo "theme = 'ezhil'" >> hugo.toml
6$ hugo server

Now Hugo should be running on http://localhost:1313

We’ll make a couple modifications:

• Add the ability to override css:

1$ cp themes/ezhil/layouts/partials/head.html layouts/partials/

Add these lines to layouts/partials/head.html:

1{{ range .Site.Params.custom_css -}}
2<link rel="stylesheet" href="{{ . | relURL }}">
3{{- end }}

See https://github.com/charliemcelfresh/charlie-blog/blob/main/layouts/partials/head.html#L4

Add static/css/custom.css. Here’s mine:

1code {
2  background-color: aliceblue;
3  padding: 12px;
4}

Add this line to your hugo.toml file, to ensure Hugo includes custom.css when it runs locally / compiles for production:

1[params]
2  custom_css = ["css/custom.css"]

Add this section + line to your hugo.toml file at the base of the app. It ensures that where we compile our static pages, Hugo does not include the hostname in all our paths:

1baseURL = '/'

To create static files to serve in production, run

1$ hugo

and notice all the new static files that were generated in /public