静态博客的更优解法：CNB 云原生开发 + EdgeOne Pages

2025年快过完了，5年前的文章介绍了使用Coding IDE + COS + CDN 来部署博客的方法，现在回头看，略显复杂，写的又臭又长，配图达到逆天的30+。

而且 Coding 已经公告下线了，那么，是时候介绍一个更优雅的静态博客部署方式了。

这篇文章献给我几个好朋友，他们有的还在用老古董的虚拟主机部署的 Wordpress，这篇文章能让他们从此不用操心服务器、网站被黑、数据丢失等一系列问题；

除此之外本地也不用再装开发环境了，随时随地都可以通过浏览器写博客，哪怕手机也行；

更重要的是在可预见的将来，都不需要为这些便宜且大碗、便捷且安全、运行稳定且访问快速的服务付费呢。

前提条件

• 接受实名认证
• 拥有自己的域名（能在大陆备案更好，不能也行）
• 稍微带点耐心，如果你没有任何代码基础，那么整个部署流程可能需要约 60 分钟的专注时间。

第一步：开启 CNB 云原生开发

注册账号、创建组织、创建仓库、开启云原生开发并进入 WebIDE，相信你，有手就行！

• 国内版：https://cnb.cool

• 国际版：https://cnb.build

第二步：配置 CNB 开发环境

这里还是用 Hexo 这个久经考验的博客框架来举例，需要配置 Nodejs 的开发环境。

在左边栏的文件中我们新建三个文件，其中重要的两个分别是 .ide/Dockerfile ， .cnb.yml ，具体含义有兴趣的可以去读文档，这里就跳过解释。

.ide/Dockerfile 文件内容如下：

# .ide/Dockerfile

# 可将 node 替换为需要的基础镜像
FROM node:20

# 安装 code-server 和 vscode 常用插件
RUN curl -fsSL https://code-server.dev/install.sh | sh \
  && code-server --install-extension cnbcool.cnb-welcome \
  && code-server --install-extension redhat.vscode-yaml \
  && code-server --install-extension dbaeumer.vscode-eslint \
  && code-server --install-extension waderyan.gitblame \
  && code-server --install-extension mhutchie.git-graph \
  && code-server --install-extension donjayamanne.githistory \
  && code-server --install-extension tencent-cloud.coding-copilot \
  && echo done

# 安装 ssh 服务，用于支持 VSCode 等客户端通过 Remote-SSH 访问开发环境（也可按需安装其他软件）
RUN apt-get update && apt-get install -y git wget unzip openssh-server

# 指定字符集支持命令行输入中文（根据需要选择字符集）
ENV LANG C.UTF-8
ENV LANGUAGE C.UTF-8

.cnb.yml 文件内容如下：

# .cnb.yml
$:
  vscode:
    - docker:
        build: ./.ide/Dockerfile
      runner:
        cpus: 4
      services:
        - vscode
        - docker
      stages:
        - name: ls
          script: ls -al
        
        - name: 拉起 WebIDE
          script: vscode:go

push.sh 文件内容如下：

#!/bin/bash
SCRIPT_DIR=$(dirname "$(readlink -f "$0")")
cd "$SCRIPT_DIR" || exit
git add .
git commit -m "new"
git push origin main

新建好这三个文件后，在 WebIDE 页面中按Ctrl+Shift+C打开终端，执行 push.sh，输入：

sh ./push.sh

看到 Total 3 (delta 1), reused 0 (delta 0), pack-reused 0 这样的字样后接着敲：

kill 1

kill 1 后 WebIDE 及开发就被销毁了，这时我们关闭这个网页，来到刚刚新建的仓库页面，刷新一下，刚刚三个文件应该已经出现了。

重新点击云原生开发，再次拉起配置好开发环境的 WebIDE，首次拉起开发环境时间会长点（约2分钟左右），稍等会。

第三步：安装博客程序

按照 Hexo 官方文档 中的步骤，我们首先安装 Hexo 框架程序，在终端中执行：

npm install -g hexo-cli
mkdir Blog
cd Blog
hexo init

不出意外几秒钟就搞定，然后我们试试博客预览，在终端中接着敲：

hexo s

右下角会弹窗，提供生产环境端口预览，点击「Open in Browser」，就可以跳转页面查看博客雏形了，如果需要结束预览，回到 WebIDE 的终端，按下 Ctrl+C 即可结束预览程序。

第四步：配置博客信息，并切换博客主题

博客的主要信息例如网站名称、网址、博主名称等都在 /Blog/_config.yml 文件中填写。

具体可以查看官方文档。

然后找一个我们想要的主题，有两个方法：

• 去官方收录的主题页面浏览
• 去 Github repo搜索关键字 hexo-theme

接下来我们以我比较喜欢的风格：hexo-theme-fluid 为例，将其设为自己博客的默认主题。

以下操作均来自官方教程：

回到 WebIDE的 终端中，首先进入博客程序路径：

cd /Blog

然后执行：

npm install --save hexo-theme-fluid

if [ "$(basename "$(pwd)")" = "Blog" ]; then wget https://raw.githubusercontent.com/fluid-dev/hexo-theme-fluid/refs/heads/master/_config.yml -O _config.fluid.yml && echo "下载成功"; else echo "错误：当前路径不是 ./Blog"; fi

这时博客 /Blog 路径下会出现 _config.fluid.yml 文件，用于个性自定义博客主题，其中的注释写的非常详细，仔细对照着修改，相信你，有手就行！

修改完主题配置 _config.fluid.yml 后，我们再来修改博客配置 _config.yml，启用这个主题：

分别找到 language 和 theme，将默认的 en 和 landscape 分别改为如下：

language: zh-CN  # 指定语言，会影响主题显示的语言，按需修改
theme: fluid  # 指定主题

然后我们再在终端中执行 hexo s 看看改动是否生效吧！

第五步：配置并将博客部署至 EdgeOne Pages

注册账号、新建一个「直接上传」的 Pages 项目、获取 Pages API，相信你，有手就行！

• 国内版：https://edgeone.tencent.com/

• 国际版：https://pages.edgeone.ai/

这里以国内版为例，如果没有腾讯云账号，先注册一个（国内版可能会需要实名认证）。

随后进入 EdgeOne Pages 控制台，点击「立即开通」，然后新建一个「直接上传」的 Pages 项目，根据你自己域名有无备案选择可访问区（国内访问速度差不了太多）。

获取项目名称，后面要用。

然后创建一个永久有效的 API，获取创建后的 API Token，后面要用。

回到 WebIDE，修改 .cnb.yml 文件：

• 找到 vscode 部分的 stage ，在「拉起 WebIDE」之前增加一个安装 Hexo 环境依赖的步骤：

  - name: 安装依赖
    script: npm install -g hexo-cli && cd ./Blog && npm install

  注意与其他两个 - name 保持对齐，yaml 语法对缩进敏感。

• 在 .cnb.yml 最底下新增触发时间，当保存修改时自动将博客推送更新到 EO Pages 部署：

  main: 
    push: 
      - stages: 
          - name: 构建 Public 目录
            image: node:20
            script: node -v && npm install -g hexo-cli && cd ./Blog && npm install && hexo g
  
          - name: 部署到腾讯云 Edgeone
            image: node:20
            script: npx edgeone pages deploy Blog/public -n [Pages名字] -t [Pages API]

• 我怕你修改出错，你可以直接复制完整的 .cnb.yml 配置文件：

  # .cnb.yml
  $:
    vscode:
      - docker:
          build: ./.ide/Dockerfile
        runner:
          cpus: 4
        services:
          - vscode
          - docker
        stages:
          - name: ls
            script: ls -al
          
          - name: 安装依赖
            script: npm install -g hexo-cli && cd ./Blog && npm install
  
          - name: 拉起 WebIDE
            script: vscode:go
  
  
  main: 
    push: 
      - stages: 
          - name: 渲染博客静态文件
            image: node:20
            script: node -v && npm install -g hexo-cli && cd ./Blog && npm install && hexo g
  
          - name: 部署到腾讯云 EdgeOne Pages
            image: node:20
            script: npx edgeone pages deploy Blog/public -n [Pages名字] -t [Pages API]

然后，再在 WebIDE 的终端里执行: sh ../push.sh ，没什么意外，博客就会自动构建并推送部署到 EdgeOne Pages了。

然后我们输入 kill 1 结束 WebIDE。

第六步：配置自定义域名，欣赏新博客

到域名解析提供商那里按照指引设置好 cname 解析即可生效，使用自定义域名访问博客网站。

最后：补充说明

以后只要每次回到 CNB 的博客仓库，点击「云原生开发」按钮，拉起 WebIDE 开发环境，就可以开始修改博客配置、发表新文章了！

拉起 WebIDE 后终端的默认路径是 workspace，如果要进行 hexo [command] 的操作需要先通过 cd Blog 进入博客路径下操作。

当终端路径是 workspace 时，通过 sh ./push.sh 执行保存脚本；

当终端路径是 Blog 时，通过 sh ../push.sh 执行保存脚本；其他路径同理。

以防你还不清楚 Hexo 博客基本操作：

• 为博客写作文章

  • WebIDE 中进入/Blog 路径：cd Blog

  • 然后在终端中执行hexo new 2025-fitst-post，这里 2025-fitst-post就是新建文章的自定义标题，最好不要用中文。

  • 文章会出现在 /Blog/source/_post 目录下，例如本次生成的即为 2025-fitst-post.md 文件。

  • 使用 Markdown 语法书写完毕后，终端执行 hexo s ，可以预览新文章情况，注意这时所有改动还未保存，如果要使改动生效，需要在终端执行 sh ../push.sh 哦。

• 新建「关于」（/about）页面

  • WebIDE 中进入 /Blog 路径

  • 执行：hexo new page about

  • /Blog/source目录下会出现 /about 文件夹和其内的 index.md，对应的就是博客网站中example.com/about 页面，书写方式同上。

• 配置评论系统

  评论系统是需要数据库支持的，所以静态博客没法自带评论，那么我们需要引入第三方服务。

  例如 Fluid 主题支持的评论系统有很多种，官方文档中有列举，这里我们以 Waline 为例。

  我本想再详细讲讲，但是我一看 Waline 的用户手册已经写的足够详细了，所以你可以直接照着操作就行：https://waline.js.org/guide/get-started/

那么暂时先到这里。

散会。