Building a Hugo site to Azure Static Web App

tips & tricks
1

There are a few HOWTO’s around for building a Hugo site to Azure Static Web Apps.
e.g. Deploy a Hugo site to Azure Static Web Apps | Microsoft Learn

I ran into an issue once I started to use a theme that relied upon TailwindCSS.
Thankfully I was able to resolve, and so the tip is here.

When using a github action and the Azure/static-web-apps-deploy@v1 action, the build process happens inside an Oryx container, not directly on the github action runner.

Oryx supports hugo, but to get tailwind to work I had to also get Oryx to install the node.js tooling
After a few tries, I managed to get a successful build and deploy by doing the following.

  1. Add a basic package.json into the root of the Hugo project. I just copied the one that was part of the theme. This tricks the Oryx build into installing the node.js tooling

  2. Define some env variables within the build_and_deploy job in the github workflow.

env:
PLATFORM_NAME: ‘hugo’
HUGO_VERSION: ‘0.148.2’
NODE_VERSION: ‘20.19.3’
#DISABLE_NODEJS_BUILD: ‘true’ # Don’t set this to true, otherwise the node tooling doesn’t get installed on the Oryx Build image
PRE_BUILD_COMMAND: ‘npm install --save-dev tailwindcss @tailwindcsstailwindcss/cli @tailwindcss/typography’ # Force the install of tailwind inside the Oryx build image, before the Hugo build

PLATFORM_NAME forces Oryx to install the hugo tooling in the build container, and then run the relevant Hugo build commands

HUGO_VERSION and NODE_VERSION so I could force the build to use the same Hugo version as I am

Don’t set the DISABLE_NODE_BUILD to be true. This cause Oryx to skip installing the node tooling, even though it detects the package.json

Set the PRE_BUILD_COMMAND to install TailwindCSS. (Probably could do this form the package.json too)

End result, the Azure/static-web-apps-deploy@v1 action works, and my site builds and deploys. :tada: