高效的软件开发利器：CI/CD工具与持续部署

Lab07 CI/CD 简介CI/CD 基本概念

CI/CD 指的是持续集成(Continuous Integration)、持续交付(Continuous Delivery)和持续布署(Continuous Deployment)。

在软件开发过程中，会经历开发、构建、测试、发布、部署等过程，在产品的迭代过程中，这些过程会不断地重复进行。

现在试想一下，你是一名测试人员，已经写好了好多测试用例，但是开发人员每次更新代码你都要自动重新建立软件，运行所有的测试用例并给出反馈，这是十分苦闷的。

CI/CD 就是将这种过程自动化的工具或则服务，请阅读这一篇知乎文章了解更详尽的信息。

简单来说，可以觉得如下的观点是正确的：

常用的 CI/CD 工具

CI/CD 的工具可以说是数不胜数，有无数种方案可以实现 CI/CD 的工作流。

根据项目的不同，选择的 CI/CD 工具很可能会不一样，这里简单地列举一些 CI/CD 工具：

当须要用到这种工具的时侯，再去查阅相关的官方文档就可以了，软件开发不就是看文档写文档嘛，有哪些难的（bushi

大作业 CI/CD 推荐方案其实大作业不强制要求布署到云服务器上，但是我们建议每位小组都订购一台云服务器，并且实现在云服务器上布署大家的网站。一些云服务器可以按小时计费，最基础的云服务器包月大约在100 元左右(学生价)。

我们推荐在 Github 上实现大作业前前端的 CI/CD，前前端各自一个库房，两个库房采用各自的 CI/CD 工作流。在向库房的 main 分支 push 之后，利用 Github Actions 自动化地实现前前端项目在云服务器上的手动布署。

关于 Github Actions 的简单介绍，可以瞧瞧这篇博客。

实验作业

部署自己的个人博客！

CI/CD 的实验作业将仅涉及到 CD 的内容，使用Hugo 作为博客框架，使用PaperMod 主题，部署的个人博客在所有截图完成后可删掉(当然也可以保留)作业命名为CI_CD_个人博客.pdf或则CI_CD_大作业.pdf，建议使用 Markdown 编写之后导入 pdf环境配置这一部分内容适用于想要保留个人博客的朋友，不想保留的可以 fork这个库房到自己的 Github 账户下，并直接跳过环境配置这一部分安装 Hugo

官方安装文档：

使用 Homebrew 安装：brew install hugo

使用 MacPorts 安装：port install hugo

在 Ubuntu 下：sudo apt install hugo

在 Arch Linux 下：sudo pacman -Syu hugo

下载hugo_0.98.0_Windows-64bit.zip解压该zip文件，将hugo.exe联通到一个合适的目录(例如D:\Hugo)将hugo.exe所在的目录(例如D:\Hugo)加入到系统环境变量中

创建个人博客

Hugo 官方文档：

打开你的 Terminal，将工作目录切换到工作区(下文中以D:\Workspace取代)：cd D:\Workspace

使用 Hugo 生成新站点：hugo new site blog -f yml

现在，你的个人博客就创建好了，位于D:\Workspace\blog下

使用 PaperMod 主题使用别的主题也可以，但是要在递交的作业中说明

PaperMod 主题官方文档：

将工作目录切换到个人博客下：cd D:\Workspace\blog

初始化 Git 仓库：git init

使用 PaperMod 主题：git submodule add –depth=1 themes/PaperMod

在D:\Workspace\blog\config.yml中添加这一行(更详尽的配置参见Hugo框架以及PaperMod主题的官方文档)：

theme: "PaperMod"

第一篇文章

将工作目录切换到个人博客下：cd D:\Workspace\blog

创建一篇新文章：hugo new posts/my-first-post.md

编辑D:\Workspace\blog\content\posts\my-first-post.md，将其内容更改为：

---
title: "My First Post"
date: 2022-05-04T13:25:38+08:00
draft: false
---
我的第一篇博客

启动 Hugo 服务器查看当前的博客疗效：hugo server

服务器运行成功后，可以在:1313查看博客疗效，例如下图：

博客的美化

这部份内容不做要求，将不再展开讲解，有兴趣的朋友可以自行查阅PaperMod主题的文档进行配置，PaperMod主题还有一个示例的博客网站以供参阅，实际配置上去并不复杂。

对于喜欢折腾个人博客的朋友来说，可以参考butterfly 重装日记，演示疗效如下。

启用 Github Pages

关于 Github Pages，这里有一篇博客可以作为简单的参考

创建个人博客库房

除了fork这个库房之外不需要做任何事

在Github上新建一个库房(名字叫myblog或则blog之类的，下文假定为myblog)，最好是public的库房，例如下图的配置：

根据Github的提示，将本地的D:\Workspace\blog库房push到远程库房，例如下图中的蓝色方框所示：

创建好库房以后，结果应当如下图所示：

创建username.github.io库房

为了使用 Github Pages，该库房是必须要创建的，这里的username是你的Github用户名，例如下图：

至此，你已然有了两个库房，即myblog和username.github.io

将这两个库房目前的内容截图，作为作业的第一张截图添加 CD 工作流博客库房的配置

在远程库房上新建一个名为gh-pages的分支，如下图所示：

在博客库房的Settings -> Actions -> General中更改如下配置，使得 Github Actions 拥有对库房的写权限，如下图所示：

接下来查看Settings -> Pages下的内容，就会发觉Github Pages早已启用了，例如下图：

如果没有启用，需要检测自己当初是否进行过username.github.io库房或其他库房的Github Pages配置，并对其进行Unpublish site操作。将Github Pages成功启用的页面截图，作为作业的第二张截图配置文件的编撰

为了使用 Github Actions，我们须要在博客库房中创建.github/workflows文件夹，如下图所示：

在该文件夹中的yml文件将成为我们定义的CI/CD工作流，下面我们在.github/workflows中创建一个gh-pages.yml文件，如下图所示：

gh-pages.yml文件的内容为：

name: github pages

on:
  push:
    branches:
      - main  # Set a branch to deploy
  pull_request:

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes (true OR recursive)
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          # extended: true

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        if: github.ref == 'refs/heads/main'
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./public

下面是具体步骤的解释：

GITHUB_TOKEN 是GitHub官方提供的一个特殊的token，用于代表 GitHub Actions 进行身分验证，不需要自己创建。更多信息可以参考手动令牌身分验证。

另外，为了博客网站的正常展示，还须要将config.yml中的baseURL修改为这样的格式：.github.io/

最后的config.yml文件大约如下所示(用户名和库房名称用自己的)：

baseURL: https://llleoli.github.io/myblog/
languageCode: en-us
title: My New Hugo Site
theme: "PaperMod"

最后，将博客库房中新增的修改push到远程，CI/CD 的工作流就早已实现了。

将目前博客远程库房中的内容截图，作为作业的第三张截图结果验证

访问自己的博客网站，查看网站疗效，如下图所示：

将自己博客的网址和内容截图，作为作业的最后一张(第四张)截图

好了，到目前为止，你早已有了一个可以访问的个人博客了！如果想了解更多Github Actions的信息，建议去阅读官方文档，没有哪些东西比官方文档更好用了。