用Cursor轻松开发个人网站：从零基础到上线全攻略【人人都是开发者】

在当今这个科技飞速发展的时代，AI 已经深入到我们生活和工作的各个角落，编程领域也不例外。藤设计就来给大家分享一下如何借助一款超火的 AI 代码编辑器 ——Cursor，开发一个属于自己的网站。

www.cursor.com

去年诞生的 Cursor，前段时间因被大神卡帕西发推称赞而大火。连 cloudFlare 的副总裁分享自己 8 岁女儿用 Cursor 做网站的视频都能在全球网友间引起轰动，这正应了李彦宏那句话：“所有的人，只要你会说话，就具备今天的程序员所具备的能力。”

首先，我们去 Cursor 的官网下载免费套餐，安装完成后打开它。对于初次使用的朋友，先不用去了解项目结构那些复杂的东西，咱们可以完全依靠 AI。打开后，点击扩展应用，搜索中文并下载中文包，然后按说明使用 ctrl + shift + p 调出小框框，输入 “display”，选择 “language” 并点击中文。重启应用后，界面就变成中文啦，是不是很方便？

接着，我们新建一个文件夹用来存放代码。在 Cursor 里点击 “打开一个空文件夹”，选择刚刚新建的文件夹。然后在设置里打开 “features”，把 “composer” 打开，这可是我们后续要用到的关键功能哦。

在正式开始编写代码前，我们得先整理一下需求。我是和 claude - 3.5 - sonnet 聊了聊，告诉它我要设计一个好看的个人网站，要有照片轮播，底部还要有社交媒体账号链接，并且要有像 OpenAI 那样的对话界面。得到设计方案后，不用深究，直接把内容全拷贝，在 Cursor 里用 ctrl + i 调出 composer（这是个 AI 对话界面），粘贴进去。我还补充了一句，希望这是一个单页面应用，通过 CDN 或者其他简单方法实现，因为我们的网站需求比较简单，不想搞得太复杂。

之后，把这些内容发送给 AI，它就开始自动写代码了，点击 “accept” 接受代码。单页面应用查看效果很简单，右键 html 文件，在浏览器中打开就行。要是遇到问题，比如页面空白，别慌，直接跟 AI 反馈。当 AI 询问是否添加个人照片时，肯定回答是呀。可以让它帮忙处理文件分类，我还让它把所有相关名字改成 “tengsheji”。把照片放在名为 “images” 的文件夹里，把路径拷贝给 AI，它就能自动替换了。应用修改后刷新页面，要是发现照片有问题，比如太小，或者页脚没显示，继续和 AI 沟通调整。

说到对话界面，如果出现是灰色没反应的情况，那是因为还没实现真正的功能。这时候我们得去调一个 API，可以选择通义千问、摆渡文心、Kimi、海螺或者我用的智谱。我从智谱的 bigmodel 上拷贝接口文档给 Cursor，让它按文档写代码，需要 API key 时，再从智谱拷贝过来发过去。要是担心密钥泄露，可以自己处理。如果它要求引入库，也让它自己添加。完成这些后，测试一下对话功能，让它讲个哈利波特的故事，看看是否正常。要是觉得对话窗口弹出的形式不好，可以要求它改成在页面内显示。

最后，我们来看看页脚部分。如果都是海外社交媒体，不符合需求，可以改成国内的。把自己的链接拷贝过来，还可以设置悬停在图标上有变化且能直接跳转。

基本框架完成后，大家可以根据自己的需求继续丰富内容，比如添加关于自己、作品集之类的信息，发挥自己的设计想法。会写代码的朋友还可以试试 Cursor 的选中区域对话修改、代码补全和终端报错对话等功能。

完成网站开发后，我们可以利用 GitHub 和 vercel 一键免费部署。先注册一个 GitHub 账号，登录后新建一个代码仓库并命名，把我们的代码文件夹上传。然后在 Cursor 官网用 GitHub 账号登录，新增项目，导入仓库，点击部署和 visit，这样网站就上线啦。大家可以把域名转发给朋友，要是有自己的域名，也可以修改。

我希望给大家分享的都是简单易用、能真正扩大大家能力边界的 AI 工具。后续我还会继续更新相关内容，感兴趣的朋友记得点赞、收藏、关注哦！大家看完也赶紧去试试，期待在评论区看到你们的成果。