#100DaysOfCode - Day 89: Github Actions to Azure Static Sites

2 mins

« #100DaysOfCode - Day 88: Training + Operations

#100DaysOfCode - Day 90: Jekyll Markdown Videos »

#100Days

Today, I’ve been playing around with a Github/Azure integration that’ll enable us to use a Github repository for a custom Azure website. The overall integration for using github actions was surprisingly simple.

Azure has OAuth 2.0 setup that enables you to hook into the Github repository yourself, and it sets up a majority of the CI/CD for you. Azure will:

Add the msftgits user to have access to your repository
Create below .yml file, which triggers a GitHub action on push.

name: Azure Static Web Apps CI/CD

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: Set up Ruby
        uses: ruby/setup-ruby@v1.59.1
        with:
          ruby-version: 2.6
      - name: Install dependencies
        run: bundle install
      - name: Jekyll build
        run: jekyll build
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: $
          repo_token: $ # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/_site" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######

  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@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: $
          action: "close"

If you navigate to the site https://polite-sky-0d526af10.azurestaticapps.net/, you’ll be able to see our site!

Happy coding!

Written on February 11, 2021