一眼看懂为什么选 AI + EdgeOne Pages
如果你曾折腾过传统建站,就会知道那是一场体力活:买服务器、配域名、写前端、搭后端,还要维护安全和性能。EdgeOne Pages 的出现彻底改变了游戏规则。它提供了完整的无服务器部署体验,从前端页面到动态 API 都能一键搞定。你只需要把代码放在 Git 仓库或者通过 MCP 传过去,它会自动构建、自动发布,并在全球 3,200 多个节点上加速。
官方在 Beta 期间敞开了所有功能,免费使用,没有固定配额限制,只会监控是否滥用。这意味着,即使是完全没有技术背景的人,也能通过自然语言指令完成部署——简直比写 PPT 还轻松。
EdgeOne Pages 的核心优势
- 零配置部署:Git 推送即自动部署,无需手动配置
- 全球加速:3200+ 边缘节点,访问速度提升 50%+
- 免费额度大方:Beta 期间无限制使用,商用后仍有慷慨免费版
- AI 原生支持:结合 MCP 协议,自然语言直接变网站
EdgeOne Pages 支持三种方式导入网站,如果追求全自动快速建站,可以在IDE工具(Cursor、Windsurf、Trae)中使用MCP服务一次完成网站的设计、生成、优化、部署。
先把环境准备好
想要开启自己的建站之旅,只需要准备两个工具:Node.js 和 Cursor。下面的步骤一步一步来,不用担心看不懂。
安装 Node.js 和 EdgeOne Pages MCP
第一步是安装 Node.js,这是运行 MCP 服务的基础。在终端输入 node -v
检查是否已安装。如果没有,根据系统去 nodejs.org 下载 LTS 版本并安装。
💡 安装小贴士
- Windows 用户:下载 .msi 安装包,勾选"Add to PATH"选项
- Mac 用户:可使用 Homebrew:
brew install node
- Linux 用户:使用包管理器:
sudo apt install nodejs npm
安装好 Node.js 后,我们还需要安装 EdgeOne Pages 的 MCP 服务。这一步也很简单:
npm install -g edgeone-pages-mcp
npm install -g edgeone-pages-mcp-fullstack
如果网络环境不佳,可以先把 npm 源改成淘宝镜像:
npm config set registry https://registry.npmmirror.com
npm install -g edgeone-pages-mcp
检查一下是否安装成功:
npx edgeone-pages-mcp --version
终端出现 EdgeOne Pages MCP Server is running
就表示部署引擎已经启用,可以在后台运行着。
🔧 常见安装问题解决
- 权限错误:Mac/Linux 用户在命令前加
sudo
- 网络超时:切换到淘宝镜像或使用 VPN
- 版本冲突:先卸载旧版本再安装:
npm uninstall -g edgeone-pages-mcp
下载和设置 Cursor
接下来安装 Cursor,这是一个内置 AI 助手的开发环境。访问 cursor.com 下载适合系统的版本。安装完成后启动 Cursor。
Cursor 的强大之处
- AI 原生设计:比传统 IDE 更懂你的意图
- 多模型支持:支持 GPT-5、Claude4 等多种 AI 模型
- 代码生成神器:从自然语言直接生成完整项目
- 实时协作:AI 就像你的编程搭档
打开 Cursor 后,按 Ctrl + ,
(Windows)或 Cmd + ,
(Mac)进入设置界面。在 Features → MCP 中点击 Add New MCP Server 按钮,在配置框中输入:
保存后,Cursor 底部状态栏会出现绿色的小点,表示它已经成功连接到本地 MCP 服务。
✅ 连接成功的标志
- 状态栏显示绿色 "MCP Connected"
- 聊天窗口出现 EdgeOne Pages 工具提示
- 可以在 AI 对话中看到部署相关选项
实战:用自然语言创建网站
环境准备好后,可以开始创造属于自己的网页了。下面是两个例子,跟着做一遍,你就掌握了基础。
示例 :个人简历网站
在 Cursor 的聊天窗口输入以下提示:
帮我创建一个个人简历网站并部署到 EdgeOne Pages:
个人信息:
- 姓名:李明
- 职位:产品经理
- 邮箱:[email protected]
- 电话:138-0000-0000
设计要求:
- 现代简约风格
- 响应式布局,支持手机访问
- 包含工作经历、技能、项目经历
- 配色低调专业
部署要求:
- 使用 Next.js
- 部署到 EdgeOne Pages
- 自动配置 HTTPS
AI 会立即开始生成代码和样式,显示诸如"正在创建项目结构…正在配置 Tailwind CSS…正在打包部署…"等进度信息。大约一分钟后,它会给出一个访问地址,例如:
✅ 部署完成!
访问地址:https://liming-resume-i29ddyy0hl.edgeone.app
进一步探索:自定义域名和性能优化
等你熟悉了基本操作,可以尝试更高级的功能:
绑定自定义域名
帮我为网站 https://liming-resume-i29ddyy0hl.edgeone.app 绑定自定义域名 www.liming-portfolio.com:
要求:
- 自动申请 SSL 证书
- 配置 CNAME 记录指导
- 设置域名重定向(www 和非 www)
- 启用 HSTS 安全策略
域名配置完整流程
- DNS 记录配置:AI 会生成具体的 CNAME 记录值
- SSL 证书申请:自动向 Let’s Encrypt 申请并配置
- CDN 加速设置:域名流量自动走 EdgeOne 加速网络
- 重定向规则:统一 www 和非 www 访问
- 安全策略:HSTS、CSP 等安全头自动配置
给提示词的新手建议
高效提示词的四个维度
和 AI 沟通时,越详细越好。你可以从以下四个方面描述:
1. 目标用户画像
目标用户:25-35岁的职场白领,主要使用手机浏览,对设计品味较高,希望快速获取信息
2. 具体功能需求
核心功能:
- 产品展示(图片轮播+详情介绍)
- 在线询价(表单+即时通讯)
- 客户案例(成功案例+客户评价)
- 关于我们(团队介绍+服务流程)
3. 设计风格偏好
设计要求:
- 简洁现代的商务风格
- 蓝白色调为主,少量橙色点缀
- 大量留白,突出核心信息
- 动效适中,不影响加载速度
4. 技术偏好和约束
技术要求:
- 优先使用 Next.js
- 必须支持 SEO 优化
- 移动端体验优先
- 加载速度 < 3 秒
提示词模板库
个人品牌网站模板
创建一个[职业]的个人品牌网站:
个人信息:
- 姓名:[姓名]
- 职业:[职业描述]
- 核心技能:[技能1、技能2、技能3]
- 联系方式:[邮箱、电话、社交媒体]
内容规划:
- 首页:个人介绍+核心亮点
- 作品集:[作品类型]展示
- 服务介绍:[服务内容]详情
- 博客文章:[专业领域]观点分享
- 联系页面:多种联系方式
设计风格:[现代简约/商务专业/创意个性]
色彩方案:[主色调+辅助色]
特殊要求:[任何特殊需求]
小型企业官网模板
为[公司名称]创建企业官网:
公司基本信息:
- 行业:[所属行业]
- 规模:[员工数量]
- 成立时间:[年份]
- 核心业务:[主营业务描述]
页面结构:
- 首页:品牌形象+核心服务
- 产品/服务:[具体产品/服务列表]
- 客户案例:[案例类型]展示
- 关于我们:公司历程+团队介绍
- 新闻动态:行业资讯+公司动态
- 联系我们:多渠道联系方式
营销目标:[获客/品牌宣传/在线销售]
目标客户:[客户画像描述]
竞争优势:[核心竞争力]
过去我们常听到"学会编程改变命运",而今天,AI 与边缘计算让普通人也能驾驭技术。EdgeOne Pages 让部署变成了一种聊天体验,AI 则将你的语言转换为现实。对创意工作者来说,最大的门槛不再是技术,而是想象力。