publish-hugo.md

title	description	services	author	ms.service	ms.topic	ms.date	ms.author
Tutorial: Publish a Hugo site to Azure Static Web Apps	Learn how to deploy a Hugo application to Azure Static Web Apps.	static-web-apps	aaronpowell	static-web-apps	tutorial	05/11/2021	aapowell

Tutorial: Publish a Hugo site to Azure Static Web Apps

This article demonstrates how to create and deploy a Hugo web application to Azure Static Web Apps. The final result is a new Azure Static Web App with associated GitHub Actions that give you control over how the app is built and published.

In this tutorial, you learn how to:

[!div class="checklist"]

• Create a Hugo app
• Setup an Azure Static Web Apps
• Deploy the Hugo app to Azure

[!INCLUDE quickstarts-free-trial-note]

Prerequisites

• An Azure account with an active subscription. If you don't have one, you can create an account for free.
• A GitHub account. If you don't have one, you can create an account for free.

Create a Hugo App

Create a Hugo app using the Hugo Command Line Interface (CLI):

1. Follow the installation guide for Hugo on your OS.

2. Open a terminal

3. Run the Hugo CLI to create a new app.

   hugo new site static-app

4. Navigate to the newly created app.

   cd static-app

5. Initialize a Git repo.

   git init

6. Ensure that your branch is named main.

   git branch -M main

7. Next, add a theme to the site by installing a theme as a git submodule and then specifying it in the Hugo config file.

   git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
   echo 'theme = "ananke"' >> config.toml

8. Commit the changes.

   git add -A
   git commit -m "initial commit"

Push your application to GitHub

You need a repository on GitHub to connect to Azure Static Web Apps. The following steps show you how to create a repository for your site.

1. Create a blank GitHub repo (don't create a README) from https://github.com/new named hugo-static-app.

2. Add the GitHub repository as a remote to your local repo. Make sure to add your GitHub username in place of the <YOUR_USER_NAME> placeholder in the following command.

   git remote add origin https://github.com/<YOUR_USER_NAME>/hugo-static-app

3. Push your local repo up to GitHub.

   git push --set-upstream origin main

Deploy your web app

The following steps show you how to create a new static site app and deploy it to a production environment.

Create the application

1. Navigate to the Azure portal

2. Select Create a Resource

3. Search for Static Web Apps

4. Select Static Web Apps

5. Select Create

6. On the Basics tab, enter the following values.

   Property	Value
   Subscription	Your Azure subscription name.
   Resource group	my-hugo-group
   Name	hugo-static-app
   Plan type	Free
   Region for Azure Functions API and staging environments	Select a region closest to you.
   Source	GitHub

7. Select Sign in with GitHub and authenticate with GitHub.

8. Enter the following GitHub values.

   Property	Value
   Organization	Select your desired GitHub organization.
   Repository	Select hugo-static-app.
   Branch	Select main.

9. In the Build Details section, select Hugo from the Build Presets drop-down and keep the default values.

Review and create

1. Select the Review + Create button to verify the details are all correct.

2. Select Create to start the creation of the App Service Static Web App and provision a GitHub Actions for deployment.

3. Once the deployment completes click, Go to resource.

4. On the resource screen, click the URL link to open your deployed application. You may need to wait a minute or two for the GitHub Actions to complete.

   :::image type="content" source="./media/publish-hugo/deployed-app.png" alt-text="Deployed application":::

Custom Hugo version

When you generate a Static Web App, a workflow file is generated which contains the publishing configuration settings for the application. You can designate a specific Hugo version in the workflow file by providing a value for HUGO_VERSION in the env section. The following example configuration demonstrates how to set Hugo to a specific version.

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@v2
        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 }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "public" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          HUGO_VERSION: 0.58.0

Use the Git Info feature in your Hugo application

If your Hugo application uses the Git Info feature, the default workflow file created for the Static Web App uses the checkout GitHub Action to fetch a shallow version of your Git repository, with a default depth of 1. In this scenario, Hugo sees all your content files as coming from a single commit, so they have the same author, last modification timestamp, and other .GitInfo variables.

Update your workflow file to fetch your full Git history by adding a new parameter under the actions/checkout step to set the fetch-depth to 0 (no limit):

      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

Fetching the full history increases the build time of your GitHub Actions workflow, but your .Lastmod and .GitInfo variables will be accurate and available for each of your content files.

Clean up resources

[!INCLUDE cleanup-resource]

Next steps

[!div class="nextstepaction"] Add a custom domain