Host on Azure Static Web Apps

Azure Static Web Apps is a service that automatically builds and deploys full stack web apps to Azure from a Git repository, using GitHub Actions or Azure DevOps.

The following documentation covers how to use GitHub Actions for the deployment. If you are using Azure DevOps, follow the Microsoft documentation.

Assumptions

1. You have Git 2.8 or greater installed on your machine.
2. You have a GitHub account. Signing up for GitHub is free.
3. You have an Azure account. You can sign up for a Free Trail.
4. You have a ready-to-publish Hugo website or have at least completed the Quick Start.

Deploy Hugo to Azure Static Web Apps

1. Navigate to the Azure Portal
2. Click Create a Resource
3. Search for Static Web Apps
4. Click Static Web Apps
5. Click Create

6. For Subscription, accept the subscription that is listed or select a new one from the drop-down list.
7. In Resource group, select New. In New resource group name, enter hugo-static-app and select OK.
8. Next, a name for your app in the Name box. Valid characters include a-z, A-Z, 0-9 and -.
9. For Region, select an available region close to you.
10. For SKU, select Free.

11. Click the Sign in with GitHub button.
12. Select the Organization under which your repo exists.
13. Select the Hugo app you wish to deploy as the Repository .
14. For the Branch select the branch you want to deploy (eg: main).
15. Select Hugo under the Build Presets, which will populate the configuration files with the standard Hugo build options

• App Location is the path in the Git repo where Hugo’s config file is
• Api Location is the path where the Serverless API is (or left blank if there is no API)
• Artifact Location is the path where Hugo publishes to

16. Click Review + Create to review the details and then Create to start the creation of the Azure Static Web Apps and create the GitHub Action workflow for deployment.

A GitHub Action workflow will immediately start a build using Hugo and deployment to Azure. The website can be accessed via the URL shown on the Overview page of the Azure Static Web Apps resource in Azure.

Using A Custom Hugo Version

When you create a Static Web App, a workflow file is generated which contains the deployment settings for the site. You can configure a specific Hugo version in the workflow file by providing a value for HUGO_VERSION in the env section of the Azure/static-web-apps-deploy GitHub Action.

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
        env:
          HUGO_VERSION: 0.100.2

Use a Custom Domain

Azure Static Web Apps supports custom domains as a CNAME or APEX domain mapping. You can configure the custom domains via the Azure Portal. Refer to the official documentation for custom domains for more information.