返回上一页 AI视频创作秘籍大揭秘:4种超酷炫技巧全解析 网站建设公司资讯 liveportrait:让照片视频动起来的神奇工具

当前位置:首页 > 观点资讯 > 软件定制开发 > 详细内容

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

时间:2024-11-18 浏览:230次 + 打印

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

Cursor,网站开发,AI编程,免费部署,个人网站
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 工具。后续我还会继续更新相关内容,感兴趣的朋友记得点赞、收藏、关注哦!大家看完也赶紧去试试,期待在评论区看到你们的成果。
网站建设公司项目经理

扫二维码与项目经理沟通

我们在微信上24小时期待你的声音
解答:网站优化、网站建设、APP开发、小程序开发

藤设计是一家互联网开发公司,专注于为客户提供供网站建设网站优化APP开发小程序开发、网络营销推广等一系列解决方案。我们以客户需求为导向,并以客户利益为出发点,充分发挥自身的设计及专业建站优势,从基础建设到营销推广,为客户探索并实现商业价值的最大化,致力于为所有谋求长远发展的企业做出贡献。

Learn more

Teng Design 专业网站设计制作

Learn more

Our Service 上海网站建设
QQ客服 微信客服 返回顶部
网站制作
扫二维码与项目经理沟通
×