vuepress博客平台搭建流程

Ms.Zyh2026/10/5大约 7 分钟

一、CNB + 腾讯边缘安全加速平台 EO

选择CNB的原因是使用云原生构建能力，自动化部署腾讯边缘安全加速平台 EO，都是腾讯的很合适。当然最主要的原因是这两个平台免费，访问速度还快。类似于CNB的主要作用类似于GitHub Actions，腾讯边缘安全加速平台 EO 类似于 GitHub Pages 或者 Vercel 与 Netlify。

1.1 腾讯边缘安全加速平台 EO

腾讯边缘安全加速平台 EO不要想有多复杂，你就把他当成 GitHub Pages 帮我们托管静态网站就可以了，为什么选择腾讯边缘安全加速平台 EO，因为第一点免费，第二点访问速度快，比 GitHub Pages快太多了，唯一麻烦的一点需要一个备案的域名。访问：腾讯边缘安全加速平台 EO:https://console.cloud.tencent.com/edgeone:

有2个核心能力：

添加站点：提升网站/APP速度及安全性。
创建项目：托管静态网站。

1.1.1 添加站点

添加站点就是
有如下好处：

提供动静态智能加速，用户可就近访问节点获取资源，解决跨地域、跨运营商的网络问题。
通过腾讯云 EdgeOne 节点文件缓存，减少回源比例，解决源站带宽资源不足的问题。
通过腾讯云 EdgeOne 节点提供服务，隐藏您的源站 IP，保护源站免受恶意攻击。
接入更多 EdgeOne 能力，包括域名解析、安全防护、边缘函数、四层代理等。
第一步：输入你的域名，比如我的zouyh.top

第二步：选择套餐,这里选择 EdgeOne免费套餐。EdgeOne免费套餐下面有说如何获取：

至于如何获取EdgeOne免费套餐，领取页面：
1、网站的“免费综合险” EdgeOne 免费套餐内测中：https://curl.qcloud.com/bRNbj4C6
2、宝塔 × EdgeOne 即刻开启网站安全加速：https://curl.qcloud.com/YPbK1S4x
3、EdgeOne 一键管控 AI 爬虫流量：https://curl.qcloud.com/hQHV8qgk
2026年10月04号以上3个链接还是正常访问免费领取的。

第三步：选择合适的接入方式，对于大多数用户，如果域名不在DNSPod，CNAME接入通常是更灵活的选择。

接入方式	适用场景	特点
NS接入	新站点或愿意将DNS解析完全托管给EdgeOne的用户	修改域名的DNS服务器，全面托管解析，类似Cloudflare的模式
CNAME接入	希望保留原DNS服务商的用户	仅在原DNS解析处添加CNAME记录，灵活性较高
DNSPod托管接入	域名已在腾讯云DNSPod托管的用户	一键绑定，最为便捷

1.1.2 创建项目

或者说使用EdgeOne Makers：

方式一：导入git仓库的项目，然后填写你的项目构建流程。这个方式方便流畅，但是给的构建项目的资源太小了，如果你的vue项目太大构建很可能失败。建议使用方式二：直接上传的方式

方式二：直接上传的方式，直接上传不会帮你构建结果，也就是不会帮你npm run build而是需要你，自己npm run build后将构建后产物结果上传到这里。为什么建议选择这种方式，第一点是因为方式一：导入git仓库的项目创建项目的资源太小很容易失败，所以构建不能在腾讯边缘安全加速平台 EO做。第二点是因为配合CNB使用很方便，CNB负责构建和上传，腾讯边缘安全加速平台 EO赋值加速访问展示。

至于其它方式不用管了不适合就是了。

1.2 CNB

CNB全称 Cloud Native Build腾讯云推出的一款云原生开发与协作平台，主要面向开发者，提供代码托管、云原生构建、云原生开发环境等功能。官网：https://cnb.cool/

如上所示zouyh/blog-vuepress对应vuepress项目，zouyh/blog-vuepress-edge对应腾讯边缘安全加速平台 EO的API Token的密钥仓库。

第一步：CNB存储腾讯边缘安全加速平台 EO的密钥，存储密钥的原因是CNB自动构建的结果想要推送到腾讯边缘安全加速平台 EO需要 API Token，就像你通过ssh提交代码到仓库也需要密钥。密钥不能直接写在配置文件中，这是一种身份凭证，CNB提供了密钥仓库的方式存储密钥。
第一步：创建CNB的密钥仓库并添加envs.yml文件，内容如下：

EDGEONE_API_TOKEN: 腾讯边缘安全加速平台 EO的 API Token

获取方式API Token：在腾讯边缘安全加速平台 EO服务总览Makers中添加获取API Token

第二步：在你的vuepress的项目的根目录下新增.cnb.yml文件

# 触发器：推送到主分支master
master:
  push:
    # 从私有仓库导入环境变量：
    - imports: https://cnb.cool/zouyh/blog-vuepress-edge/-/blob/main/envs.yml
      stages:
        # 构建当前项目
        - name: Build Current Project
          image: node:20
          script: node -v && npm install && npm run build
        # 将构建输出部署到 EdgeOne Makers
        - name: Deploy to EdgeOne Makers
          image: node:20
          script: npx edgeone makers deploy src/.vuepress/dist -n blog-vuepress  -t $EDGEONE_API_TOKEN

说明:

npx edgeone makers deploy 参数说明：
<outputDirectory>：src/.vuepress/dist就是运行npm run build项目构建后产物所在的文件夹（必填）。
-n后的值：blog-vuepress需要部署的项目名称，项目不存在则自动创建新项目（必填）。
-t后的值：$EDGEONE_API_TOKEN是第一步创建CNB密钥仓库中envs.yml文件中key的名称，也就是API Token。上面也写了从私有仓库导入环境变量- imports: https://cnb.cool/zouyh/blog-vuepress-edge/-/blob/main/envs.yml

第三步：将你的vuepress的项目包含第二步创建的.cnb.yml上传到CNB的私有仓库。这一步就不细说了，就是git提交代码到远程仓库。每当你向远程仓库master分支（第二步.cnb.yml文件中写的分支）CNB就会自动执行的：

拉去master分支最新代码
根据最新的代码和.cnb.yml文件内容执行脚本，比如npm install下载依赖，npm run build构建结果， npx edgeone makers deploy src/.vuepress/dist -n blog-vuepress -t $EDGEONE_API_TOKEN推送到腾讯边缘安全加速平台 EO平台。每当你向远程仓库master分支
CNB会有构建部署流程：
边缘安全加速平台 EO平台也会有上传部署流程：

二、https协议

问题产生原因：七牛云的CDN的域名开启https，通过https的CDN访问空间的图片是收费的，不在http的10G的免费流量的范围内。所以如果想要免费就不能https，但是就是想用http怎么办呢？
方式一：

边缘安全加速平台 EO 使用https的CDN  = https://img.zouyh.top
	↓
七牛云的S3 协议的外网访问 =  http(s)://zouyh-img.s3.cn-east-1.qiniucs.com
	↓
七牛云的存储空间

这个方式是我第一次尝试的方案，是可以的但是用了一段时间发现产生费用了，因为七牛云明确提示了通过S3 协议的外网时将产生外网流出流量，外网流出流量是收费的。这个我没注意到产生了费用，所以后面就研究了第二种方案：
方式二：

边缘安全加速平台 EO 使用https的CDN  = https://img.zouyh.top
	↓
七牛云的http的CDN = http://qiniu.zouyh.top
	↓
七牛云的存储空间

七牛云的访问保持不变还是使用http协议，这样就有了10G的免费流量。

方式二实施第一步：七牛云的存储空间绑定域名注意是http协议的哈：

方式二实施第二步：边缘安全加速平台 EO 使用https的CDN指向七牛云的http的CDN：

注意：

域名配置：加速域名的就是七牛云的http的CDN
回源配置：选择“对象存储源站”，S3 兼容，源地址是七牛云的http的CDN
私有访问授权：如果你的对象存储空间是私有的空间需要提供七牛云的Access Key ID和Secret Access Key，一般我们的图床都是公有的空间。