Use GitHub Actions workflow to deploy your Hugo static website in Azure Storage

calendar Jul 7, 2022 · 2 min read · Azure Hugo GitHub  ·
Share on: linkedin copy

This article is based on Microsoft’s documentation -- Use GitHub Actions workflow to deploy your static website in Azure Storage --, but has been updated to reflect changes required to publish Hugo static sites to Azure blob storage/static web sites. Please see the article linked above for a list of prerequisites.

Generate deployment credentials

Using Azure CLI

1$azsubId="xxxxxxxxxxxxxxxxxxxxxx"
2$azStrAcctResourceGroup="rg-westus2-website"
3$azstorageacct="stgwestus2webstorageacct"
4az ad sp create-for-rbac --name $azstorageacct --role contributor --scopes /subscriptions/$azsubId/resourceGroups/$azStrAcctResourceGroup --sdk-auth

The command will generate a JSON object, copy and save for later:

 1{
 2    "clientId": "<GUID>",
 3    "clientSecret": "<GUID>",
 4    "subscriptionId": "<GUID>",
 5    "tenantId": "<GUID>",
 6    "activeDirectoryEndpointUrl": "https://login.microsoftonline.com",
 7    "resourceManagerEndpointUrl": "https://management.azure.com/",
 8    "activeDirectoryGraphResourceId": "https://graph.windows.net/",
 9    "sqlManagementEndpointUrl": "https://management.core.windows.net:8443/",
10    "galleryEndpointUrl": "https://gallery.azure.com/",
11    "managementEndpointUrl": "https://management.core.windows.net/"
12  }

Configure the GitHub secret

  1. In GitHub, browse our repository.
  2. Select Settings > Secrets > New secret.
  3. Paste the entire JSON output captured earlier. For secret name, use AZURE_CREDENTIALS When you configure the workflow file later, you use the secret name for the input creds of the Azure Login action, for example:
1- uses: azure/login@v1
2with:
3    creds: ${{ secrets.AZURE_CREDENTIALS }}

Add your workflow

  1. Go to Actions for your GitHub repository.
  2. Select Set up your workflow yourself.
  3. Delete everything from the workflow and replace with the following code block:
 1# This is a basic workflow to help you get started with Actions
 2
 3name: Blob storage website CI
 4
 5# Controls when the workflow will run
 6on:
 7  # Triggers the workflow on push or pull request events but only for the "main" branch
 8  push:
 9    branches: [ "main" ]
10
11jobs:
12  build:
13    runs-on: ubuntu-latest
14    steps:
15    - uses: actions/checkout@v2
16    - uses: azure/login@v1
17      with:
18          creds: ${{ secrets.AZURE_CREDENTIALS }}
19    - name: Upload to blob storage
20      uses: azure/CLI@v1
21      with:
22        inlineScript: |
23            az storage blob upload-batch --account-name yourstaticwebsitestorageaccount --auth-mode key -d '$web' -s ./public --overwrite
24    - name: Purge CDN endpoint
25      uses: azure/CLI@v1
26      with:
27        inlineScript: |
28           az cdn endpoint purge --content-paths  "/*" --profile-name "thojotechwebcdn" --name "thojotechwebcdn" --resource-group "rg-eastus-thojotech-01" --no-wait
29   
30# Azure logout
31    - name: logout
32      run: |
33            az logout
34      if: always()

In the example above, notice the changes required for publishing Hugo static content, which uses a public folder to store the static content. That is the folder we need to copy to Azure Blob storage.

Now, when you commit changes to your GitHub static website repository, the public folder will be copied to your Azure static web site blob storage automagically.