前言

网上有很多用指令来实现自动化部署的教程,由于我个人不太想记指令,也刚好之前用过 Github Desktop 来上传文件,就想着试试看能不能不用指令来搭建Action,答案是可以的,搭建的步骤跟用指令大致相同,简单说就是把指令转化成“可视化”。

该教程仅对clone主题有效,npm下载主题无效

原教程源自 二兔 大佬 (无gulp)

原教程源自 xmmmmmovo 大佬 (带gulp)


教程

准备工作

  1. 确保在配置过程中能访问Github ,无法访问看下面教程

  2. 下载 Github Desktop ,并 登录

  3. 备份好本地源码! 备份好本地源码! 备份好本地源码!

  4. 在博客 根目录 创建文件夹 命名 .github ,在 .github 文件夹下再 创建 一个文件夹 命名 workflows

    1
    根目录/.github/workflows

无gulp

备份好本地源码!!!

无gulp的自动化部署比较简单,不需要key,说白了还是看 自动化的源码

  1. 博客仓库 clone本地 ,记录好 本地路径

  2. 找到 Current branch ,输入myblog ,点击 New branch ,再点击 Create branch

  3. 等待创建分支,点击 Publish branch 推送到远端 PS: 仓库就会生成一个名为myblog的新分支,新分支会复制旧分支的内容

  4. 回到 Github Desktop , 查看 Current branch 是否为 myblog , 否 则切换到 myblog

  5. 在准备工作 4 中 workflows 文件夹下 新建文件命名 deploy.yml填入以下内容 注意:GitHub用户名 和 邮箱 需要自行修改

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    # 当有改动推送到master分支时,启动Action
    name: 自动部署

    on:
    push:
    branches:
    - myblog #2020年10月后github新建仓库默认分支改为main,注意更改

    release:
    types:
    - published

    jobs:
    checkout:
    runs-on: ubuntu-latest
    steps:
    - name: 检查分支
    uses: actions/checkout@v2
    with:
    ref: master #2020年10月后github新建仓库默认分支改为main,注意更改

    - name: 安装 Node
    uses: actions/setup-node@v1
    with:
    node-version: "12.x"

    - name: 安装 Hexo
    run: |
    export TZ='Asia/Shanghai'
    npm install hexo-cli -g

    - name: 缓存 Hexo
    uses: actions/cache@v1
    id: cache
    with:
    path: node_modules
    key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: 安装依赖
    if: steps.cache.outputs.cache-hit != 'true'
    run: |
    npm install --save

    - name: 生成静态文件
    run: |
    hexo clean
    hexo generate

    - name: 部署到github pages
    run: |
    git config --global user.name "Github用户名"
    git config --global user.email "邮箱"
    # git clone https://github.com/xxxxx/xxxx.github.io.git .deploy_git
    # 此处务必用HTTPS链接。SSH链接可能有权限报错的隐患
    # =====注意.deploy_git前面有个空格=====
    # 这行指令的目的是clone博客静态文件仓库,防止Hexo推送时覆盖整个静态文件仓库,而是只推送有更改的文件
    # 我注释掉了是为了刷新整个仓库,也可以选择不注释掉,但是可能出现没有识别到的情况
    hexo deploy
  6. 把克隆源码删除再把本地源码复制进入 注意:把 根目录下 node_modules 和 主题文件下 .git 删掉,一定要删掉!不然无法推远端

  7. 回到 Github DesktopSummary 随便填 , 点击Commit to myblog

  8. 回到 Github仓库 , 等待 Actions 部署 ,即可

带gulp

备份好本地源码!!!

带gulp的自动化部署需要配置key,其他跟 无gulp 基本一致,说白了也是看 自动化的源码

  1. 生成 key ,生成两个文件: .pub 公钥 和 无后缀 私钥

    1
    ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
  2. 配置 公钥 , 点击 Settings ,选择 Deploy keys , 点击 Add deploy key ,勾选 Allow write access , 点击 Add key

    1
    2
    Title     Action
    Key 生成的公钥
  3. 配置 私钥 ,点击 Settings ,点开 Secrets , 选择 Actions ,点击 New repository secret , 点击 Add secret

    1
    2
    Name      ACTIONS_DEPLOY_KEY
    Value 生成的私钥
  4. 把生成的 公钥 和 私钥 删除

  5. 按照上面 无gulp 1 ~ 4步骤 配置好

  6. 在准备工作 4 中 workflows 文件夹下 新建文件命名 deploy.yml填入以下内容 注意:Github用户名/仓库名 需要自行修改

    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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    # workflow name
    name: Deploy To Github Pages

    # 当有 push 到仓库就运行
    on: [push]

    jobs:
    deploy:
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest
    env:
    TZ: Asia/Shanghai

    steps:
    # 切换到master
    # from: https://github.com/actions/checkout
    - name: Checkout Repository myblog branch
    uses: actions/checkout@master

    # 安装node
    # from: https://github.com/actions/setup-node
    - name: Setup Node.js 12.x
    uses: actions/setup-node@master
    with:
    node-version: "12.x"

    # 缓存 node_modules
    - name: Cache node modules
    uses: actions/cache@v2
    with:
    path: ~/.npm
    key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
    restore-keys: |
    ${{ runner.OS }}-build-${{ env.cache-name }}-
    ${{ runner.OS }}-build-
    ${{ runner.OS }}-

    # 安装hexo并生成
    - name: Setup Hexo Dependencies
    run: |
    npm install hexo-cli -g
    npm install
    hexo generate
    gulp

    # 部署到GitHubPage
    # from https://github.com/peaceiris/actions-gh-pages
    - name: Deploy
    uses: peaceiris/actions-gh-pages@v3
    with:
    deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
    # 这里写你自己的仓库名
    external_repository: Github用户名/仓库名
    publish_branch: master
    publish_dir: ./public
    # 这里我改成了与原格式相似格式的commit message
    commit_message: 'Site updated: ${{ github.event.head_commit.timestamp }}'
  7. 把克隆源码删除再把本地源码复制进入 注意:把 根目录下 node_modules 和 主题文件下 .git 删掉,一定要删掉!不然无法推远端

  8. 回到 Github DesktopSummary 随便填 , 点击Commit to myblog

  9. 回到 Github仓库 , 等待 Actions 部署 ,即可


常见问题

  1. 错误代码 Process completed with exit code 128.
    解决方法: 仓库 => Settings => Actions => General => Workflow permissions 选择第一个 , 点击 Save ,重新部署即可
  2. 错误代码 Process completed with exit code 2. / 1.
    解决方法: 检查代码是否存在格式问题(一般都是格式问题)

补充

如果你是托管到Vercel,记得在Vercel更改推送分支为blog (项目 => Settings => Git => Production Branch)

无gulp 和 带gulp 上传源码步骤一致,不同之处在于两者自动化源码是否需要配置 key,说白了就是看 自动化的源码

二兔 大佬 的部署源码还可以 部署到服务器 ,只是我暂时不需要就删了,需要的同学可以去看看 原教程