赋能 Gulp 构建流：使用腾讯云 EdgeOne 为 Pug 博客注入全球 CDN 与安全防护能力

前言

你是否也曾为个人博客或项目主页的部署而烦恼？传统的流程往往意味着一连串复杂的操作：购买服务器、配置环境、设置 Nginx、解决跨域、配置 CDN 加速、再为 SSL 证书过期而焦虑…… 每一个环节都可能成为“劝退”的理由，让我们的创意停留在代码仓库里。

腾讯云 EdgeOne 提供了一站式的 Web 服务，它将开发者最需要的代码构建、持续部署 (CI/CD)、全球 CDN 加速和顶级的网络安全防护能力完美整合。你不再需要成为运维专家，只需专注于你的代码本身。

在这篇测评中，我将带你从零开始，手把手地将一个 GitHub 仓库，通过 EdgeOne 平台，轻松部署成一个拥有自定义域名、全球极速访问且自带安全光环的静态网站。让我们一起见证，部署网站可以如此简单、快速和安心。

这个是我的网页展示，感兴趣的可以看看

https://undoom.hyk52syx.club/

项目准备

为了让这次的部署演示更具真实性，我将使用一个博客主页项目—— https://github.com/kk520879/blog_home作为实例。这个项目并非简单的 HTML 页面，它基于 Gulp 构建，使用 Pug 作为模板引擎，并将所有源码编译成最终的静态文件。这正好可以用来检验 EdgeOne 对于带有构建流程的项目的支持程度。接下来，就让我们一步步看如何将这个存放在 GitHub 上的项目，通过 EdgeOne 部署到全球。

在我们将项目成功克隆到本地，并使用 CodeBuddy (或你自己的代码编辑器) 打开后，第一步并不是直接去修改代码，而是要先验证一下项目的构建流程是否能正常工作。

我们需要打开终端，输入一个关键的命令来编译整个项目。如上图所示，这个命令就是：

npm run build

执行这个命令后，项目会启动 Gulp 等构建工具，将我们源代码目录（例如 src）下的 Pug、Sass、ES6+ JavaScript 等文件，自动编译、压缩成浏览器可以直接运行的静态 HTML、CSS 和 JavaScript 文件，并统一输出到 dist 文件夹中。这一步是我们将网站部署到 EdgeOne 之前的必要准备工作。

接下来我们还需要输入命令进行项目的编译

npm run dev

与 npm run build 相对的，是我们更常在本地开发时使用的 npm run dev 命令。从上图的终端输出中，我们可以清晰地看到它的工作流程与前者的巨大差异。

当我们执行 npm run dev 时，它首先也会完整地执行一次 gulp build 任务，将项目编译好。但关键在于，它并不会就此结束。紧接着，它会启动 gulp watch 任务，并开启一个本地开发服务器，如日志所示：Server started http://localhost:8080。

最终，进程会停留在 Running server 状态，并且不会自动退出。这个持续运行的服务，就是为了方便我们在本地一边修改代码，一边通过浏览器实时预览效果。然而，也正是这个“不会自动退出”的特性，决定了它绝对不能被用在 EdgeOne 这类需要明确“构建完成”信号的自动化部署平台中。

经过本地测试后，说明代码是不存在任何问题的，接下来我们将这个静态页面部署到EdgeOne上

静态资源部署

点击https://console.cloud.tencent.com/edgeone/pages来到腾讯云控制台的Pages页面，接下来我们在这里进行我们事先准备好的项目进行部署

点击导入Git仓库

选择Github

选择All repositories就是将所有仓库的权限都给EO开通好

然后EO平台就能检索到我们GitHub上所有的仓库了，选择我们项目的对应的仓库blog_home

进入到项目配置界面，进行项目名称的设置（自定义），以及加速区域，这里我选择的是全球可用区（含中国大陆），生产分支就是main，因为我们仓库中的主要文件都在main路径下的

在构建设置界面填写如下：

框架预设为默认的Other，根目录为./，输出目录为dist，因为我们的主要文件都是在dist路径下的

重点来了：构建命令是npm run build，如果你填写的是npm run dev的话就会出现报错了 ，因为我在 EdgeOne 的 “编译命令” 中使用了 npm run dev。这个命令通常用于本地开发环境，它会启动一个持续运行的开发服务器（gulp watch），并且这个服务器会尝试监听一个端口（在你的项目中是 8080 端口）。

然而，在 EdgeOne 的构建环境中，这个端口可能已经被其他内部进程占用

就会出现如下报错：

就会出现EADDRINUSE: address already in use 127.0.0.1:8080 的错误。构建流程的目的是生成静态文件，而不是启动一个服务。当构建命令启动一个不会自动退出的服务时，构建流程就会卡住并最终因超时或端口冲突而失败。

所以我们这里的命令一定要填写的是npm run build，样修改后，构建流程会执行 gulp build 任务，这个任务会编译你的 Pug、CSS、JavaScript 等源文件，并将最终的静态网站文件输出到 dist 目录中，然后构建过程正常结束。EdgeOne 平台会接着将 dist 目录下的内容部署为你的网站。

然后安装命令就输入npm install即可

环境变量这一块我们是不需要进行填写的，因为我们部署是一个静态网页

这里就给不懂为什么的同学简单讲讲为什么静态网站通常不需要进行环境变量的设置：

静态网站的核心特点是，它由一系列固定的 HTML、CSS、JavaScript 和图片等文件组成。

• 没有服务器端逻辑：当用户访问你的网站时，服务器（或像 EdgeOne 这样的 CDN 节点）只是简单地把这些已经存在的文件发送给用户的浏览器。它不会在服务器上运行代码、连接数据库或实时处理数据。
• 所有内容在构建时已确定：在你执行 npm run build 的时候，你所有的源代码（比如 Pug、Sass、ES6 JavaScript）都被编译成了浏览器可以直接读取的最终静态文件。这个过程完成后，网站的内容就固定下来了。 因为没有服务器端的动态逻辑，所以也就不需要那些用于配置服务器行为的环境变量了

上面也仅仅是通常的情况哈，如果你有一个 React 或 Vue 项目，它需要连接到一个 API。你可能希望在本地开发时连接 http://localhost:3000/api，而在部署后连接 https://api.yoursite.com

这时，你可以在 EdgeOne 中设置一个环境变量，比如 API_URL = https://api.yoursite.com。然后在你的构建脚本 (npm run build) 中，构建工具（如 Webpack, Vite）会读取这个 API_URL 的值，并把它直接写入到最终生成的 JavaScript 文件里。

就是这个道理

需要填写的东西搞定了之后，我们直接点击开始部署即可

EO会一步步在他的服务器终端执行命令，从克隆仓库到nmp run build到npm install

这里我们等待一会儿即可将整个项目部署到EO上了

这样就是我们成功部署上了

如果你出现部署失败的情况下，你可以看他给你的部署具体信息，根据信息进行相关信息的修改操作

我的部署相关信息如下，整个过程一气呵成大家可以参考下：

部署成功之后，可以看到部署的信息，相较于传统的部署网站，这个是真的快，我们点击预览

他会给我们提供一个限时的体验链接，只有三个小时的时效

https://undoom-s8lf21dy2a.edgeone.run?eo_token=41dbdd21321652e65c7e6e98256d6b51&eo_time=1755215496

这里我们先进行预览下效果：我只能说完美，很有风格

网页域名设置

如果你想一直将你的项目部署到EO上，你就得进行域名的设置操作了

接下来就讲下如何进行域名的设置

我们需要提前进行域名的准备(购买->实名认证->IPC备案)

来到项目设置，进行域名管理，这里能看到EO给我们准备的体验域名

我们点击添加自定义域名，这里要让我们输入我们的域名信息

我这里的就是undoom.hyk52syx.club，你们设置你们自己的就行了

点进下一步，他就会提醒我们进行DNS设置

到这里我们需要来到域名解析页面，进行二级解析，点击添加记录，将上方给到的DNS设置填写进去即可

主机类型填写的是Undoom，记录类型是CNAME

记录值就是他给到的

添加成功效果如下

添加好了之后，来到EO界面，点击验证

如果验证成功，他会出现一个弹窗的

然后我们等待他慢慢进行域名部署即可

成功部署效果如下：

点击域名即可进行访问了

也欢迎大家使用EO来部署自己的静态网页，大家也可以访问下我的网站Undoom

EO站点管理

来到套餐管理，点击兑换套餐

输入兑换码，如果你没有兑换码可以私信我哦

兑换成功效果如下：

点击确定并创建站点，这里他就直接跳转到一开始的服务总览，并且他识别到了我们的域名信息，我们直接点击一键选择域名

识别好了之后，直接点击开始接入

这里直接选择绑定刚刚购买的套餐

点击确定

来到域名管理，填写相关信息，开其安全加速服务

这里我们进行二级域名解析，按照他给的样子进行解析即可

点击下一步，我们还需要进行一次二级域名解析操作，完成之后，我们的网站就正式开始了加速了

下面就是部署成功的效果，会有一个绿色的小盾牌亮起来

来到主界面，关于这个网页的访问的所有数据都在这里

界面的核心区域分为“访问数据概览”和“安全数据概览”两部分，这种布局让我可以同时掌握网站的性能和安全两个关键维度。

• 缓存命中率 100.00%：这是我最关注的性能指标。数据显示为 100%，这明确表明，在我测试的 23 次访问请求中，所有内容均由 EdgeOne 的边缘缓存节点直接提供，完全没有回源到我的项目仓库。这直接证明了其 CDN 加速功能已经生效，能为访客提供最快的访问速度，并能保护我的源站免受流量冲击。

TOP 攻击事件和攻击域名的区域当前为空。这说明在统计周期内，我的网站没有遭受被记录的攻击。这个区域的存在，为未来可能发生的网络攻击提供了监控窗口。

下方的“趋势曲线”图表将流量、请求数等指标按时间序列展示，这种可视化方式比纯数字列表更便于我观察访问量在一天内的波动情况。

总结

回顾整个部署过程，我们从一个 GitHub 仓库开始，到拥有一个可以通过自定义域名 https://undoom.hyk52syx.club/ 全球访问的网站，全程只在 EdgeOne 平台上进行了几次简单的点击和配置。平台自动完成了代码的克隆、依赖安装、项目构建和全球边缘节点的部署，整个体验一气呵成。

最让我印象深刻的，是 EdgeOne 带来的 “一体化” 和 “省心感”。我不再需要分别管理代码托管、构建服务、CDN 提供商和安全产品，EdgeOne 将这一切无缝衔接。仪表盘上那 *100% 的缓存命中率  不仅仅是一个漂亮的数字，它真实地转化为全球访客的流畅体验和对源站的极致保护。

如果你也和我一样，希望自己的个人项目或静态网站能够告别繁琐的部署流程，轻松拥有企业级的速度与安全，那么我强烈推荐你亲自体验一下腾讯云 EdgeOne。它不仅是一个强大的工具，更是一个能让你将更多精力投入到创造本身的出色伙伴。