Hugo: Setting up Plausible analytics

Add Plausible analytics to Hugo §

Follow the official installation instructions for installing Plausible as a Hugo Module.

Convert website to a Hugo Module §

Run hugo mod init. This creates go.mod and go.sum.

For more details see this blog.

Add Plausible as Hugo Module §

Update config.toml with:

[module]
[[module.imports]]
path = "github.com/divinerites/plausible-hugo"

Then run hugo mod get -u.

Add Plausible params section to config.toml §

Add a new [params.plausible] section to config.toml:

[params]
[params.plausible]
enable = true
domain = "sam.hooke.me"
outbound_link = true
file_downloads = true
debug = false
gitstar = false

Update header partial §

Add the plausible_head.html into the website header:

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
{{ partial "plausible_head.html" . }}
<title>{{ .Title }}</title>
{{ with .Site.Params.description }}<meta name="description" content="{{ . }}">{{ end }}
{{ with .Site.Params.author }}<meta name="author" content="{{ . }}">{{ end }}

Done. The Plausible analytics is now set up with Hugo.

Add proxy for Netlify §

An additional extra step is to proxy the JavaScript file so that it appears to be served from the same domain.

Following these instructions to do so with Netlify.

Some adblockers/browsers block every tracking script, even privacy-first analytics like plausible.io

You can deal with this by proxying the script.

Update config.toml §

Add proxy_netlify = false to config.toml:

[params.plausible]
enable = true
domain = "sam.hooke.me"
outbound_link = true
file_downloads = true
debug = false
gitstar = false
proxy_netlify = false

Add _redirects §

Create static/_redirects. Populate with:

/misc/js/script.js https://plausible.io/js/plausible.js 200
/misc/api/event https://plausible.io/api/event 200

Done. The script plausible.js should now be served from /misc/js/script.js.