零基础用Cursor快速搭建网站：实测1小时完成

关注 霍格沃兹测试学院公众号，回复「资料」, 领取人工智能测试开发技术合集

如果你一直想自己建个网站，但又觉得编程太难、时间太少，今天这个方法可能会改变你的想法。我最近实测用Cursor编辑器，在完全零基础的情况下，只用1小时就搭建了一个功能完整的个人网站。下面是我的完整步骤，你可以跟着一步步操作。

准备工作（5分钟）
首先，你需要准备两样东西：

下载Cursor编辑器（完全免费）
一个清晰的网站目标
我这次要建的是“个人摄影作品展示站”，包含首页、作品集、关于我三个页面。你完全可以根据自己的需求调整。

打开Cursor后，新建一个文件夹，命名为my_website。在文件夹里创建三个基础文件：

index.html （主页）
style.css （样式文件）
script.js （交互文件）
第一步：用自然语言描述你的需求（10分钟）
Cursor的强大之处在于，你可以用平常说话的方式告诉它你想要什么。

我在index.html里直接输入：

请创建一个摄影作品展示网站的HTML结构，包含导航栏（首页、作品集、关于我）、英雄大图区域、作品展示网格（3x3布局），以及页脚。
几秒钟后，Cursor生成了完整的HTML骨架。我检查了一下，结构清晰，连基本的标签都标注好了。

接着我在style.css里输入：

为这个摄影网站设计现代简约风格的CSS，使用柔和的配色，确保移动端友好。导航栏要固定在顶部，作品图片要有悬停效果，整体布局要整洁专业。
生成的结果超出了我的预期——不仅包含了所有必要的样式，还添加了响应式设计的媒体查询。

第二步：填充实际内容（25分钟）
现在骨架有了，需要填充血肉。我准备了自己的摄影作品（你也可以用免费图库的图片）。

在作品展示部分，我让Cursor帮忙优化：

请将作品网格的图片替换为实际的图片路径，并为每张图片添加描述文字。图片路径为images/photo1.jpg到photo9.jpg。
接着，我要求它创建另外两个页面：

创建portfolio.html和about.html，保持与首页一致的导航风格，作品集页面要详细展示作品，关于我页面要有个人介绍和联系方式表单。
重点来了——联系方式表单需要实际功能。我对Cursor说：

为关于我页面的联系表单添加JavaScript验证，确保邮箱格式正确，并模拟提交成功的效果。
在script.js中，它生成了完整的表单验证代码，还加了成功提交后的提示动画。

人工智能技术学习交流群
伙伴们，对AI测试、大模型评测、质量保障感兴趣吗？我们建了一个 「人工智能测试开发交流群」，专门用来探讨相关技术、分享资料、互通有无。无论你是正在实践还是好奇探索，都欢迎扫码加入，一起抱团成长！期待与你交流！👇

第三步：细节优化和调试（15分钟）
网站基本成型，但还有些小问题需要调整。

移动端适配：我发现某些元素在小屏幕上显示不正常，于是输入：
检查并修复移动端显示问题，确保导航菜单在手机上能正常折叠展开。
Cursor不仅修复了问题，还添加了汉堡菜单图标。

性能优化：
请优化图片加载，添加懒加载功能，并压缩CSS文件。
个性化调整：我根据自己的喜好调整了颜色：
将主色调从蓝色改为深灰色和金色的搭配，更具摄影工作室的专业感。
第四步：本地测试和上线准备（5分钟）
用Cursor内置的预览功能，我同时在桌面和手机视图检查网站。发现一处图片大小不一致的问题，直接告诉Cursor：

统一作品网格中所有图片的尺寸比例，确保布局整齐。
最后，为了实际上线，我让Cursor生成了必要的文件：

创建README.md说明文件，以及.gitignore文件，并告诉我最简单的上线步骤。
实测结果与心得
从零开始到完整网站，实际用时58分钟。最终网站包含：

三个完整页面（首页、作品集、关于我）
响应式设计，适配所有设备
交互式导航和表单验证
图片懒加载优化
专业的视觉效果
给新手的实用建议：

描述越具体，结果越精准：不要说“做个好看的网站”，而要说“创建一个单栏布局，有大幅背景图，标题用思源黑体”

分阶段进行：先结构，再样式，最后功能，不要一次性要求太多

大胆提问：遇到问题可以直接问Cursor，比如“为什么我的图片不显示？”它会分析代码并给出解决方案

学会微调：生成的结果可能需要小调整，用简单的指令如“把字体调大一点”“增加一些间距”

免费上线你的网站
完成后的网站可以免费部署到GitHub Pages或Vercel：

在GitHub创建新仓库
上传所有文件
在设置中开启GitHub Pages
几分钟后，你的网站就有在线地址了
整个过程最让我惊讶的是，我一行代码都没手写，全靠自然语言沟通。Cursor就像懂技术的合作伙伴，你把想法告诉它，它帮你实现，你只需要做决策和微调。

现在，你可以用这个方法创建作品集、小店页面、活动宣传站，或者任何你想要的网站。准备好计时了吗？下一个小时，你就能拥有自己的网站了。

推荐学习
Playwright自动化测试框架与AI智能体应用课程，限时免费，机会难得。扫码报名，参与直播，希望您在这场公开课中收获满满，开启智能自动化测试的新篇章！