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 lading 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.

 yml
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.

Submission Category:

[Note]: # DIY Deployments

Yaml File or Link to Code

Mteheran / landingpagetoazure

This is a simple demo of a landing page published in azure static web apps

Landing page to azure

This is a simple demo of a landing page published in azure static web apps

Site in azure static web apps https://calm-bush-04ec74410.azurestaticapps.net

YML file

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 ==

…

View on GitHub

Additional Resources / Info

Link to the template (union): https://www.designbombs.com/freebie/union/