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:
- https://github.com/lxndrblz/anatole/issues/114
- https://github.com/alanorth/hugo-theme-bootstrap4-blog/issues/53
- https://github.com/alanorth/hugo-theme-bootstrap4-blog/issues/81
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.