导读：你可以把这篇当成 Hexo 部署到 Vercel 的流程来用。本地博客跑起来后，下一步是部署、验证构建产物、绑定域名和确认 sitemap，而不是只点击 Deploy。

系列文章导航

  1. Hexo + Butterfly 博客搭建指南(一)：本地环境配置与运行
  2. Hexo + Butterfly 博客搭建指南(二)：部署到 Vercel
  3. Hexo + Butterfly 博客搭建指南(三)：评论系统与功能扩展
  4. Hexo + Butterfly 博客搭建指南(四)：常见问题汇总

官方来源与核验规则

优先看 官方来源：

核验规则：免费额度、构建命令、自定义域名和 HTTPS 以 Vercel 官方文档为准；速度和地区访问必须自己测试，不写固定 ping 数字当通用结论。

为什么选 Vercel？

免费的部署平台不少，GitHub Pages、Cloudflare Pages、Netlify 等等。我最后选 Vercel，主要是因为它的 GitHub 集成和 Hexo 静态站部署体验比较省心。

我的使用体验

  • GitHub 集成顺：推送后自动构建。
  • 自定义域名方便：域名和 HTTPS 配置路径清晰。
  • 构建日志清楚：Hexo 构建失败时能看到具体输出。
  • 静态站适配好：Hexo 生成 public/ 后即可托管。

和其他平台对比

特性VercelCloudflare PagesGitHub Pages
静态站托管适合适合适合
GitHub 自动部署支持支持支持
自定义域名支持支持支持
HTTPS支持支持支持
访问速度需要实测需要实测需要实测

不同地区、运营商和 CDN 节点都会影响速度，不建议用单次 ping 当长期结论。更多选择框架可看 免费部署平台怎么选。

准备工作

GitHub 账号

如果还没有 GitHub 账号，先去注册一个：https://github.com

Git 仓库

确保你的博客已经用 Git 管理了，并且主题是用 Git Submodule 添加的。

检查 Git 仓库：

1
2
# 在博客根目录执行
git status

如果提示 “fatal: not a git repository”，说明还没初始化 Git：

1
2
3
git init
git add .
git commit -m "Initial commit"

检查 Git Submodule：

1
git submodule status

应该能看到类似这样的输出：

1
+abc1234 themes/butterfly (v5.5.4)

如果没有，需要回到 本地环境配置与运行 查看如何添加 Git Submodule。部署完成后，可以继续配置 评论系统与功能扩展。

部署到 Vercel

注册 Vercel

去 https://vercel.com，直接用 GitHub 账号登录就行。

导入项目

首次使用 Vercel，会看到 “Import Git Repository” 页面，让你选择 Git 提供商。

  • 点 “Continue with GitHub” 授权连接（也可以用 GitLab 或 Bitbucket）
  • 按照提示完成授权
  • 在 “Import Git Repository” 中找到你刚刚上传的项目
  • 点 “Import”

配置项目

Vercel 会自动识别这是 Hexo 项目，啥也不用改，直接点 Deploy 就行。

Vercel 的 Hexo 预设会自动配置好：

  • Build Command: npm install && hexo generate
  • Output Directory: public
  • Install Command: npm install

开始部署

点 “Deploy”，然后等着就行。

部署成功后，Vercel 会显示 “Next Steps” 页面，上面有几个选项：

  • Instant Previews - 推送新分支可以即时预览
  • Add Domain - 添加自定义域名到你的项目
  • Enable Speed Insights - 跟踪用户访问体验

底部有一个 “Continue to Dashboard” 按钮, 点击后进入 Vercel 的仪表盘页面。
你也可以点 “Add Domain” 配置自定义域名。

部署成功后，你会看到一个 *.vercel.app 的域名，比如：

1
https://my-blog.vercel.app

打开这个链接，就能看到你的博客了！🎉

这里有两个选择：

  1. 不配置域名 - 直接点 “Continue to Dashboard”，使用免费的 *.vercel.app 域名
  2. 配置自定义域名 - 点 “Add Domain”，配置自定义域名，具体配置步骤看下面

配置自定义域名（可选）

准备域名

你得先有个域名，可以从这些地方买：

  • 阿里云
  • 腾讯云
  • Namecheap
  • GoDaddy

在 Vercel 里添加域名

部署完成后，Vercel 列表中有一个 “Add Domains” 的按钮。

  • 点 “Add Domains” 跳转到一个新页面
  • 在上面找到 “Add Existing”（添加已有域名）
  • 输入你的域名
  • 点 “Save”

配置 DNS 记录

Vercel 会提示你需要配置的 DNS 记录。

www 子域名用 CNAME：

在你的域名 DNS 管理后台加一条记录：

1
2
3
4
类型: CNAME
主机记录: www
记录值: cname.vercel-dns.com
TTL: 自动

等 DNS 生效

DNS 记录通常需要几分钟到几小时才能生效。你可以在 Vercel 里看到状态变化：

  • ⏳ Pending（等待中）
  • ✅ Valid（已验证）

生效后，访问你的自定义域名就能看到博客了。

关于 HTTPS

Vercel 会自动给自定义域名配 HTTPS，不用你操心。

自动化部署流程

配置好后，以后更新博客就特别简单了。

日常更新流程

写新文章：

1
hexo new "新文章标题"

编辑文章内容：

用你喜欢的编辑器打开 source/_posts/ 下的新文件，开始写作。

提交并推送：

1
2
3
git add .
git commit -m "发布新文章：新文章标题"
git push

等 Vercel 自动部署：

推送后，Vercel 会自动部署你的代码。

整个过程大概 1-2 分钟，全自动完成，不用你管！

部署完成后，访问你的博客就能看到新文章了。

性能优化建议

启用图片压缩：

装个图片压缩插件：

1
npm install hexo-imagemin --save

用 WebP 格式：

把图片转成 WebP 格式，体积能减少 50% 以上。

Gzip 压缩：

Vercel 自动启用 Gzip 压缩，不用你管。

少用第三方脚本：

尽量减少外部 JavaScript 和 CSS 的引用，加载会更快。

总结

好了，到这里你的博客就已经成功部署到 Vercel 了！

接下来可以做什么：

  • 配个评论系统（Waline、Disqus 之类的）
  • 加点统计分析（Google Analytics、百度统计）
  • 优化 SEO（sitemap、robots.txt）
  • 定制主题样式
  • 写更多好内容

祝你的博客越来越好！🎉