DEV Community

Miguel Teheran
Miguel Teheran

Posted on

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.

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"

Enter fullscreen mode Exit fullscreen mode

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.
Azure static web app deploy token

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

Submission Category:

[Note]: # DIY Deployments

Yaml File or Link to Code

GitHub logo 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 ==
Enter fullscreen mode Exit fullscreen mode

Additional Resources / Info

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

Discussion (0)