Fixing hugo build on vercel

Hugo and Vercel Build Error

The issue

Recently I switched this blog from Nuxt to Hugo, main reason being that the Nuxt solution was cobbled together and Hugo just works, or so I thought. I use Vercel to host this blog and have continuous integration set up with GitHub, so that when I push a new post to the GitHub repo the website automatically rebuilds and deploys.

The issue occurs in vercels build logs.

01:08:21.561  	Error: add site dependencies: load resources: loading templates: "/vercel/path0/themes/PaperMod/layouts/shortcodes/collapse.html:4:1": parse failed: template: shortcodes/collapse.html:4: function "warnf" not defined
01:08:21.572  	Error: Command "hugo -D --gc" exited with 255

After a tonne of searching for solutions it turns out Vercel has a very out of date version of Hugo by default.

The solution

Add a vercel.json file to the root of your hugo project which sets the Hugo version to the version you are running locally.

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.87.0+extended" // my current version
    }
  }
}

That should be it, push the commit and watch Vercel build Hugo, but no it’s not to be. I’m not sure why but the build failed with this error.

Error: Version 0.87.0+extended of Hugo does not exist. Please specify a different one. Learn More: https://vercel.com/docs/v2/build-step#framework-versioning

So I tried the next logical thing, the closest version to mine, 0.87.0+extended becomes 0.87.0. This worked!

{
  "build": {
    "env": {
      "HUGO_VERSION": "0.87.0" // what I'm running on Vercel
    }
  }
}

I hope this helps you if you find yourself stuck like me! :)

Hugo and Vercel Build Error#

The issue#

The solution#

Hugo and Vercel Build Error

The issue

The solution