首页 默认分类


title: 利用Github Action实现hexo博客的自动部署
tags:

  • hexo
  • 自动部署
    categories:
  • hexo
    abbrlink: 61031

date: 2020-11-20 20:06:51
headimg: https://picup.heson10.com/img/upyun/2020/11/20201122004400.png


Hexo 博客的Github Action自动化部署是什么?

简单说,就是把hexo博客的源代码上传到github代码仓库,github在代码发生变动的时候,自动通过安装一系列nodejs环境和相关依赖,生成html页面到github pages仓库。

再简单点说,就是把本地生成博客的工作,全部交给github执行。

这样做好处是什么?

  • 省去生成html的时间
  • ☆随时随地都能修改或增加博文(重点,可以看到我的导航栏页面里面有一个撰写栏目,如下图)

黑石博客撰写栏目

  • 备份了你的源代码

前言

网上这种教程一大堆,有的装了插件不一样(gulp等等),有的部署方法(ssh、令牌)不一样,以至于自动化部署的文件写法也不一样。

我这里尽量写一个适合小白和大多数hexo博客的一个自动化部署的教程。

总体步骤

  • 使用Github令牌部署hexo博客
  • Github新建一个私有仓库,并上传hexo博客源码
  • 配置Github Action实现自动化部署

使用Github令牌部署hexo博客

使用Github令牌部署的好处就是不用重复部署ssh密钥环境,换了电脑、电脑重装也不用重新配置。

github令牌获取

  • 登陆GitHub,右上角设置

image-20200727123742808

image-20200727123819255

image-20200727123858727

  • 输入密码后创建一个全权限的token,名称随意

image-20200727124017855

更改根目录配置deploy的仓库地址

记录好此token,后面放在配置文件里面GitHub的推送代码就是:

image-20200727124518685

比如我的github pages仓库https地址是:

https://github.com/heson10/heson10.github.io.git

那么我在根目录配置文件中的deploy设置令牌部署地址则为:

https://令牌@github.com/heson10/heson10.github.io.git

Github新建一个私有仓库,并上传hexo博客源码

新建一个仓库,如图

新建一个私有仓库

上传hexo博客源码

在博客源码中删除.git文件夹(隐藏文件夹),删除主题目录.git文件夹

删除git文件夹

根目录输入以下命令

git init
git add .
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/用户名/新建的私有仓库名.git(私有仓库的地址)
git push -u origin main

提交过程中会要求输入用户名和密码,输入即可。

提交完毕后,仓库代码如图:

私有仓库上传后

配置Github Action实现自动化部署

新建workflow

点击博客源码仓库的Action

image-20201122002117053

配置action

image-20201122002425835

代码如下(记得修改自己的地址):

name: Deploy # 部署

on: # 触发条件
  push:
    branches:
      - main # 推送到 main 分支(这里的分支名很重要,不要弄错了)

  release:
    types:
      - published # 推送新版本号

  workflow_dispatch: # 手动触发

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout # Checkout 仓库
      uses: actions/checkout@v2
      with:
        ref: main

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

    - name: Install Hexo # 安装 Hexo
      run: |
        npm install hexo-cli -g
    - name: Cache Modules # 缓存 Node 插件
      uses: actions/cache@v1
      id: cache-modules
      with:
        path: node_modules
        key: ${{runner.OS}}-${{hashFiles('**/package-lock.json')}}

    - name: Install Dependencies # 如果没有缓存或 插件有更新,则安装插件
      if: steps.cache-modules.outputs.cache-hit != 'true'
      run: | # **如果仓库里没有 package-lock.json,上传一下,npm ci 必须要有 package-lock.json**
        npm ci
    - name: Generate # 生成
      run: |
        hexo clean
        hexo generate
    - name: Deploy # 部署
      run: |
        git config --global user.name "GitHub用户名"
        git config --global user.email "GitHub邮箱"
        git clone https://github.com/heson525/heson525.github.io.git(换成自己的GitHub pages地址) .deploy_git
        export TZ='Asia/Shanghai'
        hexo deploy

查看状态

点击action即可看到部署状态

image-20201122003418494

image-20201122003452614

这样就代表自动部署成功了。

如何使用

平时我在自己的电脑里写了文章后,使用这三条命令,直接推送修改的文件到博客源码仓库,后面就会自动部署

git add .
git commit -m "增加博文"
git push

也可直接在源码仓库的source/_post文件夹里面直接添加markdown文件,进行写博文

结束语

基本步骤就是这样,总体步骤

  • 使用Github令牌部署hexo博客
  • Github新建一个私有仓库,并上传hexo博客源码
  • 配置Github Action实现自动化部署

有问题请留言。如有错误,欢迎指正。


文章评论