Next.jsCloudflareAI个人网站

零基础用 AI 搭建个人网站,先搞清楚这 4 件事

用 AI 搭出网站只是第一步——如何让内容持续更新、如何绑定域名上线,4 个关键问题帮你建立完整认知。

你是否想过拥有一个属于自己的个人网站,却不知道从哪里开始? 这篇文章不讲代码,只讲逻辑——搞清楚这 4 个问题,你就已经比 80% 的新手走得更远了。

写在前面

现在的 AI 工具(Claude Code、Cursor、ChatGPT)已经强大到可以帮非技术人员搭出一个完整的个人网站。但很多人卡在这里:网站做出来了,却上不了线;或者上线了,却不知道怎么更新内容。

问题不出在 AI,出在没有建立对"这件事全貌"的认知。

下面 4 个问题,是我在实际操作过程中梳理出来的核心概念。看懂这些,后面的操作你才不会迷路。


Q1:用 AI 搭网站,有哪些通用技巧?闭环的关键是什么?

先想清楚,再开口问 AI

AI 不会主动帮你规划,它只响应你的描述。很多人一上来就问"帮我做个网站",然后来来回回改了十几轮,效率极低。

正确做法:先把下面 3 件事想清楚,再写提示词。

  • 网站定位:个人作品集?技术博客?产品展示?工具合集?
  • 视觉风格:深色/浅色?配色偏好?有没有参考网站?
  • 内容模块:需要哪几个板块(首页、项目、博客、工具……)?

把这 3 件事整理成一段完整描述交给 AI,比边做边改效率高 10 倍。

闭环的 4 个关键节点

做网站这件事,有 4 个必须打通的节点,缺一不可:

① 网站能在本地跑起来
   在你自己电脑上启动测试,看到页面正常显示
         ↓
② 网站能打包成静态文件
   把代码打包成可以上传的成品文件(HTML/CSS/JS)
         ↓
③ 网站能部署到服务器
   代码推送到 GitHub,托管平台自动拉取并上线
         ↓
④ 内容能由你自己持续更新
   不需要再问 AI,自己能改文件或写文章

四个节点全部打通,才算真正闭环。 很多人卡在③,网站本地做好了却上不了线;或者卡在④,上线了却只能靠 AI 才能改内容。

实用技巧

  • 每次只描述一个需求,做完验证没问题,再提下一个,避免 AI 把多个改动搞混
  • 出错时把完整报错信息粘贴给 AI,不要只说"出错了",AI 需要看到具体错误才能排查
  • 用 Git 保存每个可运行状态——每次提交(commit)相当于给当前状态拍了张"快照",后续改坏了可以随时回退

Q2:AI 生成的网站,可以自己持续更新内容吗?

完全可以。 而且一个结构良好的网站,日常更新根本不需要再问 AI。

关键在于:内容和代码分开存放

结构良好的网站会把"内容"和"代码"分在不同的文件里:

content/(内容文件夹)
├── projects.ts     ← 改这里 = 添加/更新项目
├── tools.ts        ← 改这里 = 添加/更新工具
└── posts/
    └── 文章名.mdx  ← 在这里写博客文章

这些内容文件用 VS Code(或任何文本编辑器)就能修改,不需要懂代码,改的就是文字内容。

改完内容后,如何让网站更新?

只需在终端运行 3 条命令:

git add .                        # 把所有修改标记为"待提交"
git commit -m "描述这次改了什么"  # 保存这次修改(拍快照)
git push origin main             # 推送到 GitHub

推送成功后,托管平台会自动检测到新推送、自动重新构建、约 2 分钟后更新上线。整个过程你不需要做任何其他操作。

你修改内容文件
      ↓
运行 3 条 git 命令
      ↓
GitHub 收到推送
      ↓
托管平台自动构建(约 2 分钟)
      ↓
你的网站自动更新 ✓

Q3:要用个人域名,注册商有哪些?怎么迁移?

常见域名注册商

| 注册商 | 特点 | 推荐指数 | |---|---|---| | Cloudflare Registrar | 按成本价,无续费溢价,自带 DNS 管理 | ⭐⭐⭐⭐⭐ 强烈推荐 | | Namecheap | 价格实惠,界面友好 | ⭐⭐⭐⭐ 入门首选 | | GoDaddy | 知名度高,但续费价格贵 | ⭐⭐ 不推荐长期用 | | 阿里云 / 腾讯云 | 中文界面,国内项目必选,需备案 | ⭐⭐⭐⭐ 国内场景 |

域名命名建议:

  • 简短好记,与你的名字或方向相关
  • 优先选 .com,其次 .dev / .ai
  • 避免数字和连字符,不易记忆

以 Cloudflare 为例:三步绑定域名

第①步:注册域名
Cloudflare Dashboard → Domain Registration → 搜索并购买域名

第②步:部署项目到 Cloudflare Pages
会得到一个临时访问地址,如:my-site.pages.dev

第③步:绑定自定义域名
Pages 项目 → Custom Domains → 输入你的域名
→ DNS 自动配置 → 5 分钟内 SSL 证书生成
→ 用你的域名访问,上线完成

如果域名和托管在不同服务商: 只需在域名注册商的 DNS 管理页,添加一条 CNAME 记录,指向托管平台提供的地址即可。


Q4:代码仓库、托管平台、域名,三者什么关系?

用一个类比来彻底说清楚:

GitHub(代码仓库)  =  图书馆
                       保存你所有的代码历史记录

托管平台(Cloudflare Pages / Vercel)  =  你家的房子
                                           真正运行网站、对外提供访问的服务器

www.yourname.com(域名)  =  你家的门牌号
                              用户在浏览器输入的地址

DNS  =  邮局地址本
         把"门牌号"翻译成"实际服务器地址"

当你更新网站时:

你修改代码 → git push → GitHub(图书馆存档)
                ↓
托管平台自动从 GitHub 拉取新代码
                ↓
重新构建并更新"你家房子里的内容"
                ↓
用户再次访问,看到新版本

三个关键结论

① 三者可以在不同服务商,互不绑定 域名在 Cloudflare,托管在 Vercel,代码在 GitHub——完全没问题,用 DNS CNAME 连起来就行。

② 换托管平台不用重新买域名 改一条 DNS 记录,指向新的托管地址即可。

③ GitHub 不等于网站服务器 很多新手以为代码推到 GitHub 网站就自动上线了——不对,GitHub 只是仓库,真正把网站跑起来的是托管平台。


小结:开始行动前的清单

  • [ ] 我的网站定位是什么?(博客 / 作品集 / 产品展示)
  • [ ] 我希望有哪几个板块?
  • [ ] 我有大概的视觉风格偏好吗?
  • [ ] 我是否打算用个人域名?
  • [ ] 我的内容面向国内用户还是国际用户?

想清楚这些,下一步就可以开始动手搭建了。

下篇将给出从 AI 生成网站到绑定域名上线的完整操作手册,跟着做就能完成。