This is part of a blog series titled “Creating and Deploying a Static Website with Azure DevOps Pipelines”:

• Part I - Installing and Creating a Static Website with Hugo

• Part II - Creating a New App Service in Azure

• Part III - Creating a Build With Azure DevOps Pipelines

• Part IV - Creating a Release with Azure DevOps Pipelines

Once you have a site created with Hugo, or any other static site generator for that matter, you will need somewhere to host it. In this post, we are going to create a new Azure App Service on the free tier to host the site.

Stage 1 - Create the App Service Plan

Before we create an App Service, we are going to need an App Service Plan to put it in.

In the Azure Portal, click on ‘All Services’ at the top left of the page and search for ‘App Service Plan’. Click on the only item that appears and click the ‘+ Add’ button to start creating the plan

Add the details like the name and resource group you want it in, and at the bottom of the blade notice that it defaults to the ‘S1 Standard’ pricing tier. Click on this as we are going to need to change it to the free version for this demo.

Click on ‘Dev / Test’, select the F1 plan (ie the free one) and click ‘Apply’. Once you are back at the blade with all the details click ‘Create’ and you new App Service Plan will start creating. It only takes a few seconds normally.

Stage 2 - Create the App Service

Now that we have the App Service Plan created, we can get to creating the App Service itself. As before go to the Azure Portal, then All Services and search for ‘App Service’. You will get a few more options this time so click on the one just called ‘App Services’.

Click on ‘+ Add’ button and it will take you to the marketplace where you need to select ‘Web App’ (normally the first one in the list). On the Web App page that appears, click the ‘Create’ button at the bottom.

From here you should see the Web App blade that you need to put the details into.

Just put in the name and the Resource Group you wish to use and select the App Service you have just created. All that is left then is to click create.

When the app is created, go back to the App Services blade and you will see the new app in the list. If you click on the app it will show you the url for your app in the top right. Click on that and you will get the starter page.

Also…..

If you are interested my colleague Lohith over at TechSnips has created a video on how to do this in PowerShell.