最早接触的是 8 年前的 Cmd Markdown，十分优秀的产品。也是看着它的语法手册，学会了 Markdown 语法。后来作者没怎么更新，以为放弃了。用过 Hexo，也用过 Gridea，感觉 yilia 之类的主题差点意思便上手去改，没写多少东西，倒是学了学 EJS 和 Less。去年 Cmd Markdown 被以有违规内容为由停掉，笔记博客类的后起之秀层出不群但大多要被审查。虽然不会有什么出格言论，癞蛤蟆趴脚面，不咬人、膈应人，遂重新搭建。

思路

  • 静态生成器/博客框架：Hexo
  • CI/CD：Github 私有仓库(源码) + 公开仓库(成品) + action，本地/在线编写，提交到远端自动构建部署
  • 托管：Github Pages
  • 优化：使用 Imgbot 自动压缩图片，还访问慢的话就 CDN + 部署到 Netlify（以后再说）

本着能白嫖就白嫖的原则，选用上述方案。

过程

本篇只是记录过程中的关键点，并不会手把手教搭建部署。

初始化博客仓库，将主题作为 git 子模块，更新 Hexo 框架时同步更新主题，涉及的命令：

# 添加主题作为子模块
git submodule add -b 指定分支 主题的仓库地址 主题存放目录
# 出错的话使用下面命令，删除对主题目录下文件的追踪
git rm --cached 主题目录

利用 action CI/CD，需要在博客仓库下建一个.github/workflows/gh-page.yml，内容如下

name: Deploy GitHub Pages

on:
  push:
    branches:
      - main   # 推送到main分支时触发

jobs:
  deploy-gh-pages:
    runs-on: ubuntu-latest  # 运行环境
    permissions:
      contents: write       # 写权限
    concurrency:
      group: ${{ github.workflow }}-${{ github.ref }}  # 并发组控制，保证同时只能有一个job跑
    steps:
      - uses: actions/checkout@v4
        with:
          submodules: recursive  # 获取子模块最新主题，true/recursive

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Cache NPM dependencies
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-

      - name: Install dependencies
        run: npm ci

      - name: Build
        run: npm run build

      - name: Deploy
        # 用法 https://github.com/marketplace/actions/github-pages-action
        uses: peaceiris/actions-gh-pages@v4
        if: github.ref == 'refs/heads/main'
        with:
          # 部署密钥，需要手动生成密钥对，私有库用私钥，公开库用公钥，具体操作见上面网址
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          external_repository: username/external-repository  # 部署到的外部仓库
          publish_branch: main  # 部署分支
          publish_dir: ./public # 发布目录
          user_name: 'github-actions[bot]'  # 指定部署用户名
          user_email: 'github-actions[bot]@users.noreply.github.com' # 指定部署邮箱
          commit_message: ${{ github.event.head_commit.message }}    # 部署提交消息使用推送时的信息

Hexo 搭建博客的细节没有讲，参考下面两篇文章或者网上类似文章，大差不差：

Imgbot 是一个 github app，可以用来优化仓库中的图片尺寸，具体参考为你的博客添加imgbot优化图片。

待更新

  • Imgbot 优化后会生成一个 PR，考虑自动合并拉取请求，原理也是 action。
  • 优化访问速度，CDN + 部署到 Netlify。