使用 GitHub Actions 自动部署 Hexo 博客到 GitHub Pages

使用 GitHub Actions 自动部署 Hexo 博客到 GitHub Pages

技术杂谈小彩虹2021-10-22 3:04:18140A+A-

前言

最近,看到网上有很多人开始使用 GitHub Actions 进行项目的持续集成(CI)以及持续部署(CD)。于是,我也心血来潮,开始使用 GitHub Actions 来进行个人博客的自动部署。不得不说,GitHub Actions 真香!

之前,我部署 Hexo 博客时,先通过 hexo g 将写好的 Markdown 文件转化为 HTML 文件,然后再使用 hexo d 把生成的 public 文件推送到 Github 仓库中,然后又使用 git 命令将 Hexo 博客开发源码推送到仓库的另一个分支中进行备份。这样来来回回的操作,着实有点麻烦。但使用了 GitHub Actions 后就方便多了,我只需提前写好自动化执行的脚本,当我将 Hexo 开发源码推送指定分支,GitHub Actions 自动就帮我生成好 HTML 文件并发布到 GitHub Pages 上,是不是很方便呀。

下面,我们就来看看是如何利用 GitHub Actions 实现自动化部署 Hexo 博客的吧。

GitHub Actions

GitHub Actions 是 GitHub 于 2018 年 10 月推出的持续集成服务。

GitHub Actions 的工作原理:当我们提前设置好需要自动化执行的任务脚本(.github/workflows 下的 .yml 文件)后,GitHub Actions 监控当前仓库的某一个操作(如:push),一旦有此操作,就会分配一个虚拟主机来自动化执行这些任务。

我们设置的任务即为 Action ,它存放在项目根目录的 .github/workflows 文件下,后缀为 .yml。一个 Action 相当于是一个工作流 workflow,一个工作流则可以有多个任务 job,而每个任务又能分成几个步骤 step。任务、步骤会依次执行。

关于 GitHub Actions 更多知识,请看 GitHub Actions 入门教程 - 阮一峰GitHub Actions 官网

准备工作

GitHub 仓库

首先,我们需要准备一个部署博客的仓库,一般命名为 {{username}}.github.io 这种形式,同时在本仓库上再创建一个分支用于保存 Hexo 开发源码。我这里使用建好的 hexo-blog-backup 分支进行 Hexo 开发源码备份,使用 master 分支进行博客源码部署。

提醒,这里也可以建两个仓库分别进行博客源码和 Hexo 开发源码的保存,跟建两个分支一样。

创建 GitHub Personal Access Token

这里还需要创建 Personal Access Token 用于 GitHub Actions 所构建得虚拟系统可以内容推送到仓库。

Personal Access Token 的生成教程见 Creating a personal access token

设置仓库 Secrets

将创建好的 Personal Access Token 添加到仓库的 Secrets 中,并设置名称, 如图:

secrets
创建 workflow 脚本

在项目根目录下创建 .github/workflows 文件夹,并在文件夹下创建 YAML 文件用于编写任务执行脚本。(我这里创建的是 main.yml,命名可以随意)

脚本内容如下:

name: Blog CI/CD

# 触发条件:在 push 到 hexo-blog-backup 分支后触发
on:
 push:
 branches: 
 - hexo-blog-backup

env:
 TZ: Asia/Shanghai

jobs:
 blog-cicd:
 name: Hexo blog build & deploy
 runs-on: ubuntu-latest # 使用最新的 Ubuntu 系统作为编译部署的环境

 steps:
 - name: Checkout codes
 uses: actions/checkout@v2

 - name: Setup node
      # 设置 node.js 环境
 uses: actions/setup-node@v1
 with:
 node-version: '12.x'

 - name: Cache node modules
      # 设置包缓存目录,避免每次下载
 uses: actions/cache@v1
 with:
 path: ~/.npm
 key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

 - name: Install hexo dependencies
      # 下载 hexo-cli 脚手架及相关安装包
 run: | npm install hexo-cli gulp -g npm install  - name: Generate files
      # 编译 markdown 文件
 run: | hexo clean hexo generate  - name: Execute gulp task
 run: gulp

 - name: Deploy hexo blog
 env: 
        # Github 仓库
 GITHUB_REPO: github.com/yifanzheng/yifanzheng.github.io
        # Coding 仓库
 CODING_REPO: e.coding.net/yifanzheng/blogs.git
        # Gitee 仓库
 GITEE_REPO: gitee.com/yifanzheng/yifanzheng.gitee.io
      # 将编译后的博客文件推送到指定仓库
 run: | cd ./public && git init && git add . git config user.name "yifanzheng" git config user.email "zhengyifan1996@outlook.com" git add . git commit -m "GitHub Actions Auto Builder at $(date +'%Y-%m-%d %H:%M:%S')" git push --force --quiet "https://${{ secrets.ACCESS_TOKEN }}@$GITHUB_REPO" master:master git push --force --quiet "https://RoYFbFDSfM:${{ secrets.CODING_TOKEN }}@$CODING_REPO" master:master git push --force --quiet "https://yifanzheng:${{ secrets.GITEE_ACCESS_TOKEN }}@$GITEE_REPO" master:master 

workflow 详细语法见: GitHub 操作的工作流程语法

小伙伴们可以根据实际情况将上面的脚本修改成自己可用的脚本。

部署

最后,我们只需要将源码推送到指定分支,GitHub Actions 就会自动帮我们部署项目啦。

deploy
最后再说一下怎么找 action,以下是几个常用的网址:

参考

使用 GitHub Actions 自动部署博客

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们