使用EdgeOne Pages与MCP打造五一登顶岗什卡雪山攻略网站的实践指南-阿南达文事网

使用EdgeOne Pages与MCP打造五一登顶岗什卡雪山攻略网站的实践指南

随着互联网技术的发展，人工智能（AI）在内容创作和网站开发中的应用越来越广泛。为了更好地利用这些先进技术，Model Context Protocol（模型上下文协议，简称MCP）提供了一种开放的协议框架，使得AI模型能够安全地与本地及远程资源进行交互。结合EdgeOne Pages Deploy MCP服务，可以快速部署HTML内容，并生成公开访问链接，这为创建和分享AI生成的内容提供了极大的便利。

本文将详细介绍如何使用EdgeOne Pages与MCP来快速构建一个关于五一期间登顶岗什卡雪山主峰的行程攻略，同时包含注意事项、装备、费用等。

一、MCP概述

（一）什么是MCP？

MCP是一种开放协议，旨在让AI模型能够安全且高效地与本地和远程资源进行交互。它允许开发者定义和控制模型执行环境，包括数据源、计算资源以及输出格式等关键参数。通过MCP，可以确保AI模型不仅能够在受控环境下运行，还能动态适应不同的应用场景需求。

（二）MCP的优势

安全性：MCP通过严格的权限管理和数据加密机制，保障了模型与资源交互的安全性。
灵活性：支持多种编程语言和框架，便于集成到现有系统中。
扩展性：易于扩展，可根据项目需求调整配置，满足不同规模的应用场景。

二、EdgeOne Pages Deploy MCP简介

（一）EdgeOne Pages是什么？

EdgeOne Pages是一项专用服务，它能够将HTML内容快速部署到网络边缘节点上，从而实现高速加载和全球访问。该服务特别适合用于展示静态网页内容，如博客文章、产品页面或我们这里要搭建的旅行攀登雪山攻略。

Pages MCP Server 利用无服务器边缘计算能力和 KV 存储，通过 API 接收 HTML 内容，即可自动生成即时生效的公共访问链接，实现秒级静态页面部署并内置错误处理机制。

（二）EdgeOne Pages Deploy MCP的功能特点

快速部署：一键式部署流程，简化了从代码编写到上线发布的全过程。
全球访问：利用分布式网络架构，保证用户无论身处何地都能获得良好的访问体验。
自动生成访问链接：部署完成后立即生成可共享的公开链接，方便即时预览和分享。

三、准备工作

在开始构建行程攻略网页之前，我们需要做一些准备工作，配置MCP服务。

（一）尝试安装在VScode中安装Cline插件

在插件市场汇总搜索到Cline。

选择一个API Provider登录

选择Cline中的这个标识，在配置界面输入如下配置：

代码语言：json复制

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

无法成功连接，这个可能不支持cmd的方式。

（二）尝试安装MCP客户端：这里选择Cursor。

Cursor 是一款现代化的代码编辑器和开发工具，旨在为开发者提供更高效、智能化的编程体验。它结合了传统代码编辑器（如 VS Code）的强大功能与人工智能技术的优势，帮助开发者更快地编写、调试和优化代码，同时支持配置MCP。

下载完成之后开始安装。

安装完成后在配置中找到MCP，添加一个MCP Server。

显示成功连接了。

四、在Cursor开启交互式对话构建网页

在对话中选择Agent模式，输入如下的指令：

代码语言：txt复制

我在北京，想今年五一的时候去爬岗什卡雪山，帮我写一份行程攻略，包括需要的装备、注意事项、日程安排等。

接下来，让它帮我生成一个HTML页面。

代码语言：txt复制

根据上面的信息，帮我提供一个完整的攻略，生成一份美观、布局合理的HTML页面，同时提供HTML代码

开始调用MCP Tool。

生成了访问的页面。

看下效果如何？

页面布局不太合理，让AI继续帮忙优化下。输入如下指令：

代码语言：txt复制

针对生成的网页重新调整布局，需要适配14寸笔记本的屏幕，同时丰富下网页背景，加上些动态元素展示

再来看看效果。还是不太美观。

继续让AI帮忙来完善，指令如下：

代码语言：txt复制

当前网页中行程安排、必备装备、注意事项、费用预算都缺失了，需要完善。同时在页面增加个小游戏，还有进行微信分享的功能。

调整了好多版本，AI要重新进行设计了。

下面会进行交互式设计，先做了一个整体的页面。

继续完善每个组件的内容。先添加行程安排、必备装备和注意事项部分。不过AI完善之后又跑偏了。

重新让它按照上面的页面进行，看它是否能成功执行。

这次终于理解对了。点击最上面的每个菜单，会跳转到对应的内容。

右上角增加了微信分享按钮。

还可以玩玩趣味小游戏。

最终网页的访问链接：/share/u3X-KNTW1y7oMjar4VkyA

五、体验总结

在使用 EdgeOne Pages 和 Model Context Protocol (MCP) 构建网页的过程中，我深刻感受到了这两项技术的强大功能和灵活性。以下是我对整个过程的体验总结。

1、MCP 提供了一种全新的开发模式，通过 AI 模型与本地/远程资源的安全交互，使得网页开发更加智能化，不过要开发出一个自己满意的网页还是比较耗时的，这次就经过近几十次的调整，因为每次调整AI不能完全再原有的基础上改动，调来调去就很花时间，现在还不能后腿到某个对话重新来。

2、EdgeOne Pages 的一大亮点是其极简的操作流程。AI与MCP交互生成好HTML，EdgeOne 就能自动检测并完成部署。这种“一键式”部署方式极大地简化了传统网页上线的复杂步骤，特别是在项目初期需要频繁迭代时，节省了大量时间。

每次提交代码后，EdgeOne Pages 会立即生成一个公开访问链接，可以即时查看网页效果。能够快速验证设计和功能是否符合预期，再进行修改。

3、尝试了Vscode中Cline插件配置edgeone-pages-mcp-server，好像不支持command，希望可以支持更多的配置方式，比如URL等。

4、再反复调整了好多次之后，终于实现了一个还不错的页面。

主页是雪山的背景，然后点击顶部的每个菜单都会跳到对应的内容。

右上角增加微信分享功能的集成使得用户可以轻松将网页转发给朋友或发布到朋友圈。

同时嵌入的互动游戏不仅增加了趣味性，还提升了用户的互动感，不再是一个静态的内容。

此外，首页的报名活动和了解更多，像增加超链接，Ai一直没有做成功，有点遗憾。

这次五一出行方便多了，时刻都可以查看这些信息，并且自己还可以更新更多内容进去，来分享给一起出行的小伙伴。

总体而言，使用 EdgeOne Pages 和 MCP 构建网页愉快且高效。如果你正在寻找一种简单而强大的方式来创建和部署网页，强烈推荐尝试 EdgeOne Pages 和 MCP。不仅能帮助你快速实现目标，还能让你专注于创意本身，而不必担心繁琐的技术细节。

使用EdgeOne Pages与MCP打造五一登顶岗什卡雪山攻略网站的实践指南