个人网站开发及部署

note 约 3 分钟

本文是系列第 1 篇,共 1 篇

查看系列目录(1 篇)
  1. 1. 个人网站开发及部署

本网站对应的 Github 项目:DevLog-Hub

我使用的 AI 编程环境:Claude Code + GLM 5.3

前言:Vibe Coding 的开发流程

对于个人网站的简单开发,麻烦的其实是部署上线这一环,网站内容的开发完全交给 AI 即可。核心流程可以概括为:

  1. 先做需求分析:向 AI 描述网站用途,让 AI 输出需求分析结果,不要一上来就让 AI 直接开发。
  2. 确认需求、生成实施计划:与 AI 沟通确认需求后,让 AI 生成一份实施计划文档,人工审查,不确定的地方就向 AI 提问。
  3. 分阶段实施:让 AI 按计划逐阶段开发、逐阶段验证,建议不要一次性开发完。
  4. 问题及时反馈:开发期间遇到的问题随时反馈给 AI。

本网站的具体开发流程见 GitHub 仓库,主要参考 DEPLOYMENT.md。按该流程最终能实现的效果是:「网站功能 + 可通过 Vercel 部署的网址访问(https://dev-log-hub.vercel.app/ )」。

不过这个默认网址存在一个问题:DNS 被污染,境外或使用代理可以正常访问,但境内不使用代理则无法访问。因此需要购买并维护自己的域名(即平时常见的 .com / .cn 等后缀),这样全球范围内都能直接访问,无需代理。

所以,本教程主要聚焦于:完成 .vercel.app 部署后,如何购买自己的域名并顺利上线。

1. 阿里云购买域名

购买域名的方式不止一种,此处针对国内且无境外支付方式的情况。

购买网址:阿里云万网

直接查询想要的域名,比如本网站最终购买的 dlhblog.com,满足条件即可购买。

提示:因为 Vercel 部署在境外,不需要备案,但购买时需要先完成实名认证。

购买成功:

域名购买成功页面

购买成功后点击进入 解析控制台。

2. 阿里云添加 DNS 解析

解析控制台入口

域名解析列表

添加两条记录:

添加 DNS 记录

这两条记录是 Vercel 官方固定的接入地址:

Vercel 官方接入地址说明

A 记录 —— 将域名指向另一个 IPv4 地址:

A 记录配置

CNAME 记录 —— 将域名指向另一个域名:

CNAME 记录配置

3. Vercel 添加域名

Vercel 添加域名界面

将 dlhblog.com 作为主域名:

将 dlhblog.com 设置为主域名

根据 Vercel 给出的建议值修改 DNS 解析:

Vercel DNS 建议值(主域名)1

Vercel DNS 建议值(主域名)2

将 www.dlhblog.com 重定向到 dlhblog.com,注意取消勾选 Include apex and www variants (recommended):

www 重定向设置

再次根据 Vercel 给出的建议值修改 DNS 解析:

Vercel DNS 建议值(www 域名)1

Vercel DNS 建议值(www 域名)2

到这里,Vercel 中添加的域名及状态如下,均显示 Valid Configuration:

Vercel 域名状态验证

在本地验证是否生效:

本地终端验证

4. 更新仓库配置(改完 push 自动部署)

需要修改 2 处,将 dev-log-hub.vercel.app 替换为 dlhblog.com:

  1. 添加 astro.config.mjs → site: 'https://dlhblog.com'(影响 sitemap、RSS、canonical URL)
  2. public/robots.txt:4 → sitemap: https://dlhblog.com/sitemap-index.xml

5. Google Search Console 换绑

域名属性需要重新创建:

  1. GSC 添加新资源:

    GSC 添加新资源

    资源类型选择网域:

    选择资源类型

    点击继续:

    点击继续

  2. 复制 GSC 给出的 TXT 记录,到阿里云域名解析后台添加这一条记录:

    添加 TXT 记录

  3. 返回 GSC 点击验证:

    点击验证

  4. 验证成功:

    验证成功

  5. 切换到 dlhblog.com 资源,点击「站点地图」,提交:

    提交站点地图

6. 处理旧域名 dev-log-hub.vercel.app

在 Vercel Domains 中将 dev-log-hub.vercel.app 设为跳转到主域名,避免两个地址并存、分散搜索收录。

操作同前面设置 www.dlhblog.com 跳转到 dlhblog.com 一样:

旧域名跳转设置


至此,全球范围内都可以通过 dlhblog.com / www.dlhblog.com(无需代理)访问本网站。

评论