【Cursor实战】Cursor+EdgeOne Pages MCP实现一句话建站？

小溪彼岸
336 阅读6分钟

前言

小伙伴们大家好，我是小溪，见字如面。在了解今天的主角前，我们先了解一下传统建站流程：

图片

抛去需求分析、设计、开发和测试阶段，单单一个域名注册或上线部署就难倒了很多人，传统的网站部署要求个人不仅是一个产品和开发者，还需要是一个运维人员。今天的主角就是为了解放我们部署难点而生的，这个平台就是EdgeOne Pages，该平台同时还提供了Pages MCP，使我们完全可以通过聊天的方式一键部署我们的网页。

对以往实战案例感兴趣的小伙伴也可以看往期：

限制

  • 部署目录或者压缩包需要API Token
  • 体验套餐到期停用

图片

优势

  • 部署极简单页面免费
  • 新用户有14天体验套餐

关于EdgeOne

EdgeOne简介

EdgeOne Pages 是基于 Tencent EdgeOne 基础设施打造的前端开发和部署平台，专为现代 Web 开发设计，帮助开发者快速构建、部署静态站点和无服务器应用。通过集成边缘函数能力，实现高效的内容交付和动态功能扩展，支持全球用户的快速访问。

官网地址：edgeone.ai/zh

图片

EdgeOne适用场景

  • 静态与动态网站托管：适合使用静态生成器，如 Next.js、Hexo 等构建的网站，以及使用 React、Vue 等现代前端框架构建的单页应用。
  • 全栈项目开发：通过支持 Pages Functions 、KV 等能力，开发者可以在不依赖传统服务器情况下，在边缘实现轻量化的动态服务。
  • 快速部署与迭代：通过 GitHub 等代码管理平台集成，在每次代码提交时自动构建和部署网站，简化开发部署流程，提升研发效率。

注册登录

需要使用API Token的小伙伴可以选择自己喜欢的方式注册登录

图片

登录成功后，先领取体验礼包

图片

申请API Key

官网直达地址：console.tencentcloud.com/edgeone/pag…

开通Pages权限后，可以直接进入Pages管理页面，选择【API Token】进入API Token列表

图片

点击【创建API Token】创建一个新的API Token

图片

创建完成后，可在API Token列表查看已创建的API Token

图片

产品定价

提供了免费试用套餐和付费套餐

图片

图片

在Cursor中配置MCP

目前在mcp.so上第一个就是EdgeOne Pages MCP

图片

进入EdgeOne Pages MCP详情页获取MCP配置（这里不是最新的，最新配置可以看Github项目：github.com/TencentEdge…

图片

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"],
      "env": {
        // 可选，如需部署文件夹或 ZIP 压缩包，则 API Token 必填
        "EDGEONE_PAGES_API_TOKEN": "",
        // 可选，置空将会创建一个新的 Pages 项目，填入已有的项目名则会更新该项目
        "EDGEONE_PAGES_PROJECT_NAME": ""
      }
    }
  }
}

// Streamable HTTP方式
{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "url": "https://mcp-on-edge.edgeone.site/mcp-server"
    }
  }
}

在Cursor配置->【MCP】->【Add new global MCP server】添加一个新的MCP

图片

在 mcp.json 添加配置，我们这里只部署简单的HTML，不需要部署目录或者压缩包，参数可以不用管，需要的小伙伴可以到EdgeOne官网申请

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "command": "npx",
      "args": ["edgeone-pages-mcp"],
    }
  }
}

图片

添加完成，等待状态变为绿色即可

图片

可以看到EdgeOne Pages MCP目前提供了 部署单页面、目录 或者 压缩包 3种方式

使用示例

准备工作完成后，我们使用Cursor做一个“今日热点新闻资讯”的页面作为演示，首先需要获取热点新闻内容，我们可以在Cursor中输入如下提示词：

使用Web搜索获取10条今日热点新闻资讯并对每条热点新闻进行要点概括，输入到 today_news.md 文件

展开思考内容，可以看到Cursor正在调用Web搜索获取热点新闻

图片

最终得到我们想要的10条热点资讯

图片

接下来，我们可以让Cursor根据获取到的新闻热点资讯生成新闻展示页面

根据中的热点新闻，使用HTML输出展示页面
- 页面美观自然，柔和色彩，内容清晰一目了然，突出重点
- 如需引入三方库，使用CDN引入
- 如需引入icon,可以使用例如Font Awesome等

图片

生成完后，将HTML保存到本地查看效果

图片

双击【index.html】文件在浏览器中查看效果如下：

图片

对效果满意的话，可以直接进行部署。使用EdgeOne Pages MCP部署也很简单，只需要输入如下提示词：

使用EdgeOne Pages部署网页@index.html 

令人意外的是部署直接报错了

图片

后面又经过Cursor多次简化部署还是一直报错，不过经过多次尝试，最终得到一些部署限制规律

图片

最终部署成功的页面是这样的？？？，我只能说要你何用😓。

图片

同样的HTML页面，使用yourware是可以的，yourware的性价比再次提升，预览地址：www.yourware.so/project/ntj…

到此还是有点不死心，通过上传目录再试试吧，本来是不想注册的，没有办法了，注册成功获取到API Token后，首先修改Cursor MCP配置

图片

输入提示词进行部署

使用EdgeOne Pages部署目录@demo1

图片

结果瞬间就部署成功了，预览地址（临时预览地址预览时限只有3个小时，配置域名可以长期保留）：local-upload-1747728748625.edgeone.site?eo\\\\_token=d44250b6577e62609f76af2ea2f2a2ee&eo\\\\_time=1747728929

预览效果也和开发时效果一致，我只能说鹅厂真行👍，整挺好。

图片

总结

使用EdgeOne Pages MCP确实可以部署单页面、项目目录及压缩包。其中部署单页面是免费的，部署项目目录或压缩包是收费的需要配置API Token。正所谓免费的就是最昂贵的，免费的单页面部署需是极简的HTML页面，过于复杂和过大的页面都将会部署失败，如需使用还是建议使用目录或者压缩包部署，新用户有14天体验套餐，同样喜欢折腾的小伙伴可以试试。

友情提示

见原文：【Cursor实战】Cursor+EdgeOne Pages MCP实现一句话建站？

本文同步自微信公众号 "程序员小溪" ，这里只是同步，想看及时消息请移步我的公众号，不定时更新我的学习经验。

avatar
文章
阅读
粉丝