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
- 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):
Follow the installation guide for Hugo on your OS.
Open a terminal
Run the Hugo CLI to create a new app.
hugo new site static-app
Navigate to the newly created app.
Initialize a git repo.
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
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.
Create a blank GitHub repo (don't create a README) from https://github.com/new named hugo-static-app.
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
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
Navigate to the Azure portal
Click Create a Resource
Search for Static Web Apps
Click Static Web Apps (Preview)
For Subscription, accept the subscription that is listed or select a new one from the drop-down list.
In Resource group, select New. In New resource group name, enter hugo-static-app and select OK.
Next, a name for your app in the Name box. Valid characters include
For Region, select an available region close to you.
For SKU, select Free.
Click the Sign in with GitHub button.
Select the Organization under which you created the repo.
Select the hugo-static-app as the Repository .
For the Branch select master.
Next, you add configuration settings that the build process uses to build your app. The following settings configure the GitHub Action workflow file.
Click the Next: Build > button to edit the build configuration
Set App location to /.
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
Click the Review + Create button to verify the details are all correct.
Click Create to start the creation of the Azure Static Web Apps and provision a GitHub Action for deployment.
Wait for the GitHub Action to complete.
In the Azure portal's Overview window of newly created Azure Static Web Apps resource, click the URL link to open your 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:
- Open the Azure portal
- In the top search bar, search for your application by the name you provided earlier
- Click on the app
- Click on the Delete button
- Click Yes to confirm the delete action