这篇指南完整记录了一套零服务器费用的公网博客部署方案。核心思路是把三个角色分别交给专门的服务来承担：
| 环节 | 服务 | 作用 |
|---|---|---|
| 代码托管 | GitHub | 存储源码，版本管理，触发自动部署 |
| 构建与分发 | Vercel | 监听推送、自动构建、全球 CDN 加速 |
| 域名解析 | my.dnshe.com | 把自定义域名指向 Vercel 服务器 |
三者一旦打通，整个发布流程就变成一行命令：git push，其余全部自动完成。
准备工作
在开始之前，请先确认以下内容都已就绪：
- GitHub 账号：github.com 免费注册，用于托管仓库
- Vercel 账号：vercel.com 免费注册，个人项目免费额度充裕
- my.dnshe.com 账号：需要已有域名并将 DNS 服务器托管至此处
- 本地可运行的博客代码：Next.js、Astro、Hugo、纯静态 HTML 均可
关于费用：GitHub 免费计划支持无限公开仓库；Vercel 免费计划（Hobby）对个人博客完全够用，支持自定义域名、自动 HTTPS、每月 100GB 带宽；my.dnshe.com 的 DNS 解析服务本身免费，费用仅来自域名注册续费。
一、GitHub：创建仓库并推送代码
1.1 新建仓库
登录 GitHub，点击右上角头像旁的 + → New repository，填写以下信息：
- Repository name：例如
my-blog，建议全小写加连字符 - Visibility：Public 或 Private 均可，Vercel 两种权限都能导入
- Initialize this repository：不勾选，因为本地已有代码
点击 Create repository 完成创建。
1.2 本地初始化并推送
在项目根目录依次执行：
# 初始化 Git 仓库（已有 .git 目录可跳过）
git init
# 将所有文件加入暂存区
git add .
# 首次提交
git commit -m "feat: 初始化博客"
# 关联远程仓库（替换为你自己的用户名和仓库名）
git remote add origin https://github.com/你的用户名/my-blog.git
# 将本地分支重命名为 main（GitHub 新仓库默认分支名）
git branch -M main
# 推送并设置上游追踪
git push -u origin main推送成功后，刷新 GitHub 仓库页面，可以看到所有文件已经上传。
1.3 关于分支策略
Vercel 默认监听 main 分支的推送并触发生产部署。如果你希望在正式发布前有一个预览环境，可以额外创建 dev 分支：
git checkout -b dev
git push -u origin dev推送到 dev 时，Vercel 会生成一个独立的预览 URL（格式为 项目名-git-dev-你的用户名.vercel.app），不会影响生产站点。
二、Vercel：导入项目并完成首次部署
2.1 授权 GitHub 并导入项目
- 登录 vercel.com，点击 Add New → Project
- 在 Import Git Repository 面板中，选择 Continue with GitHub，完成 OAuth 授权
- 授权成功后，仓库列表中找到刚才创建的博客仓库，点击 Import
2.2 配置构建参数
导入时 Vercel 会自动识别框架类型并填充默认配置，通常不需要手动修改。以下是各常见框架对应的参数：
| 框架 | Framework Preset | Build Command | Output Directory |
|---|---|---|---|
| Next.js | Next.js | next build | .next |
| Astro | Astro | astro build | dist |
| Hugo | Hugo | hugo | public |
| 纯静态 HTML | Other | (留空) | .（根目录） |
Root Directory 通常保持为根目录（.）；如果你的博客代码在子目录中，需要在此处修改。
2.3 环境变量（可选）
如果项目运行时需要读取 API Key、数据库 URL 等配置，在 Environment Variables 面板添加：
NEXT_PUBLIC_SITE_URL = https://你的域名.com这些变量会在构建时注入，不会暴露在代码仓库中。
2.4 首次部署
点击 Deploy，Vercel 会拉取仓库代码、安装依赖、执行构建并发布。整个过程通常在 1 到 3 分钟内完成。
部署成功后，Vercel 会分配一个默认域名，格式为：
https://my-blog-用户名.vercel.app首次部署必须确认以下三点再继续配置域名：
.vercel.app默认地址能否正常访问- 样式、字体、图片等静态资源是否全部加载
- 博客文章列表页和详情页是否均可正常打开
若这些都正常，说明代码构建没有问题，可以进入下一步绑定自定义域名。
三、Vercel：绑定自定义域名
3.1 添加域名
进入项目后台，点击顶部导航 Settings → Domains，在输入框中填入你的域名，然后点击 Add。
域名格式可以是：
- 根域名：
example.com - 子域名：
blog.example.com、www.example.com
3.2 获取 DNS 记录值
添加域名后，Vercel 会在该域名下方显示需要配置的 DNS 记录，分两种情况：
子域名（推荐，配置最简单）
类型：CNAME
名称：blog（即子域名前缀）
值：cname.vercel-dns.com根域名（需使用 A 记录）
类型：A
名称：@（代表根域名本身）
值：76.76.21.21重要：始终以 Vercel 控制台当下显示的值为准。
76.76.21.21是 Vercel 的 Anycast IP，全球各节点共享同一地址，不会因地区不同而变化。
四、my.dnshe.com：配置 DNS 解析
4.1 进入域名的 DNS 管理
登录 my.dnshe.com，在控制台找到你的域名，点击 DNS 解析 或 解析管理，进入记录列表。
4.2 添加子域名 CNAME 记录
点击 添加记录，按如下参数填写：
| 字段 | 填写值 |
|---|---|
| 记录类型 | CNAME |
| 主机记录 | blog（或你选择的子域名前缀） |
| 记录值 | cname.vercel-dns.com |
| TTL | 600（10 分钟，生效快；稳定后可改为 3600） |
保存后，DNS 记录列表中会出现这条新记录。
4.3 根域名 A 记录（如有需要）
如果你希望根域名（example.com，不带任何前缀）也能访问，单独再添加一条：
| 字段 | 填写值 |
|---|---|
| 记录类型 | A |
| 主机记录 | @ |
| 记录值 | 76.76.21.21 |
| TTL | 600 |
注意：不要在同一主机记录上同时存在 CNAME 和 A 记录，二者会冲突。根域名使用 A 记录，子域名使用 CNAME，分开配置。
4.4 检查现有记录是否冲突
在添加之前，先查看记录列表中是否已有同名记录。例如：
- 若已有
blog的 A 记录 → 删除后再添加 CNAME - 若已有
@的 CNAME → 删除后再添加 A 记录 - 若存在泛解析
*指向其他地址 → 评估是否需要保留
五、等待 DNS 生效与 HTTPS 自动签发
5.1 生效时间
DNS 更改不会立即全球同步，生效时间取决于上游服务器的刷新周期：
- TTL 设为
600时，理论上 10 分钟内生效 - 实际受本地运营商缓存影响，部分地区可能需要 30 分钟到 1 小时
- 最长等待时间约为 24 小时（极少情况）
可以使用以下命令检查本机 DNS 是否已解析到正确地址：
# macOS / Linux
dig blog.example.com
# Windows
nslookup blog.example.com当返回结果中看到 cname.vercel-dns.com 或 76.76.21.21，说明本机 DNS 已生效。
5.2 Vercel 端验证域名
DNS 生效后，回到 Vercel Settings → Domains 页面，状态标签会从 Invalid Configuration 变为 Valid Configuration（带绿色对勾）。
此时 Vercel 会自动通过 Let's Encrypt 签发 TLS 证书，HTTPS 无需手动配置。整个签发过程通常在 DNS 验证成功后的 1 到 5 分钟内完成。
5.3 验证最终状态
在浏览器中访问你的自定义域名，确认：
- 地址栏显示
https://且无安全警告 - 博客页面内容与
.vercel.app默认域名一致 - 所有页面路由均可正常访问
六、后续更新流程
第一次打通之后，后续发布内容只需三步：
# 1. 将修改加入暂存区
git add .
# 2. 提交，写清楚本次变更内容
git commit -m "post: 新增文章《XXX》"
# 3. 推送到生产分支，Vercel 自动触发部署
git push推送后，Vercel 的构建通常在 1 到 2 分钟内完成，无需手动操作。可以在 Vercel 后台的 Deployments 标签页实时查看构建日志。
七、常见问题排查
7.1 Vercel 导入时找不到仓库
可能原因：GitHub OAuth 授权时选择了「Only select repositories」而未勾选目标仓库。
解决方法：进入 GitHub Settings → Applications → Authorized OAuth Apps → Vercel，找到 Repository Access，切换为「All repositories」或手动勾选对应仓库，然后回到 Vercel 重新导入。
7.2 .vercel.app 可以访问，自定义域名无法访问
按顺序检查：
- my.dnshe.com 中记录是否已保存（刷新页面确认）
dig或nslookup命令确认 DNS 是否已解析到正确地址- Vercel Domains 页面确认域名状态是否为
Valid - 确认浏览器没有缓存旧的 DNS 结果（可开无痕窗口测试）
7.3 域名在 Vercel 显示 Invalid Configuration
可能原因一：CNAME 目标值填写有误（例如多了空格或末尾加了点）。
可能原因二：在根域名上错误地使用了 CNAME 记录（根域名必须使用 A 记录）。
解决方法：删除错误记录，严格按照 Vercel 控制台显示的值重新填写。
7.4 HTTPS 证书一直未签发
通常说明 Vercel 的域名验证还未通过。确认 DNS 生效后，进入 Vercel Domains 页面，点击域名右侧的「Refresh」图标手动触发重新验证。若仍未签发，检查是否存在 CAA 记录限制了证书颁发机构。
7.5 推送后页面没有更新
- 确认
git push推送的是 Vercel 设置的生产分支（默认main） - 进入 Vercel Deployments 查看是否有新的构建记录
- 若构建失败，点开构建日志查看具体报错
7.6 某些页面返回 404
- 检查构建产物中是否真的包含该路由对应的文件
- 若项目依赖客户端路由（如 SPA），需要在
vercel.json中添加重写规则：
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}小结
三个角色各司其职：
- GitHub 是代码的真源，每次
git push都会通知 Vercel - Vercel 负责拉取、构建并通过全球 CDN 分发，不需要自己管服务器
- my.dnshe.com 只做一件事：把你的域名指向 Vercel 的地址
三端打通之后，日常维护只需要写文章、推送代码，其他全部交给自动化完成。