大家好,我是程序员鱼皮,今天分享一个用 AI 提升效率的神技巧~

以前,我们开发一个网站,需要先提出需求、再设计方案、再写代码开发、最后部署上线。我们都知道 AI 现在写代码越来越溜了,慢慢地替代了我们程序员写代码的部分工作;但其实,AI 的能力不止于此,利用 MCP,它甚至可以直接帮我们把网站部署上线!

好好好,合着我 只要提个一句话需求,写代码和部署都不用我来干了,让我退化是吧?

下面就来带大家实操一下,让 AI 帮我生成并部署个人博客网站,1 分钟学会~

利用 MCP,让 AI 部署网站

准备工具

我们需要用到的工具包括:

  • Cursor:AI 编程工具,负责调用 AI 生成代码

  • EdgeOne Pages MCP:能够将网站快速部署到 CDN 并生成公开访问链接的服务

什么是 EdgeOne Pages MCP 呢?

拆解一下这几个单词:

EdgeOne 是腾讯云提供的 CDN 加速服务,可以把用户的网站资源缓存到离用户最近的边缘节点,提升网站性能。

EdgeOne Pages 是基于这个 CDN 的网站部署服务,可以让你轻松地将网站部署到 CDN 上,并且得到公开访问地址,完全不需要自己搭建服务器

MCP 则是目前很火的模型上下文协议,让 AI 模型能够轻松地使用各种工具来增强能力,完成更复杂的任务。

EdgeOne Pages MCP 的作用就显而易见了 —— 给 AI 提供网站部署工具,这也是一个比较热门的 MCP:

快速实战

1、开通 Pages 服务

首先到 EdgeOne 控制台 开通 Pages 服务:

开通服务后,默认进入了项目管理页面,我们先不急着创建项目:

由于等下要通过 MCP 完成网站部署,所以要先获取 API Token,作为调用服务的凭证:

2、配置 MCP

新建一个项目文件夹 yupi-blog,在 Cursor 中打开,然后进入设置,添加 MCP 服务:

将这段配置复制粘贴到 MCP 配置文件中:

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

注意要把 API Token 改成你自己的,并且把注释删除掉,否则会报错:

正常情况下,你会看到 MCP 服务成功加载,绿了绿了!

这个服务提供了 2 个工具:

  • deploy_html:部署 HTML 内容到 EdgeOne Pages,返回公开访问 URL

  • deploy_folder_or_zip:部署文件夹或 ZIP 文件到EdgeOne Pages,返回公开访问 URL

注意,这个 MCP 服务需要 NPX 工具才能在本地成功启动。NPX 可以直接运行 NPM 包中的命令而无需全局安装,常用于执行脚手架工具和一次性命令。

如果你没有 NPX 命令、或者 Node.js 版本过低(最好不要低于 20),都会导致工具无法加载。

这时,你只需要到官网安装 Node.js,会自动帮你安装 NPM 和 NPX 工具:

如果没有自动安装 NPX 工具,那就用 NPM 包管理工具安装 NPX:

npm i -g npx

3、生成并部署网站

准备好 MCP 服务后,下面来生成网站,输入下列提示词,让 AI 帮我生成个人博客网站:

帮我根据程序员鱼皮的 GitHub 生成个人博客网站,极客风格,简洁大气;生成完成后部署网站
@https://github.com/liyupi

查看 AI 的思考过程,它已经想到要使用 EdgeOne Pages 去部署网站了:

很快网站就生成并部署完成,可以看到 AI 调用了 MCP 部署 HTML 的工具,得到了访问地址:

直接打开网址就看到效果了,不要太方便!

不过目前生成的网站比较简单,就一个 HTML 页面,甚至没有在本地创建代码文件。

4、部署网站目录

再来尝试一个更复杂的项目吧,使用下面的提示词,让 AI 利用前端框架开发多页面网站:

帮我根据程序员鱼皮的 GitHub 生成个人博客网站,极客风格,简洁大气;
需要包含多个页面,要求使用 Vue 框架模块化开发;
生成完成后部署网站
@https://github.com/liyupi/

这次要等待的时间会比较久,鱼皮建议大家趁这个时间接杯水,起来活动活动。最近久坐不动,我感觉自己的肩膀已经硬如磐石了。

我们会发现,虽然生成了一大堆代码,但是并没有自动部署,只是给出了部署建议:

看一下 AI 的思考过程,原来是使用部署工具失败了:

经过我的测试发现,如果想部署网站目录或压缩包,最好先在 Pages 网页版创建一个项目,然后让 MCP 把网站文件传到这个项目内。

那就先利用官方提供的例子,随便部署一个网站:

修改项目的名称为 yupi-blog,直接点击 “开始部署” 就好:

等待部署中,30 秒左右就好了:

项目部署成功后,我们修改 Cursor MCP 的配置,填入刚刚创建的项目名称:

然后再跟 AI 对话,让它帮我部署网站目录:

可以看到这次 AI 成功执行了部署工具,并且得到了访问地址:

看下网站效果,还不错吧,很有科技感!

不过要注意,生成的网站默认使用 临时域名,有效期比较短:

如果你有域名的话,建议配置一下自定义域名,就可以无限期访问啦~

怎么样,是不是很简单?

等能够轻松在手机上使用 MCP 的时候,试想一下,你走在路上跟朋友聊天,朋友向你推荐了一位博主 —— 程序员鱼皮,你只需要跟 AI 说一句话,2 分钟后,就能给朋友访问介绍这个博主的网站,跟变魔术似的。

值得一提的是,EdgeOne Pages 目前应该是免费的,真香了。

不过即使有一天不免费了、或者增加了限制,我们也有替代方案,提前收藏一下,说不定以后会用得上~

其他替代方案

替代方案就是使用 Vercel 这样一个网站部署工具,作用和 Pages 类似,也能一键部署网站并得到访问地址。不过国内访问它的速度可能比较慢,你懂的。

Vercel 提供了命令行工具,可以让我们通过一行命令把自己的项目部署到平台。先用 NPM 安装 Vercel CLI 工具:

npm i -g vercel@latest

然后,直接在想部署的项目文件夹下输入 vercel 命令,就能部署当前项目了:

让 AI 完成自动部署的方法也很简单,你只需要在提示词中告诉 AI “你可以使用 vercel 命令行工具完成网站部署”,聪明如它,一定能帮你完成任务。


OK,以上就是本期分享,学会的话记得给鱼皮点赞哦~

更多编程学习资源

让 AI 帮我部署网站,太方便了!的更多相关文章

  1. [转]IIS上部署网站

    如何在IIS6,7中部署ASP.NET网站 阅读目录 开始 查看web.config文件 在IIS中创建网站 IIS6 添加扩展名映射 IIS6 无扩展名的映射 目录的写入权限 SQL SERVER的 ...

  2. Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享)

    Gradio入门到进阶全网最详细教程[一]:快速搭建AI算法可视化部署演示(侧重项目搭建和案例分享) 常用的两款AI可视化交互应用比较: Gradio Gradio的优势在于易用性,代码结构相比Str ...

  3. 部署网站出现System.ServiceModel.Activation.HttpModule错误

    1. 部署网站到IIS7.5,Window 2008的时候出现这个错误 2. 错误信息 Server Error in '/' Application. Could not load type 'Sy ...

  4. 购买SSL证书到部署网站遇到的若干问题

    作为一个菜鸟,对于SSL证书,我了解不多,只知道用了它网站更安全,所以这次使用SSL证书途中遇到了各方面的各种问题,到今天为止终于全部解决. 一.证书格式 前两天在那什么云上面买了个SSL证书,是Wo ...

  5. 本地win8系统部署网站遇到的问题

    网站开发环境:vs2013 .操作系统是win8.1系统. iis8   win8系统激活码:00261-30000-00000-AA825 需要部署的网站文件夹放在了桌面上,在iis里配置时,无法启 ...

  6. IIS上部署网站404错误

    新装的系统上部署.net网站遇到403.404错误,可能原因记录: 1.应用程序池选择错误,一般选择4.0的 2.ASP.NET4.0应用程序池未安装(一般先安装了framework4.0,后安装ii ...

  7. 关于局域网内IIS部署网站,本机可访问,而网内其他用户无法访问问题的解决方法

    在Window7操作系统中安装配置好IIS后,在本地IIS上部署网站程序没有问题,但是局域网等远程用户不能正常访问网站程序,提示“Internet Explorer 无法显示该网页”. 问题解决思路如 ...

  8. 分布式部署网站---文件系统的存储--ftp上传图片到指定文件服务器

    问:通常一个网站程序发布在一个iis服务器上,但是如果要分布式部署网站.文件系统该如何存储呢? 答:通常的就是给网站文件系统一个子域名.比如 https://images.web.com. 网站程序内 ...

  9. 怎样在win7 IIS中部署网站

    怎样在win7 IIS中部署网站? IIS作为微软web服务器的平台,可以轻松的部署网站,让网站轻而易举的搭建成功,那么如何在IIS中部署一个网站呢,下面就跟小编一起学习一下吧. 第一步:发布IIS文 ...

  10. 【阿里云】云服务器 ECS部署网站

    我是广告!!! https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=hgk32vx5 领券更优惠,老板看着来~ 1.服务器 ...

随机推荐

  1. robotframework之添加browser库

    browser库的官网地址需要FQ,在网上找到了不需要FQ的版本 robotframework-browser · PyPI 1.下载node.js 下载地址:https://nodejs.org/e ...

  2. 关于:js怎么获取元素的自定义属性的问题(原生JavaScript)

    最近项目需要把后端传过来的数据隐藏的保存在页面中,方便后边做事件处理时使用.鉴于之前总是在后端处理后的页面中看到元素里除了常见的id.name属性外的data-xxx,就想到:元素的属性必然是可以自定 ...

  3. 备注一下,SolidColorBrush,自定义颜色

    new SolidColorBrush((Color)ColorConverter.ConvertFromString("#27212B"))

  4. coreJava笔记——1

    一.数组 对于数组的操作: 1.System.arrayopy(旧数组,下表,新数组,下表,长度) 2.新对象 = Arrays.copyOf(旧数组,长度): \如果要删除数组中的一个元素,先用1. ...

  5. Dify接入RAGFlow无返回结果

    0. 前言 在介绍该问题的解决方法前,先谈一谈最近一段时间使用Dify和RAGFlow的一些感受,希望可以给有需要的人提供一些思路或帮助.需要解决方法的可以直接跳到第4部分. 最近在摸索基于知识库的问 ...

  6. DeepSeek+Coze实战:如何从0到1打造一个热点监控智能体

    大家好,我是汤师爷,专注AI智能体分享~ 短视频小白经常会遇到这样的困扰. 每天花大量时间刷视频,想要找到你所在赛道的爆款内容,却总是难以系统地整理和分析? 想要批量获取某个关键词的爆款视频数据,但是 ...

  7. Spring AOP面向切面编程 通知类型

    Spring AOP面向切面编程 通知类型 通知分为: 前置通知 执行方法之前通知 后置通知 执行方法之后通知 异常通知 相当于cache里面的内容 最终通知 相当于finally 环绕通知 前四种通 ...

  8. 漏洞预警 | WordPress Plugin Radio Player SSRF漏洞

    0x00 漏洞编号 CVE-2024-54385 0x01 危险等级 高危 0x02 漏洞概述 WordPress插件Radio Player是一种简单而有效的解决方案,用于将实时流媒体音频添加到您的 ...

  9. vue3 基础-生命周期函数

    在 vue 中, 生命周期函数可理解为 "在某个时刻, 会自动执行的函数". 先直观感受一下图示. 一共就八个: <!DOCTYPE html> <html la ...

  10. vscode调试python时提示无法将“conda”项识别为 cmdlet、函数、脚本文件或可运行程序的名称的解决方法

    (1)vscode在调试python文件时提示如下信息: conda : 无法将"conda"项识别为 cmdlet.函数.脚本文件或可运行程序的名称.请检查名称的拼写,如果包括路 ...