Use GitHub Actions workflow to deploy your static website in Azure Storage

Get started with GitHub Actions by using a workflow to deploy a static site to an Azure storage account. Once you have set up a GitHub Actions workflow, you will be able to automatically deploy your site to Azure from GitHub when you make changes to your site's code.

Note

If you are using Azure Static Web Apps, then you do not need to manually set up a GitHub Actions workflow. Azure Static Web Apps automatically creates a GitHub Actions workflow for you.

Prerequisites

An Azure subscription and GitHub account.

Note

It's common to use a content delivery network (CDN) to reduce latency to your users around the globe and to reduce the number of transactions to your storage account. Deploying static content to a cloud-based storage service can reduce the need for potentially expensive compute instance. For more information, see Static Content Hosting pattern.

Generate deployment credentials

To use Azure Login action with OIDC, you need to configure a federated identity credential on a Microsoft Entra application or a user-assigned managed identity.

Option 1: Microsoft Entra application

Option 2: User-assigned managed identity

Configure GitHub secrets

You need to provide your application's Client ID, Directory (tenant) ID, and Subscription ID to the login action. These values can either be provided directly in the workflow or can be stored in GitHub secrets and referenced in your workflow. Saving the values as GitHub secrets is the more secure option.

  1. In GitHub, go to your repository.

  2. Select Security > Secrets and variables > Actions.

    Screenshot of adding a secret

  3. Select New repository secret.

    Note

    To enhance workflow security in public repositories, use environment secrets instead of repository secrets. If the environment requires approval, a job cannot access environment secrets until one of the required reviewers approves it.

  4. Create secrets for AZURE_CLIENT_ID, AZURE_TENANT_ID, and AZURE_SUBSCRIPTION_ID. Copy these values from your Microsoft Entra application or user-assigned managed identity for your GitHub secrets:

    GitHub secret Microsoft Entra application or user-assigned managed identity
    AZURE_CLIENT_ID Client ID
    AZURE_SUBSCRIPTION_ID Subscription ID
    AZURE_TENANT_ID Directory (tenant) ID

    Note

    For security reasons, we recommend using GitHub Secrets rather than passing values directly to the workflow.

Add your workflow

  1. Go to Actions for your GitHub repository.

    GitHub Actions menu item

  2. Select Set up your workflow yourself.

  3. Delete everything after the on: section of your workflow file. For example, your remaining workflow may look like this.

    name: CI
    
    on:
        push:
            branches: [ main ]
    
  4. Rename your workflow Blob storage website CI and add the checkout and login actions. These actions will check out your site code and authenticate with Azure using the AZURE_CREDENTIALS GitHub secret you created earlier.

    name: Blob storage website CI
    
    on:
        push:
            branches: [ main ]
    
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
        - uses: azure/login@v1
          with:
              creds: ${{ secrets.AZURE_CREDENTIALS }}
    
  5. Use the Azure CLI action to upload your code to blob storage and to purge your CDN endpoint. For az storage blob upload-batch, replace the placeholder with your storage account name. The script will upload to the $web container. For az cdn endpoint purge, replace the placeholders with your CDN profile name, CDN endpoint name, and resource group. To speed up your CDN purge, you can add the --no-wait option to az cdn endpoint purge. To enhance security, you can also add the --account-key option with your storage account key.

        - name: Upload to blob storage
          uses: azure/CLI@v1
          with:
            inlineScript: |
                az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME>  --auth-mode key -d '$web' -s .
        - name: Purge CDN endpoint
          uses: azure/CLI@v1
          with:
            inlineScript: |
               az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
    
  6. Complete your workflow by adding an action to logout of Azure. Here is the completed workflow. The file will appear in the .github/workflows folder of your repository.

    name: Blob storage website CI
    
    on:
        push:
            branches: [ main ]
    
    jobs:
      build:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v3
        - uses: azure/login@v1
          with:
              creds: ${{ secrets.AZURE_CREDENTIALS }}
    
        - name: Upload to blob storage
          uses: azure/CLI@v1
          with:
            inlineScript: |
                az storage blob upload-batch --account-name <STORAGE_ACCOUNT_NAME> --auth-mode key -d '$web' -s .
        - name: Purge CDN endpoint
          uses: azure/CLI@v1
          with:
            inlineScript: |
               az cdn endpoint purge --content-paths  "/*" --profile-name "CDN_PROFILE_NAME" --name "CDN_ENDPOINT" --resource-group "RESOURCE_GROUP"
    
      # Azure logout
        - name: logout
          run: |
                az logout
          if: always()
    

Review your deployment

  1. Go to Actions for your GitHub repository.

  2. Open the first result to see detailed logs of your workflow's run.

    Log of GitHub Actions run

Clean up resources

When your static website and GitHub repository are no longer needed, clean up the resources you deployed by deleting the resource group and your GitHub repository.

Next steps