使用 Azure 靜態 Web 應用服務免費部署 Hexo 部落格

2022 年 7 月 22 日
筆記
Azure

一.前言

最近在折騰 Hexo 部落格，試了一下 Azure 的靜態 Web 應用服務，發現特別適合靜態文檔類型的網站，而且具有免費額度，支援綁定域名。本文只是以 Hexo 作為示例，其他類型的框架也是支援的。

流程：

整個流程完全自動化，免費。並且訪問具有不錯的速度，演示：//zhiqiang.li

二.環境準備

將會以標準的 Hexo 部落格來作為演示，如果還不會使用 Hexo 部落格，可以閱讀我前面幾篇文章。

三.Azure 靜態 Web 應用

1.創建

訪問 //portal.azure.com/ 登錄 Azure，如果沒有賬戶可以去註冊一個。

找到靜態 Web 應用服務。

計劃類型選擇：免費

區域選擇：East Asia（香港）

部署詳細資訊可以直接選擇 Github，然後選擇對應的倉庫，Azure 會自動在倉庫里設置 Github Actions，本文為了演示就選擇其他，在創建後手動配置。

2.配置

在你的部落格根目錄下創建 .github/workflows目錄，然後創建 github action 文件: static-web-app.yml。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - master

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push'
    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: '/'
          output_location: 'public'
          app_build_command: 'npm run deploy'

3.配置 SECRET

進入你的部落格倉庫 Settings => Security => Secrets => Actions

新建一個 Secret，名稱 AZURE_STATIC_WEB_APPS_API_TOKEN

令牌在 Azure 獲取：

四.測試

現在 push 任意 commit 都會觸發 Github Actions 部署你的部落格

可以訪問 Azure 提供的 URL 來訪問

五.自定義域

訪問設置 => 自定義域，可以配置自己的域名

六.額度

關於免費額度如下

Tags: Azure