几乎零成本！保姆级教程：用 Next.js + Vercel + Cloudflare 搭建个人网站

本期实操教程将手把手教你，如何利用现代前端技术栈和白嫖神器，以“一杯水”的成本（仅需 1 块钱买个域名），搭建并自动化部署你的个人网站！

核心技术栈与工具：

• 框架： Next.js
• 代码托管： GitHub
• 自动化部署： Vercel
• 域名与解析： 腾讯云 + Cloudflare

Step 1：初始化 Next.js 项目

首先，我们需要在本地创建一个 Next.js 项目，这将作为你的网站核心代码库。打开终端，运行以下命令并按照提示完成初始化配置：

npx create-next-app@latest my-website

注：你可以根据自己的设计喜好，加入各种高科技感的 3D 元素或玻璃拟态（Glassmorphism）UI 设计。

Step 2：推送到 GitHub 进行版本管理

将你在本地写好的项目代码提交到 GitHub。这不仅是为了代码备份，更是为了后续能与 Vercel 联动，实现丝滑的自动化部署（CI/CD）。

1. 在 GitHub 新建一个仓库。
2. 将本地代码绑定远程仓库并 Push 上去。

Step 3：Vercel 自动化部署（CI/CD）

Vercel 是前端开发者的部署神器。

1. 注册并登录 Vercel，进入个人中心界面，点击 “Add New” -> “Project”。
2. 授权绑定你的 GitHub 账号，此时你会看到刚刚推送的项目仓库。
3. 点击 “Import” 导入该项目（例如命名为 website）。确认构建命令和环境变量无误后，点击 “Deploy”。
4. 重点来了： Vercel 会自动拉取代码并进行构建。更赞的是，只要配置好关联，以后你每一次向 GitHub push 新代码，Vercel 都会自动为你重新部署！无需任何手动干预，极大地提升了开发体验。

注意： 部署完成后，Vercel 会自动分配一个 .vercel.app 后缀的域名。但由于网络环境原因，该域名在国内通常无法直接访问。为了让国内用户也能流畅访问，我们需要花 1 块钱准备一个专属域名。

Step 4：1块钱拿下首年域名

我们来到腾讯云，利用新用户优惠活动购买域名：

1. 访问活动地址：腾讯云域名特惠
2. 挑选一个心仪的后缀，首单通常只需 1 元即可买下一年的使用权。
3. 关键步骤： 购买后，请务必完成实名认证。
4. 关于备案：因为我们的网站是部署在海外的 Vercel 服务器上，所以不需要进行繁琐的国内 ICP 备案即可直接使用！

Step 5：将域名解析权交给 Cloudflare

为了更好的网络路由和免费的 SSL 证书，我们使用 Cloudflare 来接管域名的 DNS 解析。

1. 注册并登录 Cloudflare，点击“添加站点”，输入你刚刚在腾讯云购买的域名。
2. Cloudflare 会为你分配两个专属的 DNS 服务器地址（例如：ganz.ns.cloudflare.com 和 magdalena.ns.cloudflare.com）。
3. 回到腾讯云的域名控制台，找到你的域名，进入 “DNS 管理” -> “DNS 修改”，将原本的腾讯云 DNS 替换为 Cloudflare 提供的这两个地址。

Step 6：Vercel 绑定域名 & 自动配置 SSL

最后一步，让你的专属域名和 Vercel 上的项目成功“牵手”！

1. 回到 Vercel 的项目详情页，找到 “Settings” -> “Domains”。
2. 输入你购买的域名（例如：yangyingfu.com），点击 “Add”。
3. Vercel 会给出相应的 DNS 解析记录（通常是 A 记录或 CNAME 记录）。
4. 前往 Cloudflare 的控制台，进入该域名的 “DNS” 设置页，将 Vercel 提示的记录添加进去。
5. 等待几分钟，当 Vercel 检测到 DNS 解析生效后，会自动为你下发并配置 SSL 证书（让你的网站支持安全的 HTTPS 访问）。

总结

到这里，我们的教程就完美结束啦！打开浏览器，输入你的专属域名，欣赏你的个人网站吧。

本期内容全都是我亲自踩坑实操总结的经验。比如你现在访问的这个网站，正是我用 Next.js + Cloudflare + Vercel 搭建出来的。制作不易，希望能帮到正在摸索的你！