Running a Hugo Site on Microsoft Azure
I like Hugo, as I have mentioned before, and I prefer to host my site within Microsoft Azure for a number of reasons, including control and the fact I play with resources within Azure, so I thought it would be good to share how I constructed my build pipeline to make working with Hugo to build and publish content in Azure a bit more automated. To run through this tutorial of sorts I assume that you have:
- An Azure Web Service
- A Visual Studio On-line Account (Free version should be OK)
- Familiarity with Git
- OPTIONAL - Visual Studio / Visual Studio Code / Markdown editor with git support
Prerequisites
Firstly, setup your project in Visual Studio online and push your Hugo site up the code repository. In Visual Studio you project will just be a folder solution rather than an actual Visual Studio solution, but it is still recommended to have the Visual Studio .gitignore file in that directory. This should give you something similar to this:
I am trying to get into the habit of brainstorming and writing blog posts in a bunch before scheduling them out, as well as writing where I can, so I have a master branch and a development branch which I have also found useful.
Build Pipeline
Under builds, create a new build pipeline and select the code repository for your Hugo site. Make sure you select empty pipeline instead of an actual template and you will be presented with the pipeline edit screen. The final pipeline we will create will look something like this:
First step is to add a new PowerShell script as a step with the following code:
Write-Host "Downloading Hugo"
Invoke-WebRequest -Uri https://github.com/spf13/hugo/releases/download/v0.20.7/hugo_0.20.7_Windows-64bit.zip -OutFile hugo.zip
This downloads the required version of Hugo from the Hugo Github site. You could get the latest version each time if required, but I prefer to change versions manually. Second step is to Extract the Hugo binary out of the matched Hugo.zip file into the base directory using a full stop ( . ) in the destination folder. The third step is to then build the site using hugo with another PowerShell script and the following code:
Write-Host "Building website"
./hugo
The final step is to add an Azure App Service deploy. In this step you will need to select your Azure subscription, App Type, App Service Name and the Package or Folder to deploy needs to be $(Build.SourcesDirectory)\docs.
This then completes the build pipeline.
Final Step
The final step is to set a trigger based on your workflow. Because Hugo allows you to specify a published date in the front matter, you may want to set up a daily scheduled trigger to rebuild your site so Hugo picks up the future dated published content. If you publish straight away you can just use continuous integration. I get away with using the free version of Visual Studio Online as well as they include 240 minutes of free build time a month, and as you can see half way through this month, I still have a lot left.
