本期实操教程将手把手教你,如何利用现代前端技术栈和白嫖神器,以“一杯水”的成本(仅需 1 块钱买个域名),搭建并自动化部署你的个人网站!
核心技术栈与工具:
- 框架: Next.js
- 代码托管: GitHub
- 自动化部署: Vercel
- 域名与解析: 腾讯云 + Cloudflare
Step 1:初始化 Next.js 项目
首先,我们需要在本地创建一个 Next.js 项目,这将作为你的网站核心代码库。打开终端,运行以下命令并按照提示完成初始化配置:
注:你可以根据自己的设计喜好,加入各种高科技感的 3D 元素或玻璃拟态(Glassmorphism)UI 设计。
Step 2:推送到 GitHub 进行版本管理
将你在本地写好的项目代码提交到 GitHub。这不仅是为了代码备份,更是为了后续能与 Vercel 联动,实现丝滑的自动化部署(CI/CD)。
- 在 GitHub 新建一个仓库。
- 将本地代码绑定远程仓库并 Push 上去。
Step 3:Vercel 自动化部署(CI/CD)
是前端开发者的部署神器。
- 注册并登录 Vercel,进入个人中心界面,点击 “Add New” -> “Project”。
- 授权绑定你的 GitHub 账号,此时你会看到刚刚推送的项目仓库。
- 点击 “Import” 导入该项目(例如命名为
website)。确认构建命令和环境变量无误后,点击 “Deploy”。 - 重点来了: Vercel 会自动拉取代码并进行构建。更赞的是,只要配置好关联,以后你每一次向 GitHub
push新代码,Vercel 都会自动为你重新部署!无需任何手动干预,极大地提升了开发体验。
注意: 部署完成后,Vercel 会自动分配一个 .vercel.app 后缀的域名。但由于网络环境原因,该域名在国内通常无法直接访问。为了让国内用户也能流畅访问,我们需要花 1 块钱准备一个专属域名。
Step 4:1块钱拿下首年域名
我们来到腾讯云,利用新用户优惠活动购买域名:
- 访问活动地址:
- 挑选一个心仪的后缀,首单通常只需 1 元即可买下一年的使用权。
- 关键步骤: 购买后,请务必完成实名认证。
- 关于备案:因为我们的网站是部署在海外的 Vercel 服务器上,所以不需要进行繁琐的国内 ICP 备案即可直接使用!
Step 5:将域名解析权交给 Cloudflare
为了更好的网络路由和免费的 SSL 证书,我们使用 Cloudflare 来接管域名的 DNS 解析。
- 注册并登录 Cloudflare,点击“添加站点”,输入你刚刚在腾讯云购买的域名。
- Cloudflare 会为你分配两个专属的 DNS 服务器地址(例如:
ganz.ns.cloudflare.com和magdalena.ns.cloudflare.com)。 - 回到腾讯云的域名控制台,找到你的域名,进入 “DNS 管理” -> “DNS 修改”,将原本的腾讯云 DNS 替换为 Cloudflare 提供的这两个地址。
Step 6:Vercel 绑定域名 & 自动配置 SSL
最后一步,让你的专属域名和 Vercel 上的项目成功“牵手”!
- 回到 Vercel 的项目详情页,找到 “Settings” -> “Domains”。
- 输入你购买的域名(例如:
yangyingfu.com),点击 “Add”。 - Vercel 会给出相应的 DNS 解析记录(通常是 A 记录或 CNAME 记录)。
- 前往 Cloudflare 的控制台,进入该域名的 “DNS” 设置页,将 Vercel 提示的记录添加进去。
- 等待几分钟,当 Vercel 检测到 DNS 解析生效后,会自动为你下发并配置 SSL 证书(让你的网站支持安全的 HTTPS 访问)。
总结
到这里,我们的教程就完美结束啦!打开浏览器,输入你的专属域名,欣赏你的个人网站吧。
本期内容全都是我亲自踩坑实操总结的经验。比如你现在访问的这个网站,正是我用 Next.js + Cloudflare + Vercel 搭建出来的。制作不易,希望能帮到正在摸索的你!
