Deploying Landing Pages Using GitHub Actions And Azure Static Web Apps

In this article, you will learn how to deploy and create a continuous integration in GitHub using GitHub actions and Azure static web apps.

First, we need a landing page or static site that only uses HTML, CSS, and JS.

In the GitHub repo, we need to create a workflow in the folder .github/workflows.

https://github.com/Mteheran/landingpagetoazure

My Workflow

In this workflow, we detect changes over the main branch and pull requests against this branch. In the property "app_location" you need to set the folder where your app is located or just use "/" if it is located in the base path.

name: Azure Static Web Apps for Static Sites

on:
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          app_location: "/union" # App source code path
          skip_app_build: true

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          action: "close"

We are using the secret AZURE_STATIC_WEB_APPS_API_TOKEN to deploy azure static web apps. After creating a new Azure static site, you just need to get the token to deploy the site.

In the settings of the project, you need to create this key, copying the value from Azure static web apps.

This is all the steps that you need to perform to have CI/CD in Github actions connected with Azure static web app.

After this setup you will deploy change automatically after a commit or merge in main branch. 

This is the sample site for this demo:

calm-bush-04ec74410.azurestaticapps.net/

You can check the repo in Github:

https://github.com/Mteheran/landingpagetoazure