Running Hugo with PaperMod on Windows

To create a static website I installed Hugo on Windows 10. And I followed the quick start instructions

Fist step:

  • Download Hugo (I used version hugo_0.108.0_windows-amd64)
  • Extract Hugo (I choose C:\hugo_0.108.0_windows-amd64)
  • Add Hugo to the Windows classpath
    • Right-click on the Start Button.
    • Select “System” from the context menu.
    • Click “Advanced system settings”
    • Go to the “Advanced” tab.
    • Click “Environment Variables…”
    • Click variable called “Path” and click “Edit…”
    • Click “New”
    • Enter the path to the folder containing the binary you want on your PATH.
  • Open a new CMD / console and test if Hugo works.
E:\escay>hugo --help
hugo is the main command, used to build your Hugo site.

Hugo is a Fast and Flexible Static Site Generator
built with love by spf13 and friends in Go.

Complete documentation is available at https://gohugo.io/.

Creating a first site

I followed the tutorial: https://gohugo.io/getting-started/quick-start/

I already have git installed.

My commands:

hugo new site escay
cd escay
git init
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke themes/ananke
echo "theme = 'ananke'" >> config.toml
hugo server

Server startup failed. I had to fix the quotes in the congif.toml file, make sure the content is:

baseURL = 'http://example.org/'
languageCode = 'en-us'
title = 'just some notes'
theme = 'ananke'

and now you can run the server and follow the tutorial to create a first post and add some text in my-first-post.md.

hugo new posts/my-first-post.md
hugo server -D

But beware of the draft option: you must start hugo server with -D or –buildDrafts!

Switching to PaperMod theme

To try another Hugo theme I have chosen the PaperMod theme as a test.

Steps taken:

  • Stop Hugo server (CTRL+C)
  • Follow method 1 as described in PaperMod wiki
  • Rename the basic config.toml to config.backup.toml
  • Create a new config.yaml based on the PaperMod example
  • Adapt the config.yaml to my likings
  • Start Hugo server and try out PaperMod
  • PaperMod theme was working
  • Remove config.backup.toml
  • Remove template/ananke folder

Adding categories and tags

Categories and tags work out of the box with Hugo. Example, this page adds the following in the document header:

categories: [software]
tags: [hugo]

Note: you need to restart ‘hugo server’ to see the tags being processed.

PaperMod hugo Json issue

I ran into:

E:\projects\github\escay.nl\escay>hugo
Start building sites …
hugo v0.108.0-a0d64a46e36dd2f503bfd5ba1a5807b900df231d windows/amd64 BuildDate=2022-12-06T13:37:56Z VendorInfo=gohugoio
Error: Error building site: failed to render pages: failed to process "\\posts\\hugo-and-papermod-static-site-creation\\index.html": "C:\Users\WOONKA~1\AppData\Local\Temp\hugo-transform-error4128616349:137:40": JSON parse error: expected comma character or an array or object ending on line 137 and column 40

And found a fix here: https://stackoverflow.com/questions/68088702/json-parse-error-on-running-hugo-command

Problem was my base url setting in config.yaml. It was set to “/” in config. I altered the value.

Hugo CSS issue when publishing the site

Running Hugo and upload the site from /public results in browser errors: CSS cannot be loaded due to css ‘sha256’-hash issue.

I found related issues:

The problem seems to come from Windows line endings. The solution seems to be defined here:

Quote:

“If you are building your Hugo site on Windows, in your .github.io GitHub Pages repository, add a .gitattributes file that requests CSS files be checked out with CR/LF line endings with the line *.css text eol=crlf”

However trying that did not solve the issue for me.

Other similar issues:

Looking at some of the javascript code in the theme looking for the fingerprinting 256 definition, I decided to not alter the theme code and try to disable the fingerprinting. This seemed to succeed by configuring config.yaml:

  assets:
    disableFingerprinting: true

When running ‘hugo’ to generate the site I no longer have a css file generated including the fingerprint in the css name, and the browser now imports the css file.