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"
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 ==…Additional Resources / Info
Link to the template (union): https://www.designbombs.com/freebie/union/
Top comments (0)