事件背景
在 ChenTingToDo 网站完成本地开发后，下一步目标是将项目真正部署到公网，让别人可以通过链接访问。
本地运行只能说明：
项目在自己电脑上能跑
但真正上线还需要完成：
代码托管
↓
云端构建
↓
自动部署
↓
公网访问
因此选择使用：
Vercel
作为部署平台。
为什么选择 Vercel
项目使用的是：
Next.js
而 Vercel 对 Next.js 支持非常完善。
主要优势：
- 自动识别 Next.js 项目
- 支持 GitHub 自动部署
- 不需要自己买服务器
- 不需要配置 Nginx
- 支持自定义域名
- 部署流程对新手相对友好
因此最终决定：
GitHub 托管代码
+
Vercel 自动部署网站
部署前准备
在正式部署前，需要先完成几个基础工作：
1. 本地项目整理
将项目目录统一整理为：
ChenTingToDo
确保项目结构清晰。
2. Git 初始化
在本地项目目录中初始化 Git：
git init
然后添加文件：
git add .
提交代码：
git commit -m "initial commit"
3. GitHub 创建仓库
在 GitHub 创建远程仓库。
然后将本地项目推送到 GitHub：
git remote add origin <仓库地址>
git branch -M main
git push -u origin main
完成后，GitHub 上已经能看到完整项目代码。
Vercel 导入项目
进入 Vercel 后，选择：
Add New Project
然后从 GitHub 导入：
ChenTingToDo
项目。
Vercel 自动识别为：
Next.js
项目。
遇到的问题一：Build Command 配置
项目中使用了：
Pagefind
作为搜索方案。
因此普通的：
next build
并不够。
需要在构建完成后生成搜索索引。
最终构建命令需要类似：
next build && npx pagefind --source out
这个问题让我意识到：
部署平台默认配置不一定完全适合自己的项目
需要根据项目实际功能调整 Build Command。
遇到的问题二：静态输出目录
因为项目需要生成静态页面和搜索索引，所以还需要关注：
out
目录。
Pagefind 会基于最终静态页面生成搜索数据。
如果输出目录不正确，就会导致：
搜索功能不可用
或者：
构建失败
因此部署时不仅要关注页面是否能打开，还要确认搜索功能是否正常。
遇到的问题三：GitHub 与 Vercel 自动部署
第一次完成部署后，逐渐理解了：
GitHub push
↓
Vercel 自动构建
↓
自动发布
这个流程。
也就是说：
只要本地修改代码后：
git add .
git commit -m "update"
git push
Vercel 就会自动重新部署。
这让网站更新流程变得非常简单。
遇到的问题四：网络访问问题
部署完成后，Vercel 默认提供：
*.vercel.app
访问地址。
但实际访问时出现过：
网页打不开
的情况。
后来判断：
这并不一定是部署失败。
可能与：
- 当前网络环境
- 代理设置
- vercel.app 域名访问情况
- DNS 解析
有关。
这也是后面决定配置自定义域名的重要原因之一。
排查思路
遇到 Vercel 部署问题时，逐渐形成了基本排查顺序：
1. 看 Build Logs
2. 看项目是否构建成功
3. 看 Deployment 状态是否 Ready
4. 看页面是否能访问
5. 看功能是否正常
6. 看域名和 DNS 是否配置正确
这比一上来乱改代码更有效。
最终结果
最终成功完成：
✅ GitHub 仓库连接
✅ Vercel 项目导入
✅ Next.js 构建
✅ Pagefind 搜索索引生成
✅ 自动部署流程
✅ 网站公网访问
本次经验总结
经验一
部署不是简单点击按钮。
真正的部署包括：
代码
构建
环境
输出目录
域名
访问验证
多个环节。
经验二
Build Logs 很重要。
遇到部署失败时，不要只看最终红色报错。
要进入日志，找到真正失败的位置。
经验三
GitHub + Vercel 是个人项目非常高效的组合。
适合：
- 博客
- 产品原型
- AI 工具
- 静态网站
- 小型 SaaS 项目
经验四
先部署成功，再优化细节。
不要一开始追求完美部署流程。
只要核心页面能访问，就已经完成了第一步。
项目意义
这次部署让我第一次完整理解了：
本地项目
↓
GitHub仓库
↓
云端构建
↓
公网访问
的真实流程。
也让我意识到：
上线
不是开发完成后的附属动作。
而是项目真正成立的一部分。
下一步
完成 Vercel 部署后，继续推进：
- 自定义域名绑定
- Google Search Console
- Google Analytics
- SEO 优化
- 内容长期更新
让 ChenTingToDo 从一个部署成功的网站，逐渐变成一个真正可长期运营的个人网站。