如何优雅的部署 Hexo

Dev

如何优雅的部署 Hexo

其实部署hexo的教程已经很多了，大多数都是hexo + github pages。很多教程早已随着版本迭代而过时。本篇文章写于2025.12.1，而我的博客搭建于一年前，今天将博客改为github action构建。这篇文章的目的，就是总结一下hexo的使用经验和一些使用技巧。

我的博客架构历程为：

  • 初期：hexo + github pages + 域名

  • 中期：hexo + github pages + 域名 + vercel

  • 现在：hexo + github pages + 域名(迁移到cloudflare) + vercel + github action + cloudflare r2

如果只是想凑合用，那么 hexo + github pages 无疑是最好的选择，因为不需要花钱，但是从使用体验上和维护难度上都差强人意。大体上有如下问题：

  1. github的国内高延迟使得大多数情况下不得不使用代理

  2. 更换开发环境时，本地环境需要重新安装一遍

  3. 没有稳定好用的图床，多平台发布文章时不能很好的处理图片问题

hexo + github pages 搭建部分不再赘述，网络上的教程已经非常详细，下面内容均以 已经有一个hexo + github pages 环境，且有访问外网的能力 为基础。如果不具备购买能力，可能只有 Step 3 对你有用。

Step 0. 购买域名

直接到阿里云万网或者其他云服务商买一个自己喜欢且价格能够接受的域名就可以。尽量不要使用 .cn 域名，.cn 域名会泄露个人信息。39元购买的CNNIC .cn隐私保护并不彻底，使用国内 Whois 会进行隐私保护，但是使用国外 Whois 仍然可以正常查询，如下面几张图

image-20251201201744014

image-20251201201737000

image-20251201201945411

购买好域名后，就可以给github pages添加域名了。但是这并不会优化访问速度，只是让你的访问链接从 github名.github.io 变为 你的域名。想要优化国内访问速度，就可以使用 vercel 。

如果你不需要优化国内访问速度，只想改一下访问链接，那么参考这篇文章：https://zhuanlan.zhihu.com/p/1886365022571176637。(这篇文章使用的是 Cloudflare，实际上各大云服务商都大差不差。如果这篇文章已经过时，那么请自行查找其他文章，此类文章非常非常多，关键词：github pages 绑定域名)

这里可以稍微暂停一下，如果打算使用cloudflare r2作为图床（建议先去看Step 2的注意事项），需要先将域名迁移到 cloudflare。具体迁移方式，网络上教程很多，不再赘述。

Step 1. Vercel 加速

Vercel 是一个用于前端开发者快速部署网站和 Web 应用的平台，它提供了无服务器架构、自动 CI/CD 部署、全球 CDN 加速、Serverless Functions 等服务，帮助开发者将本地项目轻松上线。

访问Vercel，登录github pages对应的账号，添加项目

image-20251201203430169

导入 github名.github.io

image-20251201203527277

设置如下，Project Name 任意即可，Framework Preset 选择 Other，然后 Deploy，等待，即可看到博客的缩略图

image-20251201203640395

image-20251201203851863

返回到主页，就可以看到刚才导入的博客。vercel 会实时同步 github 仓库的内容，也就是说，对github仓库进行的任何修改都会被自动同步到 vercel 中，不需要手动修改 vercel 中的内容。

image-20251201204032964

点击进入项目主页，点击 Domains 进行域名设置

image-20251201204246410

这里可以看到 vercel 提供的一个免费二级域名，该域名对国内加速并不友好，但是可以作为测试域名。点击 Add Domain 添加刚才购买的域名

image-20251201204436832

image-20251201204743978

这里有两个选择

  • 如果想要使用类似于 https://blog.域名 来访问博客，那么这里输入 你想要的前缀.域名，比如blog.gubaiovo.com，下面选项保持默认即可

  • 如果想要使用 https://www.域名 或者直接用 https://域名 来访问你的博客，那么需要下面两步

    1. 先添加 www.域名，比如 www.gubaiovo.com，下面选项保持默认
    2. 再添加 域名，比如 gubaiovo.com，下面选项选择第二个 Redirect to Another Domain ，第一个框选择 308 Permanent Redirect，第二个填入 www.域名

image-20251201205425275

添加后如下

image-20251201205603089

返回到域名解析，添加解析：

  • 解析类型：CNAME

  • 名称/主机记录：

    • 如果是选择类似于 https://前缀.域名 来访问博客，那么就直接填入前缀即可，这里就是用https://test.gubaiovo.com
    • 如果是选择第二种以 https://www.域名 或者 https://域名 来访问，那么按照 https://前缀.域名 的方式，添加两条记录，名称分别为www和@
    • 上面两种方式的记录值均为 cname-china.vercel-dns.com

  • 目标/记录值：cname-china.vercel-dns.com

这是cloudflare添加方式，注意cloudflare代理状态为 仅 DNS：

image-20251201205838620

image-20251201210055813

DNS记录有一定的生效时间。添加好后，稍等一段时间，访问你的域名即可。此时使用的是 vercel 的国内加速

Step 2. Cloudflare R2 图床

注意，使用 Cloudflare R2 需要绑定海外支付方式，如果没有海外支付方式，请跳过此步，选择其他图床。也可以选择去购物平台购买虚拟卡

R2 是Cloudflare推出的对象存储服务，主打零出口费用（也就是免流量费）和与 Amazon S3 兼容的 API，适合存储大量数据且需频繁访问的场景，完美解决传统图床的痛点：

✅ 不怕被刷流量：下载请求1000万次/月免费，超限后仅$0.36/百万次
✅ 全球加速：虽不及国内CDN，但实测白天可达50MB/s（速度测试截图）
✅ 完全兼容S3 API：适配所有主流图床工具（如PicGo、WordPress插件）

首先需要一个 Cloudflare 账号和海外支付方式，而且需要在 Cloudflare 下有一个可用的域名。可以将 Step 0 中购买的域名转移到 Cloudflare 下(修改DNS即可)，网络教程很多，这里不赘述了。

在左侧找到 R2 对象存储，点击 概述，右上角 创建存储桶

image-20251201211658401

存储桶的名称可以填自己喜欢的，位置选择亚太即可，存储类按照提示选择，一般选择标准即可

image-20251201211801863

这里创建一个名为 www 桶作为示例，并且在里面添加了目录 blog

image-20251201212050815

此时桶里的文件还不能被公开访问，点击设置中的自定义域，点击 添加

image-20251201212157920

这里要填写的 域 是完整域名，以 files.gubaiovo.com 为例，以后想要获取桶内 blog 文件夹名为 1.png 的文件，就需要访问如下链接 https://files.gubaiovo.com/blog/1.png

image-20251201212226422

添加后稍等一段时间就可以生效。在此期间，可以将之前的博客中图片文件上传到桶内，并修改源博客的图片路径。

除此之外，如果还担心流量被盗刷，可以添加CORC策略和WAF。在桶的设置中找到 CORC 策略，点击添加，修改允许的源服务器，然后保存。

image-20251201212938159

然后返回到用户主页，找到域名，在左侧 安全性 中进入 安全规则，点击创建规则。具体的规则内容需要自己发挥（拷打ai）

image-20251201213151507

Step 3. Github Action 自动部署

GitHub Actions 是 GitHub 提供的一种持续集成和持续部署（CI/CD）服务，允许开发者在代码仓库中自动化执行各种任务。通过编写工作流文件，开发者可以实现代码测试、构建、部署等操作，从而简化软件开发流程。

参考文章：https://alanlee.fun/2024/07/05/deploy-hexo-with-github-action/

如果使用本地hexo，每次写完博客都要hexo cl hexo g hexo d，尽管可以写脚本一键完成这三个步骤，但是等待时间还是很长，非常麻烦。而且当电脑环境发生变化，需要重新安装hexo环境，也是非常折磨的一步。如果我们能够只需要将markdown文件上传到github，让github自己帮我们完成这些重复步骤，无疑能减轻负担。github action就很好的解决了这一点。

进行Step 3时，建议使用测试仓库作为github pages仓库来模拟一次，如果模拟成功，再对github pages仓库进行更改。

使用 Github Action 自动部署需要两个仓库，一个是github pages的prd仓库，一个是用来构建github pages的dev仓库。

参考文章写的已经非常详细了。这里贴出workflow文件 deploy.yml。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
name: Deploy blog

on:
  push:
    branches:
    - main

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20.x] 

    steps:
      - uses: actions/checkout@v4

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}

      - name: Configuration environment
        env:
          HEXO_DEPLOY_PRI: ${{secrets.HEXO_DEPLOY_PRI}}
        run: |
          sudo timedatectl set-timezone "Asia/Shanghai" 
          mkdir -p ~/.ssh/
          echo "$HEXO_DEPLOY_PRI" | tr -d '\r' > ~/.ssh/id_rsa
          chmod 600 ~/.ssh/id_rsa
          ssh-keyscan github.com >> ~/.ssh/known_hosts
          git config --global user.name "github用户名"
          git config --global user.email "github邮箱"

      - name: Install dependencies
        run: |
          npm i -g hexo-cli
          npm ci

      - name: Deploy hexo
        run: |
          hexo clean
          hexo d -g

注意修改 开头的分支名，如果博客仓库使用的main就不用修改了、 github用户名 、 github邮箱

需要注意的是，参考文章作者使用的主题tranquilpeak需要编译，所以他在 Install dependencies 中包含如下步骤

1
2
3
4
5
6
7
8
- name: Install dependencies
  run: |
    npm i -g hexo-cli
    npm ci
    # 下面是参考文章作者的hexo主题编译步骤
    cd themes/tranquilpeak/
    npm ci
    npm run prod

在本地的博客根目录创建 .github/workflows/deploy.yml ，贴入上面内容，将本地博客先进行一次 hexo cl ，并按照参考文章的方式修改 _config.yml 的 deploy 字段中的 repo ，然后上传用来构建github pages的私有仓库dev，然后检查action执行情况。