目录
[0. 安装与配置 Cursor](#0. 安装与配置 Cursor)
[一、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输入：应用阿里云 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 前端监控接入：
// 在 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" 持续检测代码安全漏洞