使用 GitHub Actions 部署 Hexo

前言#

最近把博客从 Vercel 迁移到了 Netlify 了，这两家都是 ServerLess 部署平台，属于完全的无痛迁移了。

无论是 Vercel 还是 Netlify，都对于应用的部署时长有限制，但相对与 Vercel 免费的每月 6000 分钟来说，Netlify 的 300 分钟就略显寒酸了。但自从去年国庆我的网站挂在 Vercel 被墙外加最近 Vercel 访问不畅之后我就在研究 Netlify 了。

因为直接上传 NPM 包到 Netlify 上部署相比上传静态的 HTML 页面更耗时间，而我最近学习了 Github Actions，Github Actions 提供了每月 3000 分钟的部署时长，因此决定使用 Github Actions 来构建静态页面，之后仅同步静态页面到 Netlify 就完成了。

教程#

首先在仓库中新建一个 deploy 分支用于存放构建完成的静态页面。

别忘了在 Setting - Actions - General - Workflow permissions 中将权限设置为 Read and write permissions

在仓库主分支下的.github/workflows/文件夹新建一个 yml 文件，名称随意，如deploy.yml

随后在 yml 文件下写入以下代码

1
name: 部署静态页面到 Deploy 分支
2

3
on:
4
  push:
5
    branches:
6
      - main
7
  #手动触发
8
  workflow_dispatch:
9

10
jobs:
11
  build:
12
    runs-on: ubuntu-latest
13
    steps:
14
      # 获取源码
15
      - name: 迁出代码
16
        uses: actions/checkout@master
17

18
      - name: 安装node.js环境
19
        uses: actions/setup-node@master
20

21
      - name: 安装Hexo-cli 和 其他 node 环境
22
        run: |
23
          npm install hexo-cli -g
24
          npm install
25

26
      - name: 构建静态页面
27
        run: |
28
          npm run g
29

30
      - name: 你也可以在这里执行更多Linux命令
31
        run: |
32
          echo Example
33

34
      - name: 推送到 deploy 分支 # 部署
35
        uses: JamesIves/github-pages-deploy-action@v4.3.3
36
        with:
37
          branch: deploy # 部署后提交到的分支
38
          folder: public # 打包好的目录名称

最后 Push 到 Github 就好啦

别忘了把 Netlify 中的链接仓库重新绑定到 deploy 分支噢