Deploy a blog using Lume and Azure static web apps

Welcome to my first post on my blog!

This blog is created using lume and deployed via Azure static web app.

What is Lume?

Lume is a static site generator from deno.

I used their blog template to create this blog.

I will list down the customizations and the deployment method using github CI/CD.

Customizations

  1. Multilanguage (For English/Korean posts)
  2. Katex (Mathmatics)
f(x)=abf(x) = \frac{a}{b}
  1. utteranc.es (Comments)

Deployment

This blog is deployed using Azure static web app. It is free so I use this function for my portfolio website: https://patrickyi.xyz

Setup Azure

There are three steps to be done on Azure:

  1. Create Static Web app
  2. Create custom domain
  3. Attach custom domain to the web app

Github CI/CD

The static website must be built before being deployed. I used Github CI/CD to create the pipeline tasks which is triggered to run when I submit a PR or push a commit.

Take the build process from build.yml and append it to our Azure CI/CD yml file.

Then the whole yml file is:

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:
      - name: Clone repository
        uses: actions/checkout@v3
        with:
          submodules: true

      - name: Setup Deno environment
        uses: denoland/setup-deno@v1
        with:
          deno-version: v1.x

      - name: Build site
        run: |
          deno task build --location=https://blog.patrickyi.xyz/

      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: # some secrets
          repo_token: # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match your 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 source code path - optional
          output_location: "/_site" # 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@v1
        with:
          azure_static_web_apps_api_token: ${{ some secret}}
          action: "close"

Then you will be able to deploy your lume blog to Azure static web app!

Comments