Hexo + Butterfly 博客搭建指南(二)：部署到 Vercel

导读：本地博客跑起来后，下一步就是把它放到网上。本文详解如何部署到 Vercel。

系列文章导航

为什么选 Vercel？

说实话，免费的部署平台不少，GitHub Pages、Cloudflare Pages、Netlify 等等。我最后选 Vercel，主要是因为它真的太省心了。

我的使用体验

完全免费 - 个人博客随便用，不用担心哪天突然收费
自动 HTTPS - 不用自己搞证书，Vercel 自动帮你配好
速度快 - 全球 CDN，我 ping 了一下大概 80ms 左右，比 Cloudflare Pages 的 200ms 快不少
自动部署 - 推送到 GitHub 后，Vercel 自动构建部署，不用手动操作
配置简单 - 几乎不用怎么设置，它自己就能识别 Hexo 项目

和其他平台对比

特性	Vercel	Cloudflare Pages	GitHub Pages
价格	免费	免费	免费
构建速度	快	快	慢
国内访问	✅ 优秀（~80ms）	⚠️ 较慢（~200ms）	⚠️ 一般
自定义域名	✅ 支持	✅ 支持	✅ 支持
自动 HTTPS	✅ 自动	✅ 自动	需配置

我自己实际测试下来，Vercel 在国内的访问速度确实比 Cloudflare Pages 快。当然，每个人的网络环境可能不一样——我之前写过一篇免费部署平台评测，如果你还在纠结选哪个，可以参考。

准备工作

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

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

这里有两个选择：

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

配置自定义域名（可选）

准备域名

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

阿里云
腾讯云
Namecheap
GoDaddy

在 Vercel 里添加域名

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

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

配置 DNS 记录

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

www 子域名用 CNAME：

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

类型: 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）
定制主题样式
写更多好内容

祝你的博客越来越好！🎉