Cursor 零基础 AI 编程入门：做一个个人博客
不会写代码？用 Cursor 从零做一个个人博客网站，完整步骤详解。
概述
很多人觉得编程很难，尤其是没有代码基础的朋友，看到命令行和报错就头大。但今天我要告诉你：用 Cursor，零基础也能在 30 分钟内做出一个能用的个人博客网站！
Cursor 是基于 VS Code 改造的 AI 编程编辑器，内置了强大的 AI 助手，你只需要用中文描述想法，它就能帮你生成代码、修改问题、甚至一键部署。本文会带你走完完整的流程：
- 安装 Cursor 并配置 AI 模型
- 用自然语言生成博客网站的全部代码
- 在本地预览效果并调试常见错误
- 免费部署到 Vercel 让别人能访问
不需要学过 HTML、CSS 或 JavaScript，只要你会打字，就能跟着做出来。开始吧！
", "steps": [ { "title": "下载安装 Cursor 并配置 AI 模型", "htmlContent": "首先去 cursor.sh 下载对应你系统的版本（Windows / Mac / Linux）。安装完成后打开，你会看到一个类似 VS Code 的界面，左侧是文件管理器，右侧是代码编辑区。
关键一步：配置 AI 模型。点击左下角的设置齿轮 ⚙️ → Models，推荐选择 GPT-4o 或 Claude 3.5 Sonnet，这两个模型生成代码质量最高。如果你是 Cursor 免费版，每天有一定次数限制，但完成本文项目完全够用。
截图指引：在设置页找到 Models 选项卡，勾选 GPT-4o 和 Claude-3.5-sonnet，把其他模型取消勾选，避免误用。
接着创建一个新文件夹作为项目目录：在 Cursor 中点击 File → Open Folder，新建一个叫 my-blog 的文件夹并打开。
这是最神奇的一步。按下快捷键 Cmd + K（Windows 是 Ctrl + K），在顶部弹出的输入框中输入你的需求。这里我提供一个可以直接复制的中文 Prompt：
请为我生成一个个人博客网站，要求：
- 使用 HTML + CSS + JavaScript（纯前端，不需要后端）
- 博客首页显示文章列表，每篇文章有标题、摘要和日期
- 点击文章可以进入详情页查看完整内容
- 设计风格：简约、干净、白色背景、好看的字体
- 所有代码写在一个 index.html 文件中，方便预览
- 示例文章至少三篇，内容用 Lorem Ipsum 填充按回车后，Cursor 会开始生成代码。等待 20-30 秒，你会看到左侧文件管理器中出现了 index.html 文件，里面已经写好了完整的 HTML 结构、CSS 样式和 JavaScript 交互逻辑。
截图指引：按下 Cmd+K 后输入框的样子，以及生成完成后 index.html 文件出现在侧边栏。
如果第一次生成的效果不满意，可以接着补充：Cmd+K → 把文章卡片加上阴影效果，导航栏固定顶部，AI 会自动修改已有代码。
代码生成后，在左侧文件列表右键点击 index.html → Copy Path，然后粘贴到浏览器地址栏打开，你就能看到博客的样子了。
大概率会遇到一些小问题，比如布局错乱、图片不显示、点击没反应。别慌，用 Cursor 自带的 AI 调试功能修复：
场景一：布局错乱
按下 Cmd + L（Ctrl+L）打开侧边聊天面板，输入：文章卡片在手机上显示太挤了，帮我改成自适应布局，在手机上一列显示，平板上两列，桌面三列
AI 会给出修改后的 CSS 代码，点击 Apply 按钮自动替换。
场景二：文章详情页无法点击
在聊天面板中说：点击文章标题没有跳转到详情页，检查 JavaScript 代码，使用事件委托实现点击跳转
AI 会分析代码并给出修复方案。
场景三：字体看起来不舒服
直接说：把字体换成系统默认的 -apple-system, BlinkMacSystemFont，字号稍微大一点，行高 1.8
每修复一个问题后按 Cmd+S 保存，然后刷新浏览器查看效果。
本地能看还不行，我们要部署到线上，这样朋友、HR 或者面试官都能直接访问。
1第一步：将项目上传到 GitHub
在 Cursor 中按
Ctrl+Shift+` 打开终端，输入以下命令（逐行执行）：git init
git add .
git commit -m \"first blog\"
然后去 GitHub.com 注册账号，点击右上角 + 号 → New repository，仓库名填 my-blog，不要勾选任何初始化选项，创建后复制给出的命令（类似下面这种）：
git remote add origin https://github.com/你的用户名/my-blog.git
git branch -M main
git push -u origin main
回到 Cursor 终端粘贴执行，输入 GitHub 账号密码完成上传。
2第二步：在 Vercel 部署
打开 vercel.com，用 GitHub 账号登录。点击
Add New → Project，选择刚才的 my-blog 仓库，Framework Preset 选 Other，然后点击 Deploy。等待 1-2 分钟，你会看到一个类似 my-blog.vercel.app 的网址，点开就能看到你做的博客了！把它分享给任何人，他们都能访问。
截图指引：Vercel 部署成功后的绿色页面，以及生成的域名 URL。
", "tip": "如果部署后样式不对，检查 index.html 中引用的资源路径是否用了相对路径（不要用绝对路径如 /images/ 开头）。" }, { "title": "进阶：添加博客后台管理功能", "htmlContent": "基础的纯前端博客已经能用了，但每次更新文章都要改代码太麻烦。我们可以让 AI 帮你加上一个简单的管理后台。
按下 Cmd + K，输入：
给博客添加一个管理后台功能：
- 访问 /admin.html 进入后台
- 需要输入密码（密码设置为 admin123）
- 后台可以添加新文章（标题、内容、日期）
- 新文章会自动保存到 localStorage 中
- 首页的文章列表要同时显示本地存储的文章和示例文章AI 会生成 admin.html 文件，并在 index.html 中添加读取 localStorage 的逻辑。
部署前记得测试：先在本地打开 admin.html 添加几篇文章，然后刷新首页看是否显示。确认无误后，把新文件也提交到 GitHub：
git add .
git commit -m \"add admin panel\"
git pushVercel 会自动重新部署，几分钟后你的线上博客就拥有后台管理能力了。
", "tip": "localStorage 的数据只保存在当前浏览器中，换设备会丢失。如果想持久保存，可以让 AI 帮你集成 Firebase 或 Supabase。" } ], "advancedTips": [ "用「/」命令加速：在 Cursor 聊天面板中输入/fix 可以让 AI 自动修复当前选中的错误代码；输入 /explain 可以让 AI 解释一段代码的作用。",
"利用「上下文选择」：在代码中框选一段区域，再按 Cmd+K，AI 只会修改选中的部分，不会影响其他代码。这比全部重写安全得多。",
"让 AI 写单元测试：博客功能多了之后，可以用 Cmd+L 说「帮我对文章列表功能写 Jest 单元测试」，AI 会自动生成测试文件。",
"使用 Rules 文件规范输出：在项目根目录创建 .cursorrules 文件，写入「使用中文注释」「优先用 flex 布局」「变量名用 camelCase」等规则，之后 AI 生成代码都会遵守。"
],
"faq": [
{
"question": "我完全没学过编程，真的能跟着做完吗？",
"answer": "能。本文所有操作都是「打字→按回车→看结果」，不需要写一行代码。即使遇到报错，直接复制报错信息粘贴给 AI，它会帮你修复。"
},
{
"question": "免费版 Cursor 够用吗？",
"answer": "够用。免费版每月有 2000 次 AI 补全和 50 次高级模型对话，完成本文项目绰绰有余。如果后续频繁使用，可以考虑 $20/月的 Pro 版。"
},
{
"question": "部署到 Vercel 需要花钱吗？",
"answer": "完全免费。Vercel 的 Hobby 计划提供无限量的静态网站托管，绑定 GitHub 仓库后自动部署，不需要信用卡。"
},
{
"question": "我想换一个更漂亮的模板怎么办？",
"answer": "直接告诉 AI：「把博客风格改成毛玻璃效果，背景用渐变色，卡片加毛玻璃模糊效果」，AI 会自动重写 CSS。或者搜索「免费博客模板 HTML」找现成的，让 AI 帮你整合。"
},
{
"question": "生成的代码有安全漏洞吗？",
"answer": "纯前端静态博客没有后端和数据库，基本不存在严重安全问题。但如果加了管理后台，密码是��编码在 JavaScript 中的（任何人都能查看），仅适合个人用途，不要用于生产环境。"
}
]
}