第六部分：多样化部署方案

第一章： 多样化部署方案：从本地到云端

摘要: 博客的生命力在于其可被公开访问。本章将全面解析 Hexo 博客的多种部署方案，从最经典的 Git 手动部署到现代化的自动化持续集成/持续部署 (CI/CD) 流程。我们将深入探讨各大主流免费托管平台的优劣，并以 Vercel 为核心，提供一套从基础部署、错误排查、环境变量配置到自定义域名国内加速的完整实战指南，旨在帮助您选择并构建一套高效、稳定且自动化的部署工作流。

在本章中，我们将踏上将本地博客发布至全球网络的旅程：

  1. 首先，我们将完成所有部署前的准备工作，安装并配置核心的 Git 部署插件。
  2. 接着，我们将对市面上主流的免费托管平台进行横向对比，帮助您根据自身需求做出明智选择。
  3. 然后，我们将亲手实践传统的 Git Push 部署模式，以最经典的 GitHub Pages 为例，掌握手动部署的全过程。
  4. 最后，我们将重点转向代表未来的自动化 CI/CD 部署模式，以 Vercel 为例，学习如何搭建一个仅需 git push 即可自动更新的现代化工作流，并解决其中的常见问题与性能瓶颈。

1.1. 部署前置：Git 部署插件配置

痛点背景: Hexo 本身只负责在本地生成静态网站文件（HTML, CSS, JS），它并不知道如何将这些文件上传到远程服务器。我们需要一个“搬运工”来完成这个任务。

解决方案: 对于最常见的通过 Git 进行部署的场景，Hexo 官方提供了 hexo-deployer-git 插件。这个插件会把本地 public 目录下的所有静态文件，通过 Git 命令推送到您指定的远程仓库。

  1. 安装插件:
    在您的 Hexo 项目根目录下，执行以下命令：

    1
    npm install hexo-deployer-git --save

  2. 理解部署配置:
    安装成功后，我们需要在项目根目录的 _config.yml 文件中指明“搬运”的目的地。找到或添加文件末尾的 deploy 配置段：

    1
    2
    3
    4
    5
    6
    7
    # Deployment - _config.yml
    # Docs: https://hexo.io/docs/one-command-deployment.html
    deploy:
      type: git
      repo: <repository_url>   # 您的 Git 仓库 URL
      branch: <branch_name>  # 您要部署到的分支
      message: "feat: Site updated by Hexo" # 可选：自定义 Git 提交信息
    • type: 必须是 git，告诉 Hexo 使用我们刚安装的插件。
    • repo: 远程 Git 仓库的地址。可以是 HTTPS 或 SSH 格式。
    • branch: 静态文件将被推送到的目标分支。例如，对于 GitHub Pages，通常是 main 或 gh-pages。

这个配置是后续所有手动部署方案的基础。配置完成后，只需运行 hexo deploy (或 hexo d) 命令，Hexo 就会自动完成生成和推送两个步骤。

1.2. 部署方案概览：选择最适合的托管平台

痛点背景: 市面上有众多免费的静态网站托管平台，它们在访问速度、自动化程度、功能特性上各有千秋。对于初学者而言，如何选择一个最适合自己的平台是一个难题。

解决方案: 我们对几个主流的免费平台进行了对比，您可以根据下表的核心特点进行决策。

平台国内速度特点与建议
GitHub Pages较慢(经典之选) 与 GitHub 深度整合，稳定可靠。适合开源项目文档或不介意国内访问偶尔缓慢的用户。是学习手动部署的最佳起点。
Vercel极快 (优化后)(强烈推荐) 自动化部署的行业标杆。提供极致流畅的开发体验、全球CDN网络和强大的自定义功能。是追求高性能和现代工作流的首选。
Netlify较快(功能全面) 自动化部署的另一强者。提供丰富的附加功能（如表单处理、A/B测试），免费额度友好，是 Vercel 的有力竞争者。
Coding Pages快(国内优化) 基于腾讯云 CDN，部署流程类似 GitHub Pages，是寻求良好国内访问速度的优秀备选。
Gitee Pages快(国内备选) Gitee 提供的服务，但免费版需要手动点击更新，自动化程度最低，更适合对更新频率要求不高的场景。

Prorise 推荐: 对于追求极致自动化体验和全球高性能访问的现代开发者，我们强烈推荐 Vercel。虽然其默认域名在国内访问不佳，但通过简单的配置即可完美解决，实现速度与效率的统一。

1.3. 传统部署实践：GitHub Pages

痛点背景: 我想快速、免费地将我的博客发布上线，并且希望整个过程尽可能简单，该如何操作？

解决方案: 使用 Hexo 插件与 GitHub Pages 配合，实现经典的手动部署流程。

  1. 创建 GitHub 仓库:

    • 登录 GitHub，创建一个新的公开 (Public) 仓库。

    • 仓库名称必须遵循特殊格式：YourGitHubName.github.io。请将 YourGitHubName 替换为您自己的 GitHub 用户名。

  2. 配置 _config.yml:

    • 打开您博客根目录下的 _config.yml 文件，修改 deploy 部分：
    1
    2
    3
    4
    5
    6
    7
    # _config.yml
        deploy:
          type: git
          # 推荐使用 SSH 地址，需要预先配置好 GitHub SSH Key
          repo: git@github.com:YourGitHubName/YourGitHubName.github.io.git
          # 部署分支，取决于您仓库的默认分支，通常是 main
          branch: main

  3. 一键生成并部署:

    • 在 Hexo 项目根目录的终端中，执行以下命令：
    1
    hexo clean && hexo g -d
    • hexo clean: 清理旧的缓存和生成的 public 目录。
  • hexo g -d: g 是 generate 的缩写，-d 是 deploy 的缩写。该命令会先生成最新的静态文件，然后自动将其部署到您配置的 GitHub 仓库。

  1. 确认 GitHub Pages 设置:

    • 部署成功后，进入您的 YourGitHubName.github.io 仓库页面。
    • 点击 Settings -> Pages。
    • 确保构建和部署的来源 (Source) 设置为 Deploy from a branch。
    • 确保分支 (Branch) 设置为您部署的分支（如 main）和 /(root) 目录。

首次部署后，GitHub Pages 可能需要几分钟才能生效。部署成功后，您的博客即可通过 https://YourGitHubName.github.io 访问。

1.4. 自动化部署实践：Vercel CI/CD

痛点背景: 手动执行 hexo g -d 流程虽然可行，但较为繁琐。每次修复一个错别字都需要在本地完整地生成、部署一次。此外，像 Algolia 搜索索引这类需要在部署后执行的命令，手动操作容易遗忘。更重要的是，如何安全地管理 API Key 等敏感信息？

解决方案: 采用基于 Git 的持续集成/持续部署 (CI/CD) 流程。我们将以 Vercel 为例，搭建一个现代化的工作流：您只需将文章源码 git push 到仓库，Vercel 便会自动完成后续所有构建、部署和集成任务。

1.4.1. 基础部署与构建命令修复

  1. 准备源码仓库: 确保您的 GitHub 仓库中存放的是 Hexo 的完整源文件（包含 source/, themes/, _config.yml, package.json 等），而不是 public 目录。
  2. 在 Vercel 中导入项目: 使用 GitHub 账号登录 Vercel，选择 Add New... -> Project，导入您的 Hexo 源码仓库。
  3. 修复常见构建错误: Vercel 会自动识别为 Hexo 项目，但首次部署通常会失败，并提示 hexo: command not found。
    • 原因: Vercel 的构建环境默认只知道执行 hexo generate，但没有安装 hexo 命令本身。
    • 修复: 在 Vercel 项目后台，进入 Settings -> General，找到 Build & Development Settings，覆盖 BUILD COMMAND 为：
      1
      npm install && hexo generate
      这条命令告诉 Vercel：在构建前，先执行 npm install 来安装 package.json 中定义的所有依赖（包括 Hexo），然后再生成静态文件。
  4. 重新部署: 保存设置，然后对失败的部署任务点击 Redeploy。成功后，您的自动化工作流便已建立。

1.4.2. 集成第三方服务：环境变量的应用

痛点背景: 如何在自动化流程中安全地使用 Algolia 的 Admin API Key 这类私密信息？直接写在 _config.yml 中并提交到公开仓库是极不安全的。

解决方案: 使用 Vercel 的环境变量功能。

  1. 在 Vercel 添加环境变量:

    • 进入项目 Settings -> Environment Variables。
    • 添加您的密钥，例如：
      • ALGOLIA_APP_ID: 你的 Application ID
      • ALGOLIA_API_KEY: 你的 Admin API Key
      • ALGOLIA_INDEX_NAME: 你的索引名

  2. 修改 _config.yml: 让 Hexo 从环境变量中读取密钥。

    1
    2
    3
    4
    5
    # _config.yml
    algolia:
      appId: process.env.ALGOLIA_APP_ID
      apiKey: process.env.ALGOLIA_API_KEY
      indexName: process.env.ALGOLIA_INDEX_NAME

  3. 更新构建命令: 在生成网站后，按条件执行索引命令。

    • 将 BUILD COMMAND 更新为：
      1
      npm install && hexo generate && if [ "$VERCEL_ENV" = "production" ]; then hexo algolia; else echo "Not in production, skipping Algolia indexing."; fi
    • 这条命令利用 Vercel 的系统变量 VERCEL_ENV，仅当部署到生产环境（即绑定了主域名的那次部署）时，才执行 hexo algolia 更新搜索索引，避免了在开发分支或预览部署时也执行此操作。

1.4.3. 绑定自定义域名与国内加速

  1. 在 Vercel 绑定域名: 进入项目 Settings -> Domains，添加您的自定义域名。Vercel 会引导您添加 A 记录或 CNAME 记录。

  2. 国内访问速度优化 (关键步骤):

    • 痛点: 直接使用 Vercel 官方推荐的 IP 地址或 CNAME，在国内访问速度可能非常慢。
    • 解决方案: 使用社区提供的、经过国内优化的 CNAME 接入点。
    • DNS 配置: 登录您的域名注册商，将 Vercel 要求的 DNS 记录，替换为以下 CNAME 记录：
      • 类型 (Type): CNAME
      • 主机/名称 (Host/Name): @ (代表根域名) 或 www
      • 值/指向 (Value/Points to): vercel.cdn.yt-blog.top

  3. 忽略 Vercel 警告:

    请忽略警告！ 配置完社区 CNAME 后，Vercel 后台会显示红色的 “Invalid Configuration” 警告。这是正常现象，因为我们的配置与 Vercel 官方推荐不符。判断成功的唯一标准是：您的网站能通过自定义域名快速访问。

  4. 配置 Vercel 缓存 (最终优化):
    为了让 CDN 效果最大化，我们在 Hexo 项目根目录下创建一个 vercel.json 文件，以强化缓存策略。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    {
      "headers": [
        {
          "source": "/(.*)",
          "headers": [
            {
              "key": "Cache-Control",
              "value": "public, s-maxage=86400"
            }, {
              "key": "Vercel-CDN-Cache-Control",
              "value": "max-age=3600"
            }
          ]
        }
      ]
    }

    将此文件提交到您的仓库，Vercel 会自动应用新的缓存规则，进一步提升网站加载速度。