Host a Static Website in Azure Storage Account - Part Two

.. and deploy from Github using Azure Devops

Posted on 09 Nov 2020

In the prevous blog post, we create a Azure storage account and configured it host a static website, uploading via the Azure portal a single HTML file.

In this blog post we are going to store this file in github and use Azure Devops pipline to, when a commit is made to the main branch in the repository a build will be triggered and a release will be deployed to the web container.

Step One - Create a Github repository. In the is example I am using the following github repo:

Step Two - An Azure Devops project is created and in this project we only need the pipeline section enabled.

Click on Pipelines, then create Pipeline button. There is two options, using YAML to script the pipeline and using the classic editor. Details of the differences are documented on the Microsoft Documentation.

We are going to use YAML which is in the repository.

- main

  vmImage: 'ubuntu-latest'

- task: [email protected]
    rootFolderOrFile: '$(Build.SourcesDirectory)/www'
    archiveType: 'zip'
    replaceExistingArchive: true
- task: [email protected]

On the pipline select Github YAML. You will then be asked to select the github and authorise permissions to github.
In the next screen select 'Existing Azure Pipelines YAML file', select Branch 'main' and path = '/pipelines.yml'.

You can save or Run the pipeline. If you run the pipeline it will run through the YAML file and the following jobs will run and create an artifact (a zip file in the drop area). We will use this in the next step to deploy to the storage account.


Step Three - Create a release and deploy the files to the storage static web app container.

Click on Releases, create Release. Select start empty.

Under Artifacts, click add Build and use the details from the build we used before...

Once added, if we enable CI trigger, so everytime a build is created from the build the release can be created.

Rename the Stage to Deploy to Azure Storage, Add 2 tasks to the agent,'Extract File' and  'Azure Blob Copy'. Examples of the settings are below . You will need to autorise your subscription in this step. The zip file from the drop is extract to \w\ and then the contents of \www\ are copied to the Azure Storage container $web.


>>> NOTE : I have change Task Version to 3* , as this threw an error.

You can manually run the pipelines to check it works , and if you commit a change to the github branch then it will trigger a release.




Umbraco Certified Expert