用 Cursor 零基础搭个人网站

想有个自己的网站但看不懂代码？Cursor 这类 AI 编辑器让你用大白话对话就能生成页面，改bug也不求人。

为什么选 Cursor

传统建站要学 HTML/CSS/部署，门槛高。Cursor 把 AI 嵌进编辑器，你描述需求它就写代码，还能边写边解释，适合新手。

准备工作

• 下载安装
• 选模型
• 建文件夹

第一步：用对话生成

打开聊天框，输入：“做一个单页个人简历网站，浅色风格、含头像区和联系方式，自包含 HTML。”Cursor 会生成文件。

小贴士：一次只加一个功能，生成后立刻在浏览器打开看效果，再提下一个需求。

调试与迭代

• 报错直接贴给 AI
• 要它加注释
• 版本控制

部署上线

代码本地能跑后，可推到 Cloudflare Pages、GitHub Pages 等免费静态托管，绑定自己的域名即可公网访问。

适合谁

个人简历、作品集、小工具落地页都合适。复杂后台系统仍建议找专业开发。

一个能用的起始提示词

做一个单页个人作品集网站，要求：
- 浅色现代风格，主色蓝紫渐变
- 顶部导航（首页/关于/联系）
- 头像区 + 自我介绍 + 联系方式
- 响应式，手机端也要好看
- 自包含单个 HTML，内联 CSS

关键在最后一条：要求它输出单个自包含 HTML，这样你复制出来就能直接用，不会有依赖问题。

迭代的正确节奏

• 一次加一件事：别一次要求 10 个功能，出了问题难定位。
• 每步即验证：生成完立刻在浏览器打开看效果，再提下一个需求。
• 报错直接贴：把红色报错原文复制给它，比描述「坏了」有效得多。
• 要求它解释：让 AI 注释关键代码，你以后能自己改。

上线部署（免费）

代码在本地能跑之后，选一个免费静态托管把文件传上去，再把域名指过去就完成了。

• Cloudflare Pages：拖拽上传即完成，自动 HTTPS（本站用的就是这个）
• GitHub Pages：适合已用 Git 管理代码的项目
• Netlify / Vercel：免费额度充足，流程类似

完整绑域名的步骤见我们的零成本建站实战。

新手最容易踩的坑

• 一次要太多：先做骨架，再填内容。
• 不备份：改之前先复制一份文件，或用 Git 留底。
• 移动端没测：一定要在手机上看一遍，很多 AI 生成的布局在小屏会崩。
• 用了外部 CDN 却没记录：确认页面不依赖临时外链，否则以后会失效。

真实案例：不会代码的人做出个人站

一位无编程背景的使用者用 Cursor 做出了单页个人作品集：首页 + 头像区 + 自我介绍 + 联系方式，响应式适配。从空白文件到本地跑通约 40 分钟，随后部署到 Pages 并绑定域名，总耗时约 1 小时。

• 关键做法：要求输出「单文件自包含 HTML」避免依赖混乱；每加一个功能就预览验证。
• 后续维护：让 AI 在关键处加注释，日后自己也能小改，不必持续依赖工具。

相关工具