Deploy Hugo Extended to Netlify: For Use with SASS/SCSS

03/26/20191 Min Read — In DevTools, Netlify, Hugo

The official Hugo Docs do a very good job at guiding you through the installation of Hugo, the static site generator written in Golang.

Setting up a local version of Hugo turned out to be a smooth experience (on Manjaro Linux/Arch Linux).

But as always, hosting and deployment can throw a wrench into the works.

My landing page website is built with Hugo Extended 0.54, ships to a private Gitlab repo and automatically deploys to Netlify, a hosting provider with tons of other features (free SSL certificates, automatic deployments, CDN, etc.)

Some Tips for Deploying Hugo to Netlify

After you've made sure that your website works fine locally, load it up to a remote repository. Gitlab, Github or Bitbucket all work fine with Netlify.

Then go to Host on Netlify and follow the steps in the walk-through.

The documentation has an up-to-date example of the netlify.toml you'll need. Make sure to add it to your project.

If your Hugo site uses Sass/SCSS, Netlify needs to use extended version.

Often, this also includes installing node modules like postcss-cli - check your theme documentation for that. If you need node packages, make sure to add the relevant package.json file to your build.

Currently, Netlify supports Hugo 0.54 extended with the Ubuntu Xenial 16.04 build image. 0.54 is the Hugo version that's specified in the netlify.toml - if you're reading this in the future, make sure to update the version.

In your Netlify Dashboard go to "Deploy Settings" > "Build image selection" and switch to Ubuntu 16.04. The 14.04 build image doesn't support the extended Hugo 0.54 version.

Now everything should work fine.

Push your hugo build to your remote repository and deploy it to Netlify.

Further Reading