十分鐘用 GiteeGo + OSS 部署 Hexo 博客

前言

• Hexo 是一款基於 Node.js 的靜態博客框架，依賴少易於安裝使用，同時擁有着衆多插件和主題，支持 Git、雲主機、對象存儲等方式部署發佈。

• Gitee Go 是 Gitee 推出的 CI/CD(持續構建與集成)服務。用戶可以通過自定義構建流程，實現構建集成自動化。

在本實戰案例中，我們將基於 Gitee Go + Hexo + 對象存儲 的組合，實現 Hexo 博客的自動化部署發佈。

環境準備

本次實戰基於 Gitee Go + Hexo + 對象存儲，因此需要準備如下內容：

• 在 Gitee 上創建一個博客倉庫並開通 Gitee Go
• 一個 阿里雲或騰訊雲 的 RAM 帳號，並開通對象存儲（OSS/TOS）服務，本案例中以 Aliyun OSS 爲例，通過該賬號創建對象存儲和子賬號，獲得以下內容
  • bucket: 對象存儲 Bucket 名稱
  • region: 對象存儲地域ID（regionID）
  • secretId: RAM 帳號的 AccessKey ID
  • secretKey: RAM 帳號的 AccessKey Sercret
• 一個通過 ICP 已備案域名

體驗和搭建過程

在本次實戰中，你可以根據已有的文檔和教程自己搭建 Hexo 站點，並結合 Gitee Go 發佈部署 Hexo 到 對象存儲，也可以按照以下步驟，通過 Fork 本倉庫案例。快速體驗 Gitee Go + Hexo 博客自動部署的便利。

1. 通過 Gitee Go 活動頁面 領取構建時長。
2. Fork 此倉庫，通過倉庫導航「DevOps」菜單找到並開通 Gitee Go。
3. 配置 阿里雲 OSS 或 騰訊雲 TOS 對象存儲。
4. 配置 阿里雲 或 騰訊雲 相關 RAM 帳號。
5. 通過倉庫「管理」->「環境變量管理」添加環境變量內容。
6. 向倉庫內添加任意一個文件並提交，觸發流水線部署博客。

Hexo 快速入門

Hexo 的使用和調試 基於 Node.js，通過 npm install -g hexo && npm install -g hexo-cli 可以將 Hexo 全局安裝到系統中調用。也可以通過 npm install hexo --save 將 Hexo 集成在當前的項目中。相關 Hexo 命令學習可以通過訪問 Hexo快速入門 進行學習瞭解

Hexo 使用 Markdown 語法進行編寫，支持常見的 Markdown 語法。

領取 Gitee Go 免費構建時長

通過訪問 Gitee Go 活動頁面，選擇相應需要領取時長的 個人/企業 並領取 500 分鐘構建時長

配置 OSS 存儲

創建 OSS Bucket

通過訪問阿里雲 OSS 控制檯 https://oss.console.aliyun.com/ ，輸入 Bucket 名稱並選擇一個地域，完成 OSS Bucket 創建。通過 OSS Region和Endpoint對照表 獲得對應的 RegionID

Bucket 靜態頁面設置

訪問對應 OSS Bucket，通過「基礎設置」->「靜態頁面」將 OSS Bucket 配置成靜態網站託管模式。默認首頁和默認 404 頁 設置爲 index.html 。

綁定自定義域名

根據阿里雲 【升級】8月13日OSS網頁類型文件訪問返回Header策略調整通知 ，如果希望使用 OSS 作爲靜態網站主站，需要綁定一個已備案的域名。

訪問對應 OSS Bucket，通過「傳輸管理」->「域名管理」，輸入博客站點的域名，此處以我的博客站點 normalcoder.com 爲例，如果域名使用阿里雲的域名解析服務，還可以直接勾選「自動添加 CNAME 記錄」以完成自動添加 DNS 解析配置。

配置完成後，可以通過頁面配置更多如 CDN 加速、域名SSL證書 等內容。

完成配置後，通過 nslookup 可以查看 DNS 解析情況。

配置相關 RAM 賬號與授權

現在大多數雲服務廠商的服務都可以通過 API 的形式調用，使用 Gitee Go 發佈博客到 Aliyun OSS 需要開通相應權限的 RAM 帳號，獲得對應的 AccessKey 和 SercretKey。

通過訪問阿里雲 RAM 訪問控制檯 https://ram.console.aliyun.com/users ，創建並分配一個 RAM 帳號，獲得對應的 AccessKey ID 和 AccessKey Sercret。

通過分配 AliyunOSSFullAccess 獲得分配到 OSS 讀寫權限。

回到 OSS Bucket，通過「權限管理」->「Bucket 授權策略」，將對應的 RAM 帳號添加到 Bucket 授權列表中，賦予「完全控制」權限。

配置環境變量

訪問並 Fork Hexo OSS Deploy 示例倉庫，通過倉庫「管理」—>「環境變量設置」，配置對應的環境變量，參考下表（此處變量信息爲下文流水線配置使用，可以參考下文調整變量命名）。

變量名	變量含義和對應取值
CLOUD	固定值 aliyun/tencent，本文實例填寫 aliyun
REGION	存儲服務所在區域，上文提及的 regionID
BUCKET	存儲服務的 BUCKET 名稱
SECRET_ID	RAM SecretID，對應雲服務商的 AccessKey ID
SECRET_KEY	RAM SecretKey，對應雲服務商的 AccessKey Sercret
THEME	所使用的主題，默認建議配置 landscape，示例項目中包含：landscape/Chic/icalm/jacman 四個主題可選
SITE	部署的自定義域名，文中示例爲 normalcoder.com

開通 Gitee Go

通過倉庫導航「DevOps」菜單找到並開通 Gitee Go。

回到倉庫中提交任意一個文件。觸發流水線。即可觸發完成部署。部署效果預覽如下：

流水線配置結構和字段說明

本實戰案例中，流水線配置文件存在於 ./workfolow/deploy.yml，具體內容和字段說明如下：

# ========================================================
# 基於 aliyun OSS / tencent COS 構建部署 Hexo 靜態網站示例
# 功能：通過 Node 編譯構建 Hexo 項目並部署到 OSS / COS
# ========================================================
name: hexo-oss-deploy                      # 定義一個唯一 ID 標識爲 hexo-oss-deploy ，名稱爲「 Hexo 部署(OSS) 」的流水線
displayName: 'Hexo 部署(OSS)'
triggers:                                  # 流水線觸發器配置
  push:                                    # 設置 master 分支 在產生代碼 push 時精確觸發（PRECISE）構建
    - matchType: PRECISE
      branch: master
commitMessage: ''                          # 通過匹配當前提交的 CommitMessage 決定是否執行流水線
stages:                                    # 構建階段配置
  - stage:                                 # 定義一個 ID 標識爲 deploy-stage ,名爲「 Deploy Stage 」的階段
      name: deploy-stage
      displayName: 'Deploy Stage'
      failFast: false                      # 允許快速失敗，即當 Stage 中有任務失敗時，直接結束整個 Stage
      
      steps:                               # 構建步驟配置
        - step: npmbuild@1                 # 採用 npm 編譯環境
          name: deploy-step                # 定義一個 ID 標識爲 deploy-step ,名爲「 Deploy Step 」的階段
          displayName: 'Deploy Step'
          inputs:                          # 構建輸入參數設定
            nodeVersion: 14.15             # 指定 node 環境版本爲 14.15
            goals: |                       # 安裝依賴，配置相關主題、部署參數併發布部署
              node -v
              npm -v
              npm install
              npm run config url $SITE
              npm run config theme $THEME
              npm run config deploy.cloud $CLOUD
              npm run config deploy.bucket $BUCKET
              npm run config deploy.region $REGION
              npm run config deploy.secretId $SECRET_ID
              npm run config deploy.secretKey $SECRET_KEY
              npm run clean
              npm run deploy

---

附同內容視頻教程：https://www.bilibili.com/video/BV1Xv41147EL

---