DEV Community

Miguel Teheran
Miguel Teheran

Posted on

1

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"



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/

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more