如何使用 Github+Actions 为自己的个人博客实现 CI/CD 的自动化部署

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

准备工作

什么是 Devops 和 CI/CD

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

什么是 Github+Actions

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

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

具体步骤

整体步骤分为两个部分

将博客部署到 Github page

创建 Github page 仓库

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

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

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

1.我的博客创建之路 1

2.我的博客创建之路 2

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

博客目标效果

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

配置博客文件存储仓库

创建博客仓库

新建博客文章存储的 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

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

# 在本地写好博客文章
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 的自动化部署就到此为止。喜欢的话请支持、转发、订阅！同时也欢迎各位大佬指出不足之处！在此本人万分感谢！

如何使用 Github+Actions 为自己的个人博客实现 CI/CD 的自动化部署 ​

准备工作 ​

什么是 Devops 和 CI/CD ​

什么是 Github+Actions ​

具体步骤 ​

将博客部署到 Github page ​

创建 Github page 仓库 ​

博客目标效果 ​

配置博客文件存储仓库 ​

创建博客仓库 ​

创建 token ​

配置密钥 secret ​

流程展示 ​

参考 ​

致谢 ​