Configuring continuous deployment of a hugo static site from Bitbucket onto Azure Web App with separate dev and production instances

If you don’t know already, this blog (and the whole KhoslaTech.com website) is built using awesome static site generation tool Hugo. After working out the initial version of the site, we have set up following workflow within the team to make any change (generally) to the site (including a new blog post):

• The source code is hosted on Bitbucket private repository with two main branches Master and Development. Any change requires the developer to create a new branch off Development, make the change, get it peer-reviewed and merged into Development.
• A CD pipeline is configured on Azure to pull changes in Development and publish on the KhoslaTech dev site instance.
• Once changes are verified on the dev site merge Development into Master. A similar CD pipeline pulls changes from Master and publishes it on production site KhoslaTech.com.

Let’s see how we have achieved this workflow.

Steps to setup CD pipelines for your static site

• Setup your repository on Bitbucket (or any other repository provider like GitHub/GitLab supported by Azure Web App Deployment Center; This article doesn’t depend on anything other than the git repository feature of Bitbucket).
• Install Azure_Hugo repository module in your site repository (we chose to include it as another folder rather than as a module).
  • We also deleted the static folder in the submodule because we currently don’t have a need for pre-written future posts.
• Copy .deployment file from azure_hugo into your root repository folder. This is the Kudu deployment configuration file and specifies that the deployment will happen via a PowerShell script azure_hugo/deploy.ps1.
• We’d like to specify dynamically which Hugo version to use for publishing. Also, since we’re using the same repository for multiple environments (dev and prod) we need to dynamically specify the siteURL config variable (which is used by Hugo for constructing absolute URLs). Open azure_hugo.ps1 script and make the following modifications:
  • Change the version variable definition as follows: $hugoVersion = $env:hugoVersion
  • Inside function Invoke-SiteBuild add baseURL arg to Hugo command: $(Get-HugoExe($version)) --baseURL $env:siteURL
• You also need to set up the above environment variables which you can do by adding the same keys in Configuration > Application Settings section on Azure Portal for your Web App instances. Btw, you only need to set the actual variable name as a key like siteURL or hugoVersion and not the $env: prefix which is a notation to access environment variables in PowerShell.
• Now set up a continuous deployment pipeline on Azure which will pull your git repository branch and publish on the Web App instance. We’ve chosen the built-in Kudu App Service build server for KhoslaTech.
  • On Azure Portal navigate to your Web App instance > Deployment Center.
  • Choose the repository server like Bitbucket and authorize it. On the next step choose the team, repository, and environment branch for this Web App instance. Review and finish the pipeline setup.
• Repeat the above steps for each environment you want to publish.