CI/CD: github actions 自动部署 github pages 个人主页

San_同学
923 阅读4分钟

a7b3e6a6bbac6d4833f3c279e84b9f83.png

推荐阅读时间：10 分钟

大家好，我是 San 同学 ，专注输出精品原创技术文章，目前在浙大读研 & 字节实习

现在一些前端岗位的JD上都会有如下加分项：参与开源、技术博客...为了提高自己的能力以及面试加分，来看看如何在 github 上白嫖一个博客吧

f7071f4e519cf51b38d18c35613b937c.png

本篇文章主要介绍如何通过 github 提供的 github pages 部署自己的个人博客，并且通过 github actions 实现一定的自动化部署能力，入门 CI/CD；由于我也刚接触 github actions，之前没怎么玩 github 提供的这个 CI/CD 的东西，就一步步踩着坑把它写好了，而且为了学习，就自己根据部署的全流程，只用官方写的一些基础 actions 来实现自动化部署；接下来就跟着我一步一步来吧

创建一个 github pages 的代码仓库

创建一个仓库的具体细节我就不多说了

9242105afd78ce4c6216289f34ffe5cf.png

创建好后，可以将自己的个人博客代码上传到 github 上，如果想要极简的模版，可以直接拉我的 个人博客 的代码来用;接下来的流程就以我的项目为例子（如果是用我的代码的话，可以下先把 .github 文件删，这个是配置 github actions 的文件），上传完代码后就可以开始编写 github actions 进行自动化部署了

编写 github actions 自动化部署

编写 github actions 其实就是编写一个 yaml 配置文件，具体的 yaml 语法和官方定义的配置项细节，可以参考官方的文档 github 官方还有一个 actions 市场，里边有很多人编写好的 actions 直接用，这次自动化部署就用到了一些官方封装的基础 actions

先创建对应的 github actions workflow 文件

在项目的根目录下创建 .github 文件夹/workflows 文件夹，再创建一个 deploy.yml 文件 👇 在此路径下的文件，会被 github 自动识别为 github actions，在指定的时机会触发配置好的 actions

e290521064bfbfbc396c73de96bf36c5.png

编写 github actions

接下来就是编写 actions 了，接下来我将按照整个初始化、编译构建、上传部署的流程介绍 actions 配置文件

  1. 首先是通过 on 这个关键字段先设置这个 workflow 的触发时机，下边的配置，表明当 master 分支 push 完成时会触发当前 workflow（包括 PR merge 完毕）；官方也提供了更多的触发时机，包括被指定为 PR 的 target 之后触发等等；具体可以参考上边的官方文档
on:
  push:
    branches:
    - master
  1. 接下里开始编写 jobs 工作流，

这里解释一下，一个 workflow 就会存在一个 jobs 工作流，一个 jobs 工作流会存在多个 job，这些 job 分别是运行在独立的环境上，可以隔离地做一些CI/CD的操作，包括做一些自动化测试、性能劣化检测、自动化部署等任务；这次自动化部署的 actions ，只包括一个 job ，也就是部署工作

首先，先设定 job 的 name，以及配置 runs-on 参数定义 job 的运行环境，这里配置的是最新的 macos 环境，github 同样支持 ubuntu & windows； 然后两个字段设置的是权限以及环境变量，这个是为了后边的 deploy actions 设置的参数，暂时可以不用理会；

# 下边是新增配置
jobs:
  job:
    name: Deployment
    runs-on: macos-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
  1. 初始化node环境，拉取项目代码

这里要注意，steps 字段是指定这次 job 中每一步的任务 这里用到了 github 官方写的三个 actions：checkout、setup-node 和 pnpm/action-setup，他们分别作用是拉取项目最新代码，初始化 node 环境以及安装 pnpm 包管理器

# 下边是新增配置
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      # setup node
      - name: Setup Node.js
        uses: actions/setup-node@v3 
        with:
          node-version: 16
          
      # setup pnpm
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          version: 7
          run_install: false
  1. 设置 pnpm cache & 安装依赖

这里用到了 cache 官方 actions 以及 run 字段，这个字段的值会直接在 shell（默认）中执行

具体看下代码配置了什么，其实就是利用pnpm的lock file作为hash key，对node_modules进行缓存，加快依赖构建的速度；如果缓存未命中则正常地install安装依赖即可

# 下边是新增配置
      # cache
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
          
      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      
      # cache fail and install dependencies
      - name: Install dependencies
        if: steps.pnpm-cache.outputs.cache-hit != 'true'
        run: |
          pnpm install
  1. 最后就是build构建生产产物，然后上传部署了

这里用到了 upload-pages-artifact 这个 actions，作用是上传构建好的产物，然后通过 deploy-pages 这个 actions 部署这个产物到 github pages 上，就可以访问了（这里要注意记得配置上边提到的权限和环境变量，不然会失败）

# 下边是新增配置
      - name: Build
        run: pnpm run build
        
      - name: upload production artifacts
        uses: actions/upload-pages-artifact@v1
        with:
          path: dist

      # deploy
      - name: Deploy Page To Release
        id: deployment
        uses: actions/deploy-pages@v1

提 PR 到master

最后提一个 PR 到 master，merge 之后，观察是否唤起 github actions workflow 如果一直走下来没问题的话将会看到如下工作流被唤起，并执行自动化部署

88c5017ad44a1189cea85973e559c5f0.png

db79e02b5645d96bf5baa2f82afc4a3c.png

打开 github pages 展示的 url

直接可以看到自己的个人博客已经部署成功啦 ✨

5d4d1b81e018624700b454ed9b513726.png

附录

贴上完整的配置 github actions 的 deploy.yml 文件

on:
  push:
    branches:
    - master
jobs:
  job:
    name: Deployment
    runs-on: macos-latest
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        
      # setup node
      - name: Setup Node.js
        uses: actions/setup-node@v3 
        with:
          node-version: 16
          
      # setup pnpm
      - name: Setup pnpm
        uses: pnpm/action-setup@v2
        id: pnpm-install
        with:
          version: 7
          run_install: false
        
      # cache
      - name: Get pnpm store directory
        id: pnpm-cache
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
          
      - name: Setup pnpm cache
        uses: actions/cache@v3
        with:
          path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-
      
      # cache fail and install dependencies
      - name: Install dependencies
        if: steps.pnpm-cache.outputs.cache-hit != 'true'
        run: |
          pnpm install
          
      - name: Build
        run: pnpm run build
        
      - name: upload production artifacts
        uses: actions/upload-pages-artifact@v1
        with:
          path: dist

      # deploy
      - name: Deploy Page To Release
        id: deployment
        uses: actions/deploy-pages@v1

参考

github actions document

👍 + ❤️ + 📨

如果觉得写得有什么不对的地方，欢迎讨论交流👏觉得写得好的可以 点赞+收藏+关注 ，San 同学 会继续不定期更新优质文章，也可以关注公众号 San 同学 ，希望可以一起进步，一起成长，争取做鄙视链顶端的前端工程师 🐶

avatar
文章
阅读
粉丝