终极自动化 Hexo 工作流：GitHub Actions + Vercel 部署全攻略

发表于 更新于 分类于

在建立个人博客时，如何实现“写完即发布”的无感体验？本文将详细介绍一套专业的静态网站架构：通过 GitHub 私有仓库 存放源代码，利用 GitHub Actions 自动构建，并最终经由 Vercel 全球加速分发。

🛠 架构概览

這套工作流的核心在于“职责分离”与“自动化”：

  1. Source Repo (建议私有): 存放 Hexo 源文件（Markdown、主题配置）。
  2. GitHub Actions: 当源代码有变动时，自动执行 Hexo 构建。
  3. Static Repo (公开): 存放生成后的 HTML 静态文件，并开启 GitHub Pages 功能。
  4. Vercel: 监控 Static Repo，负责边缘加速与自定义域名绑定。

🌐 第一步：建立 GitHub Pages 静态仓库

GitHub Pages 是存放静态网页的最佳场所。

  1. 新建仓库：在 GitHub 上建立一个新的公开仓库（例如命名为 my-blog-output）。
  2. 开启功能：
    • 进入该仓库的 Settings -> Pages。
    • 在 Build and deployment 下，确保 Source 选择为 Deploy from a branch。
    • Branch 选择 main (或 master)，目录选 / (root)。
  3. 完成：此时 GitHub 会为你分配一个 https://<username>.github.io/<repo>/ 的网址。

📝 第二步：配置 GitHub Actions 自动化

在你的 源代码仓库 中建立 .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
name: Deploy Hexo Blog

on:
  push:
    branches:
      - main # 监听源代码主分支变动

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    
    steps:
      - name: Checkout Source Code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0 
      
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'       
          
      - name: Install Dependencies
        run: npm install
        
      - name: Generate Static Files
        run: npx hexo generate

      - name: Deploy to Static Repo
        uses: peaceiris/actions-gh-pages@v3 
        with:
          # 🔑 必须在 Secrets 中配置具有 repo 权限的 DEPLOY_TOKEN
          personal_token: ${{ secrets.DEPLOY_TOKEN }}
          
          # 🎯 指向你的静态仓库 (例如 username/my-blog-output)
          external_repository: YOUR_GITHUB_USERNAME/YOUR_STATIC_REPO_NAME
          
          publish_dir: ./public
          publish_branch: main 
          commit_message: "Auto Deployed: ${{ github.event.head_commit.message }}"

关键安全提示：

  • DEPLOY_TOKEN: 请在 GitHub Settings 生成一个 Personal Access Token (PAT)，勾选 repo 权限。
  • 将 Token 填入源代码仓库的 Settings -> Secrets and variables -> Actions 中。

⚡️ 第三步：Vercel 加速与域名绑定

为了获得更好的访问速度（特别是在国内）和自定义域名：

  1. 导入 Vercel：登录 Vercel 并链接你的 GitHub 账号，导入上述的 静态仓库。
  2. 设定域名：在 Vercel 的项目设定中加入你的域名（如 example.com）。
  3. 自动同步：每当 GitHub Actions 推送新内容到静态仓库，Vercel 会自动感应并完成边缘部署。

🦞 结语：AI 助理的加持

现在，我只需在本地使用 Obsidian 撰写 Markdown，通过龙虾助手（OpenClaw）将更新推送至 GitHub。剩下的所有编译、构建、发布过程全部由云端自动完成，真正实现了“专注写作，無視部署”。

本文由 Elric 的 不太聪明智能助理「小龍蝦 🦞」协助整理与发布。