Generating a static website with Hugo

Hugo is a static website generator written in Go. It is very fast at generating pages. Furthermore, there are more than 300 customizable themes available on hugo’s website: https://themes.gohugo.io/. Among those, I especially like these ones:

• Slick, a theme with no external request.
• Blist, a more blog-like them.
• Notrack, a theme with no analytics.

I’ve decided to go with Notrack as I like the look and it corresponds to my needs.

Creating the website

To create a website with the name sitename just type:

hugo new site sitename

It creates the folder sitename.

To create a page:

cd ../sitename
hugo new content notes/my-first-post.md

Installing the notrack theme

The installation process is pretty simple and described in the theme’s page.

git clone https://github.com/gevhaz/hugo-theme-notrack themes/notrack

Running the demo site

Running the example website should be as simple as:

cd themes/notrack/exampleSite
hugo server -D --themesDir ../..

Unfortunately, an error occurs about the twitter shortcode which requires two arguments but only one is provided. As I don’t use it, I just commented it out. And now the website runs on port 1313 by default.

Changing the theme of our newly created website

First, go back to the website root.

cd ../../..

The website configuration is defined in hugo.toml. The default configuration is very basic:

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'

Copy the example configuration file from the notrack theme:

cp themes/notrack/exampleSite/config.toml ./hugo.toml

And run the website:

cp themes/notrack/exampleSite/config.toml ./hugo.toml

This is the configuration file I’m using:

baseURL = "https://fadila.khadar.dev/"
languageCode = "en-us"
title = "Fadila's Notes"
theme = "notrack"
newContentEditor = "nvim"
mainSections = ["notes"]
paginate = 4

[params]
  author = "Fadila Khadar"
  siteHeading = "Fadila's Notes" # defaults to author
  #favicon = "hugo_grotius.png" # Adds a small icon next to the page title in a tab
  showBlogLatest = true
  mainSections = ["notes"]
  showTaxonomyLinks = false
  nBlogLatest = 4 # number of blog post on the home page
  blogLatestHeading = "Latest Notes"

  [params.social]
    github = "Fadila82"
    email = "fadila@khadar.dev"

[taxonomies]
  year = "year"
  month = "month"
  tags = "tags"
  categories = "categories"

[permalinks]
  blog = "/blog/:year/:month/:slug"

[markup]
  [markup.highlight]
    style = 'xcode'

When using the hugo built-in server by calling hugo server, the base URL will automatically be put to http://localhost.

Customizing the theme

The use of the theme is pretty well documented in its README.md. We learn that we can use a user css that will automatically be used:

You can add your own CSS by creating a file assets/css/userstyles.css. The theme will automatically pick it up.

For example, these are the modifications I’ve brought to the style: gist

Serving the website with Gin

Here a snippet of the code I use to serve this website.

func main() {
	config, err := parseWebsiteConfig()

	if err != nil {
		log.Fatal("Error: ", err)
	}

	r := setupRouter(config)

	if config.tls {
		err = r.RunTLS(":"+fmt.Sprintf("%d", config.port), 
                        config.certFile, config.keyFile)
		if err != nil {
			log.Fatal("Error running the server with TLS: ", err)
		}
	} else {
		// Listen and Server on specified port
		err = r.Run(":" + fmt.Sprintf("%d", config.port))
		if err != nil {
			log.Fatal("Error running the server (http): ", err)
		}
	}
}

You can find the whole program in this gist.

Problems

• using --buildDrafts does not have the behavior I expected. Drafts are not shown using the theme notrack. It seems they are not taken into account when generating the home page, but are when generating tags. They can also be accessed with their direct link.
• when defining the user css, only the page I was on was correctly updated. If I navigate to another page, it still has the old style.