零基础用 AI 搭建个人网站,先搞清4件事(上)
你是否想过拥有一个属于自己的个人网站却不知道从哪里开始这篇文章不讲代码只讲逻辑——搞清楚这 4 个问题你就已经比 80% 的新手走得更远了。写在前面现在的 AI 工具Claude Code、Cursor、ChatGPT已经强大到可以帮非技术人员搭出一个完整的个人网站。但很多人卡在这里网站做出来了却上不了线或者上线了却不知道怎么更新内容。问题不出在 AI出在没有建立对这件事全貌的认知。下面 4 个问题是我在实际操作过程中梳理出来的核心概念。看懂这些后面的操作你才不会迷路。Q1用 AI 搭网站有哪些通用技巧闭环的关键是什么先想清楚再开口问 AIAI 不会主动帮你规划它只响应你的描述。很多人一上来就问帮我做个网站然后来来回回改了十几轮效率极低。正确做法先把下面 3 件事想清楚再写提示词。网站定位个人作品集技术博客产品展示工具合集视觉风格深色/浅色配色偏好有没有参考网站内容模块需要哪几个板块首页、项目、博客、工具……把这 3 件事整理成一段完整描述交给 AI比边做边改效率高 10 倍。闭环的 4 个关键节点做网站这件事有 4 个必须打通的节点缺一不可① 网站能在本地跑起来 在你自己电脑上启动测试看到页面正常显示 ↓ ② 网站能打包成静态文件 把代码打包成可以上传的成品文件HTML/CSS/JS ↓ ③ 网站能部署到服务器 代码推送到 GitHub托管平台自动拉取并上线 ↓ ④ 内容能由你自己持续更新 不需要再问 AI自己能改文件或写文章四个节点全部打通才算真正闭环。很多人卡在③网站本地做好了却上不了线或者卡在④上线了却只能靠 AI 才能改内容。实用技巧每次只描述一个需求做完验证没问题再提下一个避免 AI 把多个改动搞混出错时把完整报错信息粘贴给 AI不要只说出错了AI 需要看到具体错误才能排查用 Git 保存每个可运行状态——Git 是一个版本管理工具每次提交commit相当于给当前状态拍了张快照。如果后续改动把网站搞坏了可以随时回退到上一个正常版本不会丢失之前的工作Q2AI 生成的网站可以自己持续更新内容吗完全可以。而且一个结构良好的网站日常更新根本不需要再问 AI。关键在于内容和代码分开存放结构良好的网站会把内容和代码分在不同的文件里。以下是本人最近搭建的一个网站content/内容文件夹 ├── projects.ts ← 改这里 添加/更新项目 ├── tools.ts ← 改这里 添加/更新工具 └── posts/ └── 文章名.mdx ← 在这里写博客文章这些内容文件用 VS Code或任何文本编辑器就能修改不需要懂代码改的就是文字内容。改完内容后如何让网站更新这是很多新手的疑问。只需在终端命令行运行 3 条命令gitadd.# 把所有修改标记为待提交gitcommit-m描述这次改了什么# 保存这次修改拍快照gitpush origin main# 推送到 GitHub推送成功后Cloudflare Pages托管平台会自动检测到新推送自动重新构建网站约 2 分钟后更新上线。整个过程你不需要做任何其他操作。你修改内容文件 ↓ 运行 3 条 git 命令 ↓ GitHub 收到推送 ↓ Cloudflare 自动构建约 2 分钟 ↓ www.yourname.com 自动更新 ✓两种更新方式方式 A推荐自己改文件熟悉文件位置后直接在 VS Code 修改内容运行上面 3 条命令即可。长期维护成本极低。方式 B让 AI 帮写内容把你的想法告诉 Claude Code/其他AI编程让它们帮你写好项目描述或博客文章复制粘贴进对应文件再运行 3 条命令推送。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 证书生成 → 用你的域名访问上线完成如果域名和托管在不同服务商比如域名在 GoDaddy项目在 Vercel只需在域名注册商的 DNS 管理页添加一条 CNAME 记录指向托管平台提供的地址即可。两者完全可以分开。Q4代码仓库、托管平台、域名三者什么关系很多人把这三件事混在一起用一个类比来彻底说清楚GitHub代码仓库 图书馆 保存你所有的代码历史记录 可以随时查看、回退、复用 Cloudflare Pages托管平台 你家的房子 真正运行网站、对外提供访问的服务器 www.yourname.com域名 你家的门牌号 用户在浏览器输入的地址 Cloudflare DNS 邮局地址本 把门牌号翻译成实际服务器地址四者的协作流程用户输入 www.yourname.com ↓ DNS 查询这个门牌号对应哪台服务器 ↓ 找到 Cloudflare Pages 服务器你家的房子 ↓ 服务器返回网页内容 ↓ 用户看到你的网站当你更新网站时你修改代码 → git push → GitHub图书馆存档 ↓ Cloudflare Pages 自动从 GitHub 拉取新代码 ↓ 重新构建并更新你家房子里的内容 ↓ 用户再次访问看到新版本三个关键结论① 三者可以在不同服务商互不绑定域名在 Cloudflare托管在 Vercel代码在 GitHub——完全没问题用 DNS CNAME 记录连起来就行。② 换托管平台不用重新买域名改一条 DNS 记录指向新的托管地址即可。③ GitHub 只是存代码的地方不等于网站服务器很多新手以为代码推到 GitHub 网站就自动上线了——不对GitHub 只是仓库真正把网站跑起来的是托管平台Cloudflare Pages / Vercel 等。小结开始行动前的清单在动手之前用这个清单检查自己是否想清楚了我的网站定位是什么博客 / 作品集 / 产品展示我希望有哪几个板块我有大概的视觉风格偏好吗我是否打算用个人域名我的内容面向国内用户还是国际用户想清楚这些下一步就可以开始动手搭建了。下篇将给出从 AI 生成网站到绑定域名上线的完整操作手册附图示流程跟着做就能完成。本文基于 Claude Code Next.js Cloudflare Pages 的实际搭建经验整理适用于非技术背景的读者。