Tutorial: Publish a Hugo site to Azure Static Web Apps Preview

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:

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

If you don't have an Azure subscription, create a free account before you begin.

Prerequisites

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. 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
    
  7. 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 master
    

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. Click Create a Resource

  3. Search for Static Web Apps

  4. Click Static Web Apps (Preview)

  5. Click Create

    Create a Azure Static Web Apps resource in the portal

  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.

    Details filled out

  11. Click the Sign in with GitHub button.

  12. Select the Organization under which you created the repo.

  13. Select the hugo-static-app as the Repository .

  14. For the Branch select master.

    Completed GitHub information

Build

Next, you add configuration settings that the build process uses to build your app. The following settings configure the GitHub Action workflow file.

  1. Click the Next: Build > button to edit the build configuration

  2. Set App location to /.

  3. Set App artifact location to public.

    A value for API location isn't necessary as you aren't deploying an API at the moment.

Review and create

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

  2. Click Create to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.

  3. Wait for the GitHub Action to complete.

  4. In the Azure portal's Overview window of newly created Azure Static Web Apps resource, click the URL link to open your deployed application.

    Deployed application

Clean up resources

If you're not going to continue to use this application, you can delete the Azure Static Web App resource through the following steps:

  1. Open the Azure portal
  2. In the top search bar, search for your application by the name you provided earlier
  3. Click on the app
  4. Click on the Delete button
  5. Click Yes to confirm the delete action

Next steps