如何使用Github-Actions实现Hexo博客自动化部署

在本文中主要介绍我是如何使用Github+Actions为自己的个人博客实现CI/CD的自动化部署

之前为了更好的学习前端技术，也就在Github仓库上来建立了自己的个人博客。在使用了一段时间之后，我也发现了一种新的玩法，可以使用Github的Actions来对自己的博客站点内容进行持续集成和持续部署，也就是说，根据本篇的内容，你只需要3个git命令就能实现Hexo博客的部署，强烈建议小伙伴们积极动手试一试，在提升上线效率上极有帮助。

一、准备工作

1.什么是Devops和CI/CD

这里引用B站大佬up主遇见狂神说的视频为大家解读，大家可以了解一下整个的应用流程。

【狂神说】CI/CD到底是什么？十分钟理解企业级DevOps

2.什么是Github+Actions

大家可以查看这篇文章简单了解一下 所有开源项目免费使用，GitHub 内置 CI/CD 终于来了！

这里附上Github官方的介绍文档 GitHub Actions

二、具体步骤

整体步骤分为两个部分

一、将博客部署到Github page

1.创建Github page仓库

首先你需要拥有一个存储渲染文件的博客repository

将仓库名命名为your_username.github.io，这个仓库用来存储Hexo渲染的Html文件

具体操作可以参考我之前的两篇文章

1.我的博客创建之路1

2.我的博客创建之路2

也可以参考管家小e的网站搭建专栏的前三篇来解决

2.博客目标效果

打开http://localhost:4000进行预览，即可得到与下图相似的结果

二、配置博客文件存储仓库

2.创建博客仓库

新建博客文章存储的public仓库(公开)

可以将仓库名命名为My_Blog，这个仓库将被用来存储你的所有博客文章

• 创建token

这一步可以完全根据github官方给出的创建个人访问令牌教程操作

• 配置密钥secret

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

• 创建 workflow 脚本

在项目根目录下创建 .github/workflows 文件夹，并在文件夹下创建 YAML 文件用于编写任务执行脚本。

点击项目下的Actions

点击Set up this workflow

配置main.yml文件，设置工作流

name: Deploy My_Blog  #自动化的名称

on:
  # Triggers the workflow on push or pull request events but only for the main branch
  push: # push的时候触发
    branches: [ main ]  # 哪些分支需要触发
  pull_request:  
    branches: [ dev ]

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains a single job called "build"
  Blog_CI-CD:
    runs-on: ubuntu-latest  # 服务器环境
    # Steps represent a sequence of tasks that will be executed as part of the job
    
    steps:
      # 检查代码
      - name: Checkout
        uses: actions/checkout@v2  #软件市场的名称
        with: # 参数
          submodules: true
          persist-credentials: false
          
      - name: Setup Node.js
       # 设置 node.js 环境
        uses: actions/setup-node@v1
        with:
          node-version: '12'
          
      - name: Cache node modules
      # 设置包缓存目录，避免每次下载
        uses: actions/cache@v1
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          
      # 配置Hexo环境 
      - name: Setup Hexo
        env:
          ACTION_DEPLOY_KEY: ${{ secrets.ACCESS_TOKEN }}
        run: |
          npm install hexo-cli -g
          npm install
           
      
      # 生成静态文件
      - name: Build
        run: |
          hexo clean 
          hexo g
        
      # 2、部署到 GitHub Pages
      - name: upload GitHub repository
        env: 
          # Github 仓库
          GITHUB_REPO: github.com/username/username.github.io
         # 将编译后的博客文件推送到指定仓库
        run: |
          cd ./public && git init && git add .
          git config user.name "username"       #username改为你github的用户名
          git config user.email "your_Email"     #username改为你github的注册邮箱
          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

然后点击commit new file即可。

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

三、流程展示

# 在本地写好博客文章
git checkout -b dev   #切换到dev分支
git add .
git commit -m "add a new article"
git push origin dev

在本地推送完成后，即可在My_Blog的Actions页面查看到部署情况，然后打开自己博客站点域名http://your_username.github.io查看即可。

1.初始化云端Ubuntu服务器的部署环境

2.将本次提交推送到Github远端仓库

3.workflow流程概览

4.工作流workflow运行成功，本次部署成功

四、参考

[1].知乎大佬star 使用 GitHub Actions 自动部署 Hexo 博客到 GitHub Pages

[2].知乎大佬Tommy GitHub Actions 来自动部署 Hexo

[3].简书大佬VictorHong HUGO + Github + Github Action持续集成部署个人博客

OK！本期关于如何使用Github+Actions为自己的个人博客实现CI/CD的自动化部署就到此为止。喜欢的话请支持、转发、订阅！同时也欢迎各位大佬指出不足之处！在此本人万分感谢！