目录
0. 安装与配置 Cursor
一、Cursor 代码生成阶段（核心阶段）
二、阿里云服务配置（关键配置项）
三、高级功能集成
四、调试与监控
之前看到了不少关于 cursor 0 代码搭建的宣传，博主今天上美育课，突然想到 0 代码搭一个网站并上线要多久呢，尝试后发现半个小时就够啦(。・∀・)
环境配置 5min+ 和 cursor 沟通生成代码 15min+部署上线并简单调试 10min0 代码是整个前端界面均由 cursor 生成的，博主只敲了一些简单的部署命令行，和运用大一学的前端三件套进行了一些简单的调试感受：网站是可以正常访问滴，就是页面还是比较粗糙的，如果想美化或者进行后台管理的话还是更推荐采取 hexo+github+netlify+cloudflare 来搭建个人网站叭🤔
网站链接：LvyNote - 首页
效果图：
ipad 上
手机上
0. 安装与配置 Cursor
官网下载安装（https://www.cursor.com/），用 GitHub 账号登录可以获取 14 天 Pro 试用权限~
一、Cursor 代码生成阶段（核心阶段）
环境准备与需求拆解
安装 Cursor 后通过 Ctrl+Shift+P > "Workspace: Init" 创建项目脚手架使用「结构化需求描述法」生成初始代码：
迭代优化流程
布局调整：选中
标签按 Ctrl+K 输入：修改为左右分栏布局，左侧固定导航(30%)，右侧主内容区(70%)
增加移动端汉堡菜单，断点设置在 768px
样式优化：选中 CSS 文件使用 Ctrl+L 输入：
应用阿里云 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
# 修改资源引用路径
浏览器缓存策略：
location ~* \.(js|css|png|jpg)$ {
expires 365d;
add_header Cache-Control "public, no-transform";
}
四、调试与监控
实时调试方案
使用 Cursor 的 Debug with Chrome 功能注入调试代码阿里云 ARMS 前端监控接入：
// 在 index.html 头部添加
异常处理机制
在 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" 持续检测代码安全漏洞