Deploy Hugo Extended to Netlify: For Use with SASS/SCSS
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.)
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
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.