在 EdgeOne 上部署 Vergil 静态博客

什么是 EdgeOne

EdgeOne 是腾讯云推出的边缘安全加速平台，你可以把它理解为「国内的 Cloudflare」——它整合了 CDN 加速、DDoS 防护、WAF 防火墙、边缘函数和静态资源托管于一身。对于个人博客来说，最实用的两个功能是：

• 静态资源托管：直接把构建产物丢上去，自动分发到全球边缘节点
• CDN 加速：国内访问速度比 GitHub Pages / Vercel 快得多

为什么选择 EdgeOne

之前我的博客托管在 Vercel 上，访问速度其实不差，但有几个痛点：

1. 国内访问不稳定：Vercel 的 CDN 节点主要在国外，国内某些地区访问时会慢或者偶发超时
2. 图片加载慢：Unsplash 的图片源在国外，配合 Vercel 的延迟，首屏体验不太好
3. 没有国内备案的域名解析：用国内域名 + 国外托管，总有一种「四不像」的感觉

EdgeOne 解决了以上所有问题：

• 国内节点覆盖广，延迟低
• 支持自定义域名 + 国内备案
• 静态托管免费额度对个人博客完全够用

前置准备

在开始之前，确保你已经有：

• 一个 Vergil 项目的本地副本（git clone 或者直接下载）
• 一个腾讯云账号（实名认证过）
• 一个已备案的域名（如果使用国内节点）
• Node.js 18+ 和 pnpm / npm

部署步骤

1. 本地构建

EdgeOne 支持两种部署方式：Git 集成和手动上传。这里我选择手动上传，因为 Vergil 项目结构简单，构建产物就是纯静态文件，手动上传更直观。

# 进入项目目录
cd vergil-astro-theme

# 安装依赖
pnpm install

# 构建生产版本
pnpm build

构建完成后，项目根目录下会生成一个 dist/ 文件夹，里面就是所有静态文件。

2. 创建 EdgeOne 加速域名

登录 EdgeOne 控制台，进入「站点列表」，点击「添加站点」：

1. 输入域名：填入你的备案域名，比如 example.com
2. 选择套餐：个人博客选「个人版」即可，免费额度包含：
   • 每月 10GB 流量
   • 100 万次请求
   • 基础 DDoS 防护
3. 选择加速区域：如果域名已备案，选「中国大陆 + 境外」；未备案只能选「境外」

添加完成后，EdgeOne 会给你分配两个 CNAME 记录，你需要去域名服务商（如 DNSPod）把域名的 NS 记录或者 CNAME 记录指向 EdgeOne。

3. 配置静态资源托管

进入 EdgeOne 控制台的「规则引擎」，添加一条规则来处理静态资源：

条件	操作
匹配类型：全部请求	缓存配置：缓存时间 7 天
匹配类型：文件后缀 .html	缓存配置：缓存时间 0（不缓存）

这样配置的原因是：

• HTML 文件更新频繁，不缓存可以确保内容即时生效
• CSS/JS/图片等静态资源哈希化后基本不变，可以长期缓存

4. 上传构建产物

EdgeOne 目前不直接提供「静态网站托管」的一键上传功能（不像 Cloudflare Pages），所以我选择了另一种思路：把 dist 目录作为对象存储（COS）的源站，再通过 EdgeOne CDN 加速。

步骤如下：

1. 创建 COS 存储桶：

   • 登录 COS 控制台
   • 创建标准存储桶，地域选离你最近的（比如广州）
   • 开启「静态网站」功能，索引文档填 index.html，错误文档填 404.html

2. 上传构建产物：

# 使用 COSCMD 或者控制台上传
# 把整个 dist 目录上传到存储桶根目录
coscmd upload -r dist/ /

3. 配置 EdgeOne 回源到 COS：

   • 回到 EdgeOne 控制台，进入「源站配置」
   • 添加源站，类型选「对象存储（COS）」
   • 选择刚才创建的存储桶
   • 回源协议选 HTTPS

4. 配置默认页面：

   • 在 EdgeOne 的「规则引擎」里添加规则
   • 匹配 / 路径，重写到 /index.html
   • 或者直接使用 COS 的静态网站功能作为源站

5. 配置 HTTPS 证书

EdgeOne 支持自动申请和托管 SSL 证书：

1. 进入「HTTPS 配置」
2. 开启「HTTP/2」和「TLS 1.3」
3. 选择「托管证书」，EdgeOne 会自动向 Let’s Encrypt 申请证书
4. 等待几分钟，证书生效后就可以通过 https:// 访问了

6. 可选优化

6.1 开启 Brotli 压缩

在 EdgeOne 的「网络优化」里开启 Brotli 压缩，可以进一步减小传输体积。Astro 构建出的 HTML/CSS/JS 压缩率通常能达到 60% 以上。

6.2 配置图片自适应

如果你的博客有很多图片，可以在 EdgeOne 开启「图片自适应」功能，根据用户设备的 DPR 自动返回合适尺寸的图片，减少流量消耗。

6.3 配置 WebP 自适应

EdgeOne 支持自动将图片转换为 WebP 格式（在「规则引擎」里添加图片处理规则），可以大幅减少图片体积。不过 Vergil 主题本身已经内置了 ::photo 指令的 WebP 转换功能，两者可以结合使用。

踩过的坑

1. 路由刷新 404

Astro 的静态输出会生成 blog/post-name/index.html，访问 /blog/post-name/ 没问题，但直接访问 /blog/post-name（不带斜杠）或者刷新页面时，EdgeOne + COS 的组合可能会返回 404。

解决方案：在 EdgeOne 的「规则引擎」里添加 URL 重写规则：

匹配条件：URI 路径以 / 结尾 = 否，且文件后缀为空
操作：URL 重写 → 追加 /index.html

或者直接使用 COS 的「静态网站」功能作为源站，它已经内置了目录索引和 404 页面的处理。

2. 构建产物过大

Vergil 主题依赖了很多图片和字体，首次构建的 dist 目录可能有几十 MB。上传到 COS 时可能会超时。

解决方案：

• 使用 coscmd 的分片上传功能：coscmd upload -r dist/ / --threshold 10MB
• 或者把大文件（如字体、图片）放到另一个存储桶，通过独立域名引用

3. 缓存不生效

更新博客后，发现页面内容还是旧的。

解决方案：

• 在 EdgeOne 控制台「缓存刷新」里手动刷新 URL
• 或者在构建时给 CSS/JS 文件名加上内容哈希（Astro 默认已经做了）
• HTML 文件设置不缓存（见步骤 3）

与 Vercel 的对比

维度	EdgeOne + COS	Vercel
国内访问速度	⭐⭐⭐⭐⭐	⭐⭐⭐
部署复杂度	⭐⭐⭐（需要配置 COS）	⭐（一键部署）
自定义域名	⭐⭐⭐⭐⭐（备案后可国内解析）	⭐⭐⭐（需要额外配置）
免费额度	⭐⭐⭐⭐（10GB/月）	⭐⭐⭐⭐⭐（ generous）
SSR/边缘函数	❌（仅静态）	⭐⭐⭐⭐⭐
安全防护	⭐⭐⭐⭐⭐（DDoS + WAF）	⭐⭐⭐

结论：如果你追求国内访问速度和稳定性，且不需要 SSR，EdgeOne 是更好的选择。如果你需要频繁迭代、使用 SSR 或边缘函数，Vercel 更方便。

最终效果

部署完成后，我的博客在国内三大运营商网络下的首屏加载时间从 Vercel 上的 2-3 秒降到了 500ms 以内，图片加载也从「转圈等待」变成了「秒开」。