实战指南Guides › 用 Cursor 零基础搭个人网站

用 Cursor 零基础搭个人网站

更新：2026-10Updated: Oct 2026内容创作

想有个自己的网站但看不懂代码？Cursor 这类 AI 编辑器让你用大白话对话就能生成页面，改bug也不求人。Want your own site but can't read code? AI editors like Cursor let you build pages by chat — and fix bugs without begging a dev.

为什么选 CursorWhy Cursor

传统建站要学 HTML/CSS/部署，门槛高。Cursor 把 AI 嵌进编辑器，你描述需求它就写代码，还能边写边解释，适合新手。Classic site-building needs HTML/CSS/deploy. Cursor embeds AI in the editor: describe, it writes, and explains as it goes.

准备工作Setup

下载安装官网装 Cursor，登录账号
选模型默认 Claude/ChatGPT 模型即可
建文件夹放你的项目文件

第一步：用对话生成Step 1: generate by chat

打开聊天框，输入：“做一个单页个人简历网站，浅色风格、含头像区和联系方式，自包含 HTML。”Cursor 会生成文件。In chat, type: 'A single-page personal resume site, light theme, avatar and contact section, self-contained HTML.' It generates files.

小贴士：一次只加一个功能，生成后立刻在浏览器打开看效果，再提下一个需求。Tip: add one feature at a time, preview in browser, then request the next.

调试与迭代Debug & iterate

报错直接贴给 AI把红色报错复制给它
要它加注释方便你日后自己改
版本控制用 git 留底，坏了对账

部署上线Ship it

代码本地能跑后，可推到 Cloudflare Pages、GitHub Pages 等免费静态托管，绑定自己的域名即可公网访问。Once local works, push to free static hosts like Cloudflare Pages or GitHub Pages and bind your domain.

适合谁Who it's for

个人简历、作品集、小工具落地页都合适。复杂后台系统仍建议找专业开发。Resumes, portfolios and small landing pages fit well; complex backends still need pros.

一个能用的起始提示词A prompt that actually works

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

关键在最后一条：要求它输出单个自包含 HTML，这样你复制出来就能直接用，不会有依赖问题。The last line matters: ask for a single self-contained HTML file so you can just open it.

迭代的正确节奏How to iterate well

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

上线部署（免费）Free deployment

代码在本地能跑之后，选一个免费静态托管把文件传上去，再把域名指过去就完成了。Once it runs locally, push to a free static host and point your domain at it.

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

完整绑域名的步骤见我们的零成本建站实战。See our zero-cost hosting guide for the full domain-binding walkthrough.

新手最容易踩的坑Beginner pitfalls

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

示意图 · cursor-loop.svgDiagram · cursor-loop.svg

真实案例：不会代码的人做出个人站Real case: a non-coder ships a site

一位无编程背景的使用者用 Cursor 做出了单页个人作品集：首页 + 头像区 + 自我介绍 + 联系方式，响应式适配。从空白文件到本地跑通约 40 分钟，随后部署到 Pages 并绑定域名，总耗时约 1 小时。A non-coder built a one-page portfolio with Cursor: home + avatar + bio + contact, responsive. ~40 minutes from empty file to running locally, then deployed and bound a domain — about 1 hour total.

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