什么是EdgeOne Pages？
EdgeOne Pages 是腾讯云推出的一站式边缘开发与部署平台，基于全球边缘节点网络和 Serverless 架构，为开发者提供从代码托管到全球分发的全流程服务。其核心价值在于将边缘计算能力与现代 Web 开发范式深度融合，支持静态站点托管、动态应用开发、边缘函数部署等场景，尤其适合需要快速迭代、全球化加速或低成本运维的项目。
与 GitHub、GitLab 等代码托管平台无缝对接，每次代码提交自动触发构建和部署流程。例如，开发者修改 React 组件后，EdgeOne Pages 会自动打包、压缩并推送至全球节点3。
如何基于EdgeOne下的DeepSeek模版搭建一个ai网站
下面我们就使用EdgeOne里面的DeepSeek模版搭建一个deepseek问答的网站，并且还能装载上我们的自己的域名进行访问操作
还没有使用过Open Edge的新人用户，我们点击Pages平台进行开通操作
点击创建项目
这里此时需要我们选择一种Git仓库，我们这边选择Gitee，因为国内的方便访问
这里我们绑定好我们的Gitee之后，我们不需要选择仓库，我们直接选择下面的模版
配置好基础的东西之后我们直接点击创建操作
然后稍等一会儿他就会自动帮你进行部署操作了
这个时候我们可以发现我们的Gitee将这个deepseek-r1-edge的项目克隆下来了
并且有详细的教程
这里会显示部署成功
这边我们可以通过预览链接进行访问操作
那么现在我就部署好了一个属于我自己的deepseek网站了
并且实际的效果是和deepseek官网的差不多，并且回答的速度还快了很多
这个网站的话为保障内容合规，默认域名链接仅提供3小时限时预览，请及时添加 自定义域名 ，以确保服务持续可用。
可将域名作为一个可持久调用的api地址
那么为了能长久的进行访问，我们这里进行域名的绑定，我在腾讯云花15元注册一个专属的域名hyk52syx.club
域名需要实名认证才能进行购买，购买之后还需要进行ICP备案
腾讯云域名注册地址
ICP备案
下面进行备案操作
选择正确信息
域名备案的话是需要时间审核的
在域名审核结束之后呢，我们就可以在这里使用了
在这里添加你的域名
然后他会提醒你的域名是需要进行解析操作的，我们按照他给出的实例进行操作就行了
在腾讯云控制台找到这个解析
进入到了解析的页面，我们点击添加记录，输入上面他要求你解析的具体值
我发现我们这边添加自定义域名的时候还能给这个域名加个证书，还得是腾讯云考虑的周到，下面是他要求我所解析的域名
在解析之后我们就可以点击EdgeOne这个平台进行验证操作了
可以看的到我们这边是正在部署的
然后稍等一会儿就搭建好了
这个就是我的基于EdgeOne平台的deepseek模版搭建出来的DS网站
随便问他一个问题，还蛮不错的
这个项目的话我觉得要是加上能复制答案的功能就更好了
当然了，你如果觉得我的文章可能差点意思，你可以点击链接查看 DeepSeek 模板的使用教程及视频：快速构建和部署您的 Web 应用
什么是EdgeOne Pages Deploy MCP Server？
EdgeOne Pages 的 MCP Server 是腾讯云推出的一款基于边缘计算和大语言模型（LLM）的新型开发工具，旨在通过标准化协议实现 AI 与边缘应用的无缝协同。它将 MCP（Model Context Protocol）协议深度集成到 EdgeOne Pages 平台中，为开发者提供了一种革命性的工作流 ------ 通过自然语言指令直接生成并部署 Web 应用，无需手动编写代码或配置服务器。以下从技术原理、核心功能、应用场景等维度展开详细解析。
如何基于EdgeOne Pages Deploy MCP Server搭建一个html网站
EdgeOne Pages Deploy MCP 是一项专用服务，能够将 HTML 内容快速部署到 EdgeOne Pages 并生成公开访问链接。这使您能够立即预览和分享 AI 生成的网页内容。
所以我们可以在本地创建一个html网页，然后利用MCP Server快速进行一个部署操作，让别人都能通过链接访问到，那么下面就开始我们的实操吧
Pages MCP Server 利用无服务器边缘计算能力和 KV 存储，通过 API 接收 HTML 内容，即可自动生成即时生效的公共访问链接，实现秒级静态页面部署并内置错误处理机制。
在创建html代码之前我们需要对我们的编译器进行一个配置操作，就是添加新的MCP服务器
我们先打开Cursor，并且一定版本是最新版本的
打开到settings进入到设置里面
添加新的MCP服务器
我们可以如下这么设置
当然了，如果你是最新版本的话，你点击那个添加所有的MCP服务器的话可以是直接对配置文件进行设置的
那么我们就输入下面的代码就行了，在任何支持 MCP 的客户端中，您也可以使用以下 JSON 配置：
JSON
{
"mcpServers": {
"edgeone-pages-mcp-server": {
"command": "npx",
"args": ["edgeone-pages-mcp"]
}
}
}
我们再次打开对应的位置就能看到我们这里变成绿色的了，就说明我们配置成功了并且成功链接了
配置好了之后我们就可以开始使用cursor对代码进行一个编写操作了
我们这里让cursor帮我们写一个关于公司的html介绍
在cursor帮我们将代码生成好了之后，我们直接输入命令将代码部署到 EdgeOne Pages 并生成公开访问链接，然后我们就能通过对应的链接进行访问操作了
快速访问链接，部署的速度快，并且效果十分好，让我很满意啊
核心代码如下：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>湖北工程 - 专业工程服务</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
color: #333;
}
.header {
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
color: white;
padding: 2rem 0;
text-align: center;
}
.company-name {
font-size: 2.5rem;
margin-bottom: 1rem;
animation: fadeIn 1s ease-in;
}
.slogan {
font-size: 1.2rem;
opacity: 0.9;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section {
padding: 4rem 0;
}
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 2rem;
color: #1e3c72;
}
.about-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 2rem;
}
.about-text {
flex: 1;
min-width: 300px;
}
.services {
background-color: #f5f5f5;
}
.service-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.service-item {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.service-item:hover {
transform: translateY(-5px);
}
.culture {
text-align: center;
}
.culture-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.value-item {
padding: 1.5rem;
background: #f8f9fa;
border-radius: 8px;
}
.contact {
background: #1e3c72;
color: white;
}
.contact-info {
text-align: center;
}
.footer {
background: #0f1f3d;
color: white;
text-align: center;
padding: 1rem 0;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 768px) {
.company-name {
font-size: 2rem;
}
.section {
padding: 2rem 0;
}
.about-content {
flex-direction: column;
}
}
</style>
</head>
<body>
<header class="header">
<div class="container">
<h1 class="company-name">湖北工程</h1>
<p class="slogan">专业品质 · 诚信服务</p>
</div>
</header>
<section class="section about">
<div class="container">
<h2 class="section-title">关于我们</h2>
<div class="about-content">
<div class="about-text">
<p>湖北工程是一家专业的工程服务公司，致力于为客户提供高质量的工程解决方案。我们拥有经验丰富的专业团队，始终坚持"质量第一、服务至上"的经营理念，为客户创造最大价值。</p>
</div>
</div>
</div>
</section>
<section class="section services">
<div class="container">
<h2 class="section-title">主营业务</h2>
<div class="service-grid">
<div class="service-item">
<h3>工程设计</h3>
<p>提供专业的工程设计服务，确保项目的可行性和效率。</p>
</div>
<div class="service-item">
<h3>工程施工</h3>
<p>专业的施工团队，严格把控施工质量，确保工程安全。</p>
</div>
<div class="service-item">
<h3>技术咨询</h3>
<p>为客户提供专业的技术咨询服务，解决工程难题。</p>
</div>
</div>
</div>
</section>
<section class="section culture">
<div class="container">
<h2 class="section-title">企业文化</h2>
<div class="culture-values">
<div class="value-item">
<h3>诚信为本</h3>
<p>以诚信为基础，赢得客户信赖</p>
</div>
<div class="value-item">
<h3>专业创新</h3>
<p>持续创新，追求卓越品质</p>
</div>
<div class="value-item">
<h3>合作共赢</h3>
<p>与客户建立长期战略合作关系</p>
</div>
</div>
</div>
</section>
<section class="section contact">
<div class="container">
<h2 class="section-title">联系我们</h2>
<div class="contact-info">
<p>地址：湖北省武汉市</p>
<p>电话：027-XXXXXXXX</p>
<p>邮箱：[email protected]</p>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<p>© 2024 湖北工程 版权所有</p>
</div>
</footer>
</body>
</html>搭建一个便携式的pdf转换网站
我们同样让cursor帮我们基于pdf文档转markdown语法的api来做一个html的页面，并且我们的手机也能使用搭建的这个网站，我们在生成好代码之后我们直接将这个代码部署到EdgeOne上面，通过返回的链接我们就能进行一个访问的操作了，这里的话访问链接就不给你们看了哈，因为调用的是我的api，没啥额度，哈哈哈哈
其实有了cursor和EdgeOne Mcp Server我们去搭建一个html网站真的很方便，不用去买这买那，直接将我们本地做好的代码部署到EdgeOne上面就好了
这个代码如下。感兴趣的可以自己去魔改下，就是咱们如果要部署html代码到EdgeOne的话，那么我们就得保证我们的html代码是纯html代码，如果掺杂着其他成分的是不能正常部署到EdgeOne上面的
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文档分析</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', sans-serif;
line-height: 1.6;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
background-color: #f0f2f5;
min-height: 100vh;
}
.container {
background-color: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}
.upload-section {
border: 2px dashed #4CAF50;
padding: 30px;
text-align: center;
margin-bottom: 30px;
border-radius: 8px;
background-color: #f8f9fa;
transition: all 0.3s ease;
position: relative;
}
.upload-section.drag-over {
background-color: #e8f5e9;
border-color: #2e7d32;
}
.upload-icon {
font-size: 48px;
color: #4CAF50;
margin-bottom: 15px;
}
.upload-text {
color: #666;
margin-bottom: 15px;
}
#fileInput {
display: none;
}
.upload-btn {
background-color: #4CAF50;
color: white;
padding: 12px 24px;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
}
.upload-btn:hover {
background-color: #45a049;
}
#result {
margin-top: 20px;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
min-height: 100px;
line-height: 1.6;
}
#result h1, #result h2, #result h3, #result h4, #result h5, #result h6 {
margin: 1em 0 0.5em;
color: #333;
}
#result p {
margin: 0.5em 0;
}
#result pre {
background-color: #f6f8fa;
padding: 1em;
border-radius: 4px;
overflow-x: auto;
}
#result code {
background-color: #f6f8fa;
padding: 0.2em 0.4em;
border-radius: 3px;
}
#result table {
border-collapse: collapse;
width: 100%;
margin: 1em 0;
}
#result th, #result td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
#result th {
background-color: #f6f8fa;
}
.loading {
display: none;
text-align: center;
margin: 20px 0;
color: #4CAF50;
}
.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.progress-bar {
display: none;
width: 100%;
height: 8px;
background-color: #e0e0e0;
border-radius: 4px;
margin: 15px 0;
overflow: hidden;
}
.progress-bar-fill {
height: 100%;
background-color: #4CAF50;
width: 0%;
transition: width 0.3s ease;
}
.file-info {
display: flex;
align-items: center;
gap: 10px;
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 6px;
border: 1px solid #e0e0e0;
}
.file-info i {
font-size: 24px;
color: #4CAF50;
}
</style>
</head>
<body>
<div class="container">
<h1>PDF转Markdown</h1>
<div class="upload-section" id="dropZone">
<i class="fas fa-file-upload upload-icon"></i>
<p class="upload-text">拖拽文件到此处或点击下方按钮上传</p>
<input type="file" id="fileInput" accept=".pdf">
<button class="upload-btn" onclick="document.getElementById('fileInput').click()">
<i class="fas fa-plus"></i>选择文件
</button>
<div id="fileInfo" class="file-info" style="display: none;">
<i class="fas fa-file-pdf"></i>
<p id="fileName"></p>
</div>
<div class="progress-bar" id="progressBar">
<div class="progress-bar-fill" id="progressBarFill"></div>
</div>
</div>
<div class="loading" id="loading">
<i class="fas fa-spinner"></i> 分析中...
</div>
<div id="result"></div>
<h1>图片去水印</h1>
<div class="upload-section" id="watermarkDropZone">
<i class="fas fa-image upload-icon"></i>
<p class="upload-text">拖拽图片到此处或点击下方按钮上传</p>
<input type="file" id="watermarkFileInput" accept="image/*">
<button class="upload-btn" onclick="document.getElementById('watermarkFileInput').click()">
<i class="fas fa-plus"></i>选择图片
</button>
<div id="watermarkFileInfo" class="file-info" style="display: none;">
<i class="fas fa-image"></i>
<p id="watermarkFileName"></p>
</div>
<div class="progress-bar" id="watermarkProgressBar">
<div class="progress-bar-fill" id="watermarkProgressBarFill"></div>
</div>
</div>
<div class="loading" id="watermarkLoading">
<i class="fas fa-spinner"></i> 处理中...
</div>
<div id="watermarkResult"></div>
</div>
<script>
const fileInput = document.getElementById('fileInput');
const fileName = document.getElementById('fileName');
const loading = document.getElementById('loading');
const result = document.getElementById('result');
const dropZone = document.getElementById('dropZone');
const fileInfo = document.getElementById('fileInfo');
const progressBar = document.getElementById('progressBar');
const progressBarFill = document.getElementById('progressBarFill');
// 水印去除相关元素
const watermarkFileInput = document.getElementById('watermarkFileInput');
const watermarkFileName = document.getElementById('watermarkFileName');
const watermarkLoading = document.getElementById('watermarkLoading');
const watermarkResult = document.getElementById('watermarkResult');
const watermarkDropZone = document.getElementById('watermarkDropZone');
const watermarkFileInfo = document.getElementById('watermarkFileInfo');
const watermarkProgressBar = document.getElementById('watermarkProgressBar');
const watermarkProgressBarFill = document.getElementById('watermarkProgressBarFill');
// 拖拽上传相关事件
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
const files = e.dataTransfer.files;
if (files.length > 0 && files[0].type === 'application/pdf') {
fileInput.files = files;
handleFileUpload(files[0]);
}
});
fileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
handleFileUpload(file);
}
});
function formatFileSize(bytes) {
if (bytes === 0) return '0 Bytes';
const k = 1024;
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
const i = Math.floor(Math.log(bytes) / Math.log(k));
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}
async function handleFileUpload(file) {
if (!file) return;
fileName.textContent = `${file.name} (${formatFileSize(file.size)})`;
fileInfo.style.display = 'flex';
progressBar.style.display = 'block';
progressBarFill.style.width = '0%';
loading.style.display = 'block';
result.textContent = '';
const formData = new FormData();
formData.append('image', file, file.name);
// 模拟上传进度
const progressInterval = setInterval(() => {
const currentWidth = parseFloat(progressBarFill.style.width);
if (currentWidth < 90) {
progressBarFill.style.width = `${currentWidth + 10}%`;
}
}, 500);
try {
const response = await fetch('https://api.textin.com/ai/service/v1/pdf_to_markdown', {
method: 'POST',
headers: {
'x-ti-app-id': 'id号',
'x-ti-secret-code': '密钥'
},
body: formData
});
const data = await response.json();
if (data.result && data.result.markdown) {
result.innerHTML = marked.parse(data.result.markdown);
} else {
result.textContent = '转换失败：' + (data.message || '未知错误');
}
} catch (error) {
result.textContent = '分析过程中出现错误: ' + error.message;
} finally {
loading.style.display = 'none';
clearInterval(progressInterval);
progressBarFill.style.width = '100%';
setTimeout(() => {
progressBar.style.display = 'none';
progressBarFill.style.width = '0%';
}, 1000);
}
}
// 水印去除相关事件处理
watermarkDropZone.addEventListener('dragover', (e) => {
e.preventDefault();
watermarkDropZone.classList.add('drag-over');
});
watermarkDropZone.addEventListener('dragleave', (e) => {
e.preventDefault();
watermarkDropZone.classList.remove('drag-over');
});
watermarkDropZone.addEventListener('drop', (e) => {
e.preventDefault();
watermarkDropZone.classList.remove('drag-over');
const files = e.dataTransfer.files;
if (files.length > 0) {
if (files[0].type.startsWith('image/')) {
watermarkFileInput.files = files;
handleWatermarkRemoval(files[0]);
} else {
watermarkResult.textContent = '错误：请上传图片文件（支持jpg、png等常见图片格式）';
}
}
});
watermarkFileInput.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
handleWatermarkRemoval(file);
}
});
async function handleWatermarkRemoval(file) {
if (!file) return;
watermarkFileName.textContent = `${file.name} (${formatFileSize(file.size)})`;
watermarkFileInfo.style.display = 'flex';
watermarkProgressBar.style.display = 'block';
watermarkProgressBarFill.style.width = '0%';
watermarkLoading.style.display = 'block';
watermarkResult.innerHTML = '';
// 验证文件类型
const allowedTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
if (!allowedTypes.includes(file.type)) {
watermarkResult.textContent = '错误：请上传正确的图片文件（支持jpg、png、gif、webp格式）';
watermarkLoading.style.display = 'none';
watermarkProgressBar.style.display = 'none';
watermarkProgressBarFill.style.width = '0%';
return;
}
const formData = new FormData();
formData.append('image', file);
const progressInterval = setInterval(() => {
const currentWidth = parseFloat(watermarkProgressBarFill.style.width);
if (currentWidth < 90) {
watermarkProgressBarFill.style.width = `${currentWidth + 10}%`;
}
}, 500);
try {
const response = await fetch('https://api.textin.com/ai/service/v1/image/watermark_remove', {
method: 'POST',
headers: {
'x-ti-app-id': 'id号',
'x-ti-secret-code': '密钥'
},
body: formData
});
if (!response.ok) {
throw new Error(`API请求失败: ${response.status} ${response.statusText}`);
}
const data = await response.json();
if (!data || !data.result) {
throw new Error('API响应格式错误');
}
if (data.result.image) {
const img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + data.result.image;
img.style.maxWidth = '100%';
watermarkResult.appendChild(img);
// 添加下载按钮
const downloadBtn = document.createElement('a');
downloadBtn.href = img.src;
downloadBtn.download = 'watermark_removed.jpg';
downloadBtn.className = 'upload-btn';
downloadBtn.style.marginTop = '10px';
downloadBtn.innerHTML = '<i class="fas fa-download"></i>下载图片';
watermarkResult.appendChild(downloadBtn);
} else {
throw new Error(data.message || '图片处理失败')
}
} catch (error) {
watermarkResult.textContent = '处理过程中出现错误: ' + error.message;
} finally {
watermarkLoading.style.display = 'none';
clearInterval(progressInterval);
watermarkProgressBarFill.style.width = '100%';
setTimeout(() => {
watermarkProgressBar.style.display = 'none';
watermarkProgressBarFill.style.width = '0%';
}, 1000);
}
}
</script>
</body>
</html>EdgeOne 的 MCpserver 在部署 HTML 网站方面优势显著。
从便捷性角度来看，它能极大地简化部署流程。借助其高效的工具与配置选项，哪怕是技术基础不太深厚的人员，也能顺利完成 HTML 网站的部署工作。例如，传统方式部署 HTML 网站，可能需要在服务器环境配置、域名解析等环节花费大量时间与精力，还容易因操作不当而出现各种问题。但有了 MCpserver，其提供的可视化界面或简洁明了的指令引导，使得这些原本复杂的操作变得轻松许多，大大节省了部署时间与人力成本 。
在安全性方面，MCpserver 为 HTML 网站部署筑牢防线。它具备先进的安全防护机制，可有效抵御各类网络攻击，像常见的 DDoS 攻击、恶意脚本注入等，都难以突破其防护。这使得 HTML 网站的数据安全性和稳定性得到充分保证，网站所有者无需过度担忧网站因遭受攻击而出现数据泄露、页面篡改或无法访问等问题，能够安心运营网站 。
不会部署网站的小白完全可以用EdgeOne的MCP Server体验下部署网站的快速体验吧！