Part 3- Creating a blog with Hugo, Github and Azure Static Web Apps

Posted by pen on Monday, June 20, 2022
Reading Time: 3 mins

This post in the second of the series where I run through the process I used to create this blog and host if for free, using VS Code, Hugo, Github and Azure Static Websites.

What you will need:

  • Azure Subscription
    • A resource group to create our site in.

Step 1 - Create Azure resource.

This post assumes the reader has an Azure Subscription and have created a Resource Group, if you don’t have one, sign up for free.

Logon to the Azure portal, and click on Create a resource.

Azure create resource

Search for static, and select Static Web App

Azure create resource

Azure create resource

The subscription should be automatically completed, change this if your using a different one, and select the Resource Group.

Enter the name of the site, and under Azure Functions and staging select the Azure region you want.

Azure create resource

Under deployment details select GitHub and Sign in and authorise azure pipelines to have access to the repository.

Sign in to your Github account that has the Azure create resource

Azure create resource

Once logged in configure the Organization, Repository and and select main branch. Now click Review + Create

Azure create resource

Click Create.

Once the resource is created Open the GitHub repository and click on Actions.

You will see the pipeline running. Azure create resource

It will fail… Not worry about it we will fix it next in VS Code.

Step 2 - Fix the deployment pipeline.

The initial run of pipeline will fail, everytime I have created a site this happens, took me a while to figure out the issue, but its simple to fix. Azure create resource Open your blog folder in VS Code, select the Source Control icon on the rail, click on the elipsis next to your blog and select Pull.

This will download the pipeline file that Azure has created.

Once completed you will see a new file under .github\workflows named azure-static-web-apps-(your azure random name and id).yml. Open this file and change the line

output_location = ""


output_location' = "public"

Save the file and commit the change to the repository.

Now if we go back to GitHub and click on actions you will see that the commit we just made has triggered the pipeline…

Everytime you now commit changes to your repository they will automatically run the pipeline and publish your changes.

You will see that this pipeline completes successfully and you can access via the internet the site we have created.

You can see the demo site we built in this series

And the site will look exactly the same as it did when running it locally, and the good thing is SSL is provided for your site free of charge. In the next post will we add a custom domain!

Azure create resource

In the next

comments powered by Disqus