Hexo + Vercel 完全免费部署

2026-04-11 · 11 min read
网站

前提准备（本地环境）

  1. 安装必要工具：

    • Node.js：推荐 LTS 版本（20.x 或 22.x）。官网下载或用 nvm 安装。

    • Git：用于版本控制和推送到 GitHub。

    • Hexo CLI：全局安装 

      1
      npm install -g hexo-cli

  2. 创建 Hexo 项目（如果还没有）：

    1
    2
    3
    hexo init my-notes-blog          # 创建项目文件夹
    cd my-notes-blog
    npm install                      # 安装依赖

  3. 本地测试：

    1
    hexo server                      # 或 hexo s

浏览器打开 http://localhost:4000 查看效果。写笔记用 hexo new post "你的学习笔记标题"，生成 Markdown 文件在 source/_posts/ 文件夹。

  1. 推荐主题与自定义：

    • 安装主题（如 Next、Butterfly、ShokaX 等）：在 _config.yml 中设置 theme: 主题名，然后 npm install 对应依赖。
    • 你可以自己修改主题文件（themes/主题名/ 下的 layout、source 等文件夹）来定制样式、布局，适合学习笔记的简洁风格。
    • 图片建议放在项目根目录下的source/image/ 或使用免费图床（Markdown 中引用相对路径或绝对 URL）。

步骤 1：将项目推送到 GitHub（免费代码托管）

  1. 在 GitHub 创建一个公开仓库（推荐名字如 my-notes-blog 或 username.github.io）。

  2. 初始化 Git 并推送，我使用的是 vscode 图形化界面操作的，具体步骤看 这个链接

    注意：确保 .gitignore 文件存在（Hexo 默认有），避免上传 node_modules 和 public 文件夹（这些会在 Vercel 上自动生成）。

步骤 2：在 Vercel 上部署（核心步骤）

Vercel 对 Hexo 有良好自动检测支持，通常零配置即可。

方式一：通过 Web 界面导入（推荐新手）

  1. 访问 vercel.com 并使用 GitHub 账号登录（这样可以直接访问你的仓库）。
  2. 点击 Add New → Project（或直接访问 https://vercel.com/new）。
  3. 在 “Import Git Repository” 区域，搜索并选择你的 GitHub 仓库（my-notes-blog）。
  4. 点击 Import。
  5. Vercel 会自动检测这是 Hexo 项目：
    • Framework Preset：通常会自动选择 “Hexo” 或 “Other”。
    • Build Command：自动设为 hexo generate（如果没自动设置，手动改为 hexo generate）。
    • Output Directory：自动设为 public（Hexo 生成静态文件的目录，不要改）。
    • Install Command：通常是 npm install（可保留默认）。
  6. 点击 Deploy。Vercel 会自动安装依赖、构建站点并部署。
  7. 部署成功后，你会得到一个类似 https://my-notes-blog.vercel.app 的测试域名。点击即可访问你的博客！

步骤 3（可选，有自己的域名优先）：将自己的域名托管到cloudflare上

直接参考这篇文章：域名托管到cloudflare

步骤4：将域名绑定到 vercel

这种情况下，不需要把 Nameservers 改成 Vercel，只需在 Cloudflare 的 DNS Records 中添加 Vercel 要求的记录即可。整个过程免费，Vercel 会自动颁发 HTTPS 证书。

准备工作

  • 确保你的 Hexo 项目已在 Vercel 上成功部署（有 .vercel.app 测试域名可用）。
  • 登录 Vercel 账号（ https://vercel.com ）。
  • 登录 Cloudflare 账号（ https://dash.cloudflare.com ），进入你的域名仪表盘。

步骤 1：在 Vercel 中添加你的域名

  1. 进入你的 Hexo 项目仪表盘。
  2. 左侧菜单点击 Settings（设置）。
  3. 点击 Domains（域名）。
  4. 在输入框中输入你的域名：
    • 推荐方式（避免问题）：先添加 www 版本，例如 www.yourdomain.com，然后让 Vercel 自动重定向根域名。
    • 或者直接添加根域名 yourdomain.com。
  5. 点击 Add（添加）。
  6. Vercel 会显示 Invalid Configuration（配置无效），并在下方给出需要添加的 DNS 记录：
    • 对于根域名（yourdomain.com）：通常是 A 记录，指向 Vercel 的 IP（如 76.76.21.21 或 Vercel 显示的具体 IP）。
    • 对于 www 子域名：通常是 CNAME 记录，指向 Vercel 提供的地址（如 cname.vercel-dns.com 或项目专属的 d1xxxx.vercel-dns-xxx.com）。
  7. 复制 Vercel 显示的具体记录值（IP 和 CNAME 目标）。每个项目的 CNAME 可能略有不同，一定要复制 Vercel 当前显示的内容。

推荐配置（大多数用户这样操作）：

  • 添加 www.yourdomain.com（CNAME）。
  • 添加 yourdomain.com（A 记录）。
  • 在 Vercel Domains 设置中开启从 www 重定向到非 www（或反之）。

步骤 2：在 Cloudflare DNS 中添加记录（最关键）

  1. 进入 Cloudflare 仪表盘 → 选择你的域名 → 点击 DNS（左侧菜单）。

  2. 点击 Add record（添加记录）。

  3. 添加根域名 A 记录（适用于 yourdomain.com）：

    • Type（类型）：A
    • Name（名称）：@（代表根域名）
    • IPv4 address（内容）：粘贴 Vercel 提供的 IP（例如 76.76.21.21）
    • Proxy status（代理状态）：关闭（灰色云朵，显示 DNS Only）。
      重要：必须关闭代理，否则 Vercel 无法正确验证和颁发证书，可能会出现 525 错误或无法访问。
    • TTL：Auto 或 1 小时
    • 点击 Save 保存。

  4. 添加 www 子域名 CNAME 记录：

    • Type（类型）：CNAME
    • Name（名称）：www
    • Target（目标）：粘贴 Vercel 提供的 CNAME 值（例如 cname.vercel-dns.com）
    • Proxy status：关闭（DNS Only）
    • TTL：Auto
    • 点击 Save 保存。

  5. （可选但推荐） 如果有其他旧记录冲突，先删除或暂停与域名相关的旧 A/CNAME 记录（尤其是指向其他主机的记录）。

注意：

  • 不要开启 Cloudflare 的 Proxy（橙色云朵），否则流量会先经过 Cloudflare，再去 Vercel，容易导致 SSL 问题。
  • 如果 Vercel 要求 TXT 验证记录（域名已被其他 Vercel 项目使用时），也同样在 Cloudflare 添加 Type: TXT 的记录。

步骤 3：返回 Vercel 验证配置

  1. 回到 Vercel 的 Domains 页面，点击 Refresh 或等待几分钟后刷新。
  2. 当记录显示 Valid Configuration（绿色有效）时，表示 DNS 已正确解析。
  3. Vercel 会自动开始颁发 SSL 证书（免费 Let’s Encrypt），通常几分钟到 30 分钟完成。
  4. 如果有 “Pre-generate SSL Certificates” 按钮，可以点击提前生成。

步骤 4：测试与等待 DNS 生效

  • DNS 传播时间：
    • 子域名（www）：通常 5–30 分钟
    • 根域名：可能 30 分钟到几小时（最长 48 小时）
  • 测试方法：
    • 用浏览器访问 https://yourdomain.com 和 https://www.yourdomain.com。
    • 使用工具检查解析：https://www.whatsmydns.net/ 输入你的域名查看 A/CNAME 是否指向正确值。
    • 清空浏览器缓存或用隐身模式测试。
  • 访问成功后，你的 Hexo 博客就会通过自定义域名显示，HTTPS 自动启用。

额外优化与常见问题处理

  • 重定向：在 Vercel Domains 设置中，为 www 和非 www 配置 Redirect（避免重复内容影响 SEO）。
  • 中国访问优化：Cloudflare + Vercel 组合本身速度不错（Cloudflare 边缘节点多）。如果你想进一步加速，可以后续开启 Cloudflare 的某些缓存功能，但保持 Proxy 为 DNS Only。
  • SSL 问题（常见 525 错误）：
    • 确认所有记录的 Proxy 都是 DNS Only。
    • 在 Cloudflare SSL/TLS 设置中，将加密模式设为 Full（而非 Full Strict），或按照 Vercel 官方建议调整。
  • 如果验证一直失败：
    • 检查记录是否完全匹配 Vercel 当前显示的值（有时 Vercel 会更新 IP）。
    • 删除后重新添加记录。
    • 用 dig 命令检查解析（终端输入 dig yourdomain.com）。
  • CLI 方式（可选，适合开发者）：
    1
    2
    vercel domains add yourdomain.com
    vercel domains inspect yourdomain.com   # 查看所需记录

绑定成功后，你的 Hexo 学习笔记博客就拥有了独立自定义域名，访问更专业且全球可用。

步骤 5：后续更新与写作流程（超级方便）

  1. 在本地写笔记：hexo new "笔记标题" → 编辑 Markdown 文件。
  2. 本地预览：hexo s。
  3. 更新代码，推送到GitHub上：
  4. 自动部署：推送后，Vercel 会自动检测变更 → 重新构建 → 更新网站（通常 30 秒内完成）。

无需手动运行 hexo generate 并上传，Git push 就是部署！