WTF, Hugo?

Does Hugo’s “interesting” template language have you shouting into the void, “WTF, Hugo?!” Contexts and dots got you down? Can’t figure out what something is set to, or where something is, or why some Page variable isn’t what you expect?

Just click the attractive “WTF” button in the lower right corner of your browser, and despair no more! It’s live on this site, so try it out!

Comic of a programmer staring at a computer in frustration

😲 OMG I need this

It’s on Github. And it’s simple to install in your Hugo project.

🧐 LOL How?

It’s a theme component. Add this repo as a submodule in your themes directory:

git submodule add themes/wtfhugo

Or just clone the repo into your themes directory:

git clone --depth 1 themes/wtfhugo

Then, in your hugo.toml, or config.toml if you’re old-fashioned, add it as a theme component along with your site’s theme (if you’re not using a theme, just add wtfhugo as the theme):

theme = [ "wtfhugo", "your-theme" ]

Call wtfhugo.html in your site’s <head>:

  {{- partial "wtfhugo.html" . }}

And that’s it. You can call it conditionally, of course:

{{- if and (.Param "WTFHugo") site.IsServer }}
  {{- partial "wtfhugo.html" . }}
{{- end -}}

That way, you don’t have to remember to shut it off for deployment. This incantation will make it active if WTFHugo is true, and the site is either running locally, or it’s the dev branch deployed to Cloudflare Pages:

{{- if and (.Param "WTFHugo") (or (eq (os.Getenv "CF_PAGES_BRANCH") "dev") site.IsServer) -}}
  {{- partial "wtfhugo.html" . }}
{{- end -}}

But you’ll need this in your site config for it to work:

getenv = ['^CF_PAGES']