使用 GitHub Actions 自動化部署 Hexo 部落格到 Azure Blob Storage

筆記
, , ,

前言

在現代網站開發中，自動化部署是一個非常重要的環節。本文將介紹如何使用 GitHub Actions 來自動化部署 Hexo 部落格到 Azure Blob Storage，實現推送程式碼即自動更新網站的效果。

什麼是 Azure Blob Storage 靜態網站託管

Azure Blob Storage 提供了靜態網站託管功能，讓您可以直接從儲存帳戶中託管靜態內容（HTML、CSS、JavaScript 和圖片檔案）。這是一個成本效益高且可擴展的解決方案，特別適合託管部落格和靜態網站。

優點

  • 成本效益：相比於傳統的網站託管服務，價格更便宜
  • 高可用性：Azure 提供 99.9% 的可用性保證
  • 全球分發：可以結合 Azure CDN 實現全球快速存取
  • 自動擴展：根據流量自動調整資源

設定 Azure Blob Storage

步驟 1：建立儲存帳戶

  1. 登入 Azure 入口網站
  2. 點擊「建立資源」
  3. 搜尋並選擇「儲存帳戶」
  4. 填寫基本資訊：
    • 訂用帳戶
    • 資源群組
    • 儲存帳戶名稱
    • 區域
    • 效能：標準
    • 備援：LRS（本地備援儲存體）

步驟 2：啟用靜態網站功能

  1. 在儲存帳戶中，選擇「靜態網站」
  2. 點擊「已啟用」
  3. 設定索引文件名稱：index.html
  4. 設定錯誤文件路徑：404.html
  5. 儲存設定

步驟 3：取得連接字串

  1. 在儲存帳戶中，選擇「存取金鑰」
  2. 複製「連接字串」（稍後在 GitHub Secrets 中使用）

設定 GitHub Actions

建立工作流程檔案

在您的 Hexo 專案根目錄中建立 .github/workflows/deploy.yml：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
name: Deploy Hexo Blog to Azure Blob Storage

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build Hexo site
        run: |
          npx hexo clean
          npx hexo generate

      - name: Deploy to Azure Blob Storage
        uses: azure/cli@v2
        with:
          inlineScript: |
            az storage blob upload-batch \
              --connection-string "${{ secrets.AZURE_STORAGE_CONNECTION_STRING }}" \
              --destination '$web' \
              --source './public' \
              --overwrite \
              --content-type 'text/html' \
              --pattern '*.html'
            
            az storage blob upload-batch \
              --connection-string "${{ secrets.AZURE_STORAGE_CONNECTION_STRING }}" \
              --destination '$web' \
              --source './public' \
              --overwrite \
              --exclude-pattern '*.html'

設定 GitHub Secrets

  1. 在 GitHub 專案頁面，點擊「Settings」
  2. 選擇「Secrets and variables」→「Actions」
  3. 點擊「New repository secret」
  4. 名稱：AZURE_STORAGE_CONNECTION_STRING
  5. 值：貼上從 Azure 複製的連接字串

優化建議

快取策略

為了提升建置速度，可以在工作流程中加入快取：

1
2
3
4
5
6
7
- name: Cache dependencies
  uses: actions/cache@v3
  with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
      ${{ runner.os }}-node-

內容類型設定

為不同檔案類型設定正確的 Content-Type：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
- name: Set content types for different file types
  run: |
    # HTML files
    az storage blob upload-batch \
      --connection-string "${{ secrets.AZURE_STORAGE_CONNECTION_STRING }}" \
      --destination '$web' \
      --source './public' \
      --pattern '*.html' \
      --content-type 'text/html' \
      --overwrite
    
    # CSS files
    az storage blob upload-batch \
      --connection-string "${{ secrets.AZURE_STORAGE_CONNECTION_STRING }}" \
      --destination '$web' \
      --source './public' \
      --pattern '*.css' \
      --content-type 'text/css' \
      --overwrite
    
    # JavaScript files
    az storage blob upload-batch \
      --connection-string "${{ secrets.AZURE_STORAGE_CONNECTION_STRING }}" \
      --destination '$web' \
      --source './public' \
      --pattern '*.js' \
      --content-type 'application/javascript' \
      --overwrite

監控和除錯

檢查部署狀態

  1. 在 GitHub 專案中點擊「Actions」頁籤
  2. 查看最新的工作流程執行狀況
  3. 點擊具體的執行可以查看詳細日誌

常見問題排除

連接字串錯誤

  • 確認 Azure 儲存帳戶的連接字串是否正確
  • 檢查 GitHub Secrets 中的設定

權限問題

  • 確認儲存帳戶已啟用靜態網站功能
  • 檢查 Azure CLI 的權限設定

檔案上傳失敗

  • 檢查檔案路徑是否正確
  • 確認 public 目錄下有生成的檔案

結論

通過 GitHub Actions 和 Azure Blob Storage 的組合，我們實現了一個高效、成本效益且易於維護的靜態網站部署解決方案。每次推送程式碼到 main 分支，都會自動觸發建置和部署流程，大大提升了開發效率。

這個方案特別適合：

  • 個人部落格
  • 技術文件網站
  • 公司官網
  • 產品展示頁面

參考資源