目录
0. 安装与配置 Cursor
一、Cursor 代码生成阶段（核心阶段）
二、阿里云服务配置（关键配置项）
三、高级功能集成
四、调试与监控
之前看到了不少关于 cursor 0 代码搭建的宣传，博主今天上美育课，突然想到 0 代码搭一个网站并上线要多久呢，尝试后发现半个小时就够啦(。・∀・)
- 环境配置 5min+ 和 cursor 沟通生成代码 15min+部署上线并简单调试 10min
- 0 代码是整个前端界面均由 cursor 生成的，博主只敲了一些简单的部署命令行，和运用大一学的前端三件套进行了一些简单的调试
- 感受：网站是可以正常访问滴，就是页面还是比较粗糙的，如果想美化或者进行后台管理的话还是更推荐采取 hexo+github+netlify+cloudflare 来搭建个人网站叭🤔
网站链接：LvyNote - 首页
效果图：
ipad 上
手机上
0. 安装与配置 Cursor
-
- 官网下载安装（https://www.cursor.com/），用 GitHub 账号登录可以获取 14 天 Pro 试用权限~
一、Cursor 代码生成阶段（核心阶段）
- 环境准备与需求拆解
-
- 安装 Cursor 后通过
Ctrl+Shift+P> "Workspace: Init" 创建项目脚手架 - 使用「结构化需求描述法」生成初始代码：
- 安装 Cursor 后通过
- 迭代优化流程
-
- 布局调整：选中
<body>标签按Ctrl+K输入：
- 布局调整：选中
修改为左右分栏布局，左侧固定导航(30%)，右侧主内容区(70%)
增加移动端汉堡菜单，断点设置在 768px-
- 样式优化：选中 CSS 文件使用
Ctrl+L输入：
- 样式优化：选中 CSS 文件使用
应用阿里云 Ant Design 色系：#1677FF 为主色调
为所有卡片添加 hover 放大效果（transform: scale(1.03)）-
- 功能增强：创建
api目录后触发Ctrl+L：
- 功能增强：创建
生成联系表单的 JS 提交逻辑，对接阿里云 API 网关
需包含防重复提交机制和 loading 状态 二、阿里云服务配置（关键配置项）
- 服务器选购与初始化
# 选购配置建议（华东1区）：
- 轻量应用服务器：2核4G（￥89/月）
- 系统盘：Ubuntu 22.04 + 60GB SSD
- 安全组：放通 80/443 端口，限制 SSH 22 端口源IP# 环境初始化
sudo apt update && sudo apt install nginx git -y
sudo mkdir -p /var/www/html/{assets,dist}- 域名与HTTPS配置
# /etc/nginx/sites-available/personal-site
server {listen 80;server_name yourdomain.com;root /var/www/html/dist;index index.html;# 阿里云OSS资源代理（需先在控制台创建存储桶）location /assets/ {proxy_pass https://your-bucket.oss-cn-hangzhou.aliyuncs.com/;}
}# 申请免费SSL证书后：
sudo certbot --nginx -d yourdomain.com- 自动化部署脚本
# deploy.sh
#!/bin/bash
rsync -avz --delete ./dist/ root@your-server-ip:/var/www/html/dist/
ssh root@your-server-ip "systemctl reload nginx"我后来是用的oss存储，进行域名绑定来实现的外网访问
三、高级功能集成
- 动态内容实现方案
@startuml
[前端] -> [API网关] : POST /contact-form
[API网关] -> [函数计算FC] : 触发预置函数
[函数计算FC] -> [表格存储] : 写入用户消息
[函数计算FC] -> [邮件推送] : 调用SendMail接口
@enduml（使用阿里云 Serverless 架构实现零运维成本）
- 性能优化技巧
-
- CDN 加速：在阿里云控制台将 OSS 存储桶绑定 CDN
# 修改资源引用路径
<link href="https://cdn.yourdomain.com/assets/css/main.css" rel="stylesheet">-
- 浏览器缓存策略：
location ~* \.(js|css|png|jpg)$ {expires 365d;add_header Cache-Control "public, no-transform";
}四、调试与监控
- 实时调试方案
-
- 使用 Cursor 的
Debug with Chrome功能注入调试代码 - 阿里云 ARMS 前端监控接入：
- 使用 Cursor 的
// 在 index.html 头部添加
<script>
!(function(c,b,d,a){c[a]||(c[a]={});c[a].config={pid:"your-pid"};
var s=b.createElement("script");s.src=d;b.getElementsByTagName("head")[0].appendChild(s)})
(window,document,"https://retcode.alicdn.com/retcode/bl.js","__bl");
</script>
- 异常处理机制
-
- 在 Cursor 中设置自动错误捕获：
// 全局错误捕获
window.addEventListener('error', e => {console.error('Global Error:', e);// 自动生成错误上报代码片段（Ctrl+K输入"生成错误上报逻辑"）
});成本控制表（以华东1区为例）：
| 服务类型 | 配置 | 月成本 |
| 轻量应用服务器 | 2核4G/60GB SSD | ￥89 |
| OSS 存储 | 50GB标准存储 | ￥6.5 |
| CDN 流量 | 100GB下行流量 | ￥23 |
| 函数计算 | 100万次请求 | ￥0.00 |
| 总计 | - | ￥118.5 |
注意：
- 阿里云备案期间可用
http://服务器IP临时访问，但需关闭网站交互功能 - Cursor 生成的表单需手动添加 CSRF 防护：
// 在提交逻辑中添加
headers: {'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
}- 使用
Ctrl+Shift+P> "Toggle Validation" 持续检测代码安全漏洞
)