Hexo + GitHub Action + Github Codespaces = A Free Modern Blog

Posted by nepaul on 2022-12-15
#Tools

现代的个人博客应该是怎么样的？

  • 良好快速的书写体验 - 支持 Markdown
  • 随时都能编辑 - 不需要下载特定的编辑器，只要有一个浏览器
  • 无成本发布 - 就像常见的博客平台支持一键发布
  • 阅读体验良好 - 漂亮的，并且支持移动端
  • One more thing, it’s FREE

简单几步就可以满足以上诉求

  1. 假设您已经有一个 Hexo(A fast, simple & powerful blog framework) 项目（下文以 “hexo-blog” 来说明），并且已经用 GitHub Pages 来托管

  2. 新建一个 GitHub 项目用来托管 hexo-blog 项目的源代码；

  3. 在 hexo-blog 项目根目录新建文件 .github/workflows/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
    name: deploy

    on: 
      push:
        branches:
          - master

    jobs:
      deploy:
        runs-on: ubuntu-latest
        steps:
          - uses: actions/checkout@v3
          - run: git config --global user.email "YOUR EMAIL"
          - run: git config --global user.name "YOUR NAME"
          - uses: webfactory/[email protected]
            with:
              ssh-private-key: ${{ secrets.DEPLOY_KEY }}
          - uses: actions/setup-node@v3
            with:
              node-version: 18
              cache: 'npm'
          - run: npm install
          - run: npm run clean
          - run: npm run generate
          - run: npm run deploy

  4. 在 GitHub hexo-blog 项目的 Actions secrets(/settings/secrets/actions) 里新增一个名为 DEPLOY_KEY 的 secret.

    内容为您配置访问 GitHub 的 SSH Key 的私钥（比如 ~/.ssh/id_ed25519.pub）

至此，所有配置完毕。

如何使用？

  1. 浏览器打开 GitHub hexo-blog 这个项目；
  2. 点击 Code -> Codespaces 启用浏览器编辑器编辑；
  3. 新建并书写一篇文章（使用体验跟用本地环境书写一致）；
  4. 提交代码并推送到远程仓库（此时 GitHub Action 就自动开始执行发布流程，一般需要等待两分钟左右就能看到最新的文章了）；

一篇文章就发布成功了（本篇就是这么发成功的🤣）！

BTW: 类似 Codespaces 等在线编辑器应该是未来开发团队提升效能的一个利器，是非常值得尝试的。

Comments: