有序集合

Blunt

利用github Action自动部署hexo博客到VPS

14
2024-12-11

使用github action自动部署博客,有三个好处:

  1. hexo博客的文件都保存在github上,不怕丢失,文件还有历史版本
  2. 本地无需安装hexo,只用安装Obsidian就能完成写作
  3. 迁移方便,git clone一下hexo和obsidian配置就全回来了

当然这个方式需要github网络通畅,我相信这对面向谷歌编程的程序员不是大问题。

安装软件

本地安装obsidian和git。obsidian用于编写文章,git把本地文件推送到github。

VPS安装rsync,否则后续github action无法使用rsync协议将生成的静态文件推送到VPS。

新建workflow

设置Secrets

在github repo依次点击“Settings”->"Secrets and variables",新建四个键值对:

BLOG_DEPLOY_KEY: 用于登陆vps的私钥,直接复制私钥,切勿改变格式!

BLOG_FOLDER: 存放博客静态文件的文件夹路径,结尾不带/

USER: 登陆vps的用户名,和BLOG_DEPLOY_KEY配套

VPS_IP: vps的ip地址或域名。如果是域名形式,需要确保域名已经解析到正确ip

注意事项

  1. BLOG_DEPLOY_KEY必须保持私钥格式如下:
-----BEGIN RSA PRIVATE KEY-----

<< the key itself goes here >>

-----END RSA PRIVATE KEY-----

连最后一个换行也要保留!前人教训,否则ssh-agent无法导入密钥

创建action

在github仓库中点击 Actions,然后点击 New workflow,在新yml文件中填入以下内容:

name: deploy blog to vps
on:
  push:
    branches:
      - main
jobs:
  deploy-blog:
    runs-on: ubuntu-latest
    steps:
        - name: Checkout
          uses: actions/checkout@v3
          with:
            submodules: 'recursive'
            fetch-depth: 0
        - name: Restore file modification time
          run: |
            find source/_posts -name '*.md' | while read file; do touch -d "$(git log -1 --format="@%ct" "$file")" "$file"; done
        - name: Setup node.js
          uses: actions/setup-node@v3
          with:
            node-version: '18.14.2'
        - name: Setup hexo
          run: |
            npm install hexo-cli -g
            npm install -f
        - name: Hexo generate
          run: |
            hexo clean
            hexo generate
        - name: Import private key
          uses: webfactory/ssh-agent@v0.7.0
          with:
            ssh-private-key: |
              ${{ secrets.BLOG_DEPLOY_KEY }}
        - name: Scan public keys
          run: |
            ssh-keyscan ${{ secrets.VPS_IP }} >> ~/.ssh/known_hosts
        - name: Deploy
          run: |
            rsync -av --delete public/ ${{ secrets.USER }}@${{ secrets.VPS_IP }}:${{ secrets.BLOG_FOLDER }}

注意点:

  1. 工作流的第一步就是要将最新的代码检出到 Github Actions 的虚拟环境中,通过 actions/checkout 实现。由于我的博客主题是以子模块的形式存在于博客仓库中的,所以还需要使用 submodules: 'recursive' 将子模块也递归检出。
  2. 使用 ssh-keyscan 扫描服务器的公钥并保存到 Github Actions 虚拟环境的 ~/.ssh/known_hosts 中,使工作流自动运行。
  3. 注意你的服务器上要先安装好 rsync 程序,而 GitHub Actions 服务器已经默认安装了 rsync
  4. 文件同步命令:rsync中public/ 是 Hexo 构建后的文件夹,这里需要注意的是加 / 是表示把目录中的文件分别传输,如果不加 /,则将整个 public 目录直接传输了。

测试action

将上述配置文件按照自己的实际情况修改好,然后点击右上角的 Start commit,再点击 Commit new file,将文件保存。此时你的仓库中就会生成一个 .github 文件,存的就是保存的配置文件。

回到你的本地代码中,使用 git pull 更新文件,然后修改你的博客内容,最后 push 到远程仓库,看看 Actions 中是不是开始构建发布你的博客吧。

如果一切正常,点开你的仓库 Actions,你会发现正在运行的工作流

总结

以上方法适用于任何静态网站的部署而不仅限于 hexo,也不限于部署到服务器,可以根据自己的需要调整。本文部分内容来源于参考链接,其中参考链接3行文详细,让我收益颇丰,向这位大佬表示感谢~

参考链接

  1. 利用GitHub Actions实现Blog自动部署与发布
  2. Hugo + GitHub Action,搭建你的博客自动发布系统
  3. 通过 Github Actions 实现 Hugo 博客的自动构建部署至服务器