搭建 repo ubuntu_用GitHub Pages搭建支持CI/CD的个人网站

前言

可能每个前端开发者都会有过一个念头：我想做个自己的个人网站。但是搭建网站并不只是写写前端页面这么简单，还涉及到服务器，后台，构建，运维部署等。这次我们玩玩 GitHub Pages，GitHub 将这一切都提供好了，并提供一个网站域名给你用，在此基础上，我们再运用 GitHub Actions 来实现 CI/CD。从此以后只管开开心心写前端页面。下面将这过程记录一下：

• GitHub Actions 是 GitHub 的持续集成服务，持续集成由很多操作组成，比如抓取代码、运行测试、登录远程服务器、发布到第三方服务器等等。GitHub 把这些操作称为 actions。

GitHub Actions 基本概念

• workflow(工作流)：持续集成一次运行的过程，就是一个 workflow。

• job(任务)：一个workflow由一个或多个jobs构成，含义是一次持续集成的运行，可以完成多个任务。

• step(步骤)：每个job由多个step构成，一步步完成。

• action(动作)：每个step可以执行一个或多个命令(action)。

workflow 文件

• Github Actions 的配置文件叫 workflow 文件，存放在代码仓库的 .github/workflows目录

• workflow 文件采用YAML格式，文件名可以任意取，但是后缀名统一为 .yml，比如 foo.yml。一个库可以有多个 workflow 文件。Github 只要发现 .github/workflows 目录里面有 .yml 文件，就会自动运行该文件。

• workflow 文件配置字段：

  • name — workflow 的名称，如果省略，取文件名。name: Github Actions Demo

  • on — 指定触发workflow的条件，通常是某些事件。on: push，也可以是数组, on: [push, pull_request]

  • on.. — 指定触发事件时，可以限定分支或标签。on: push: branches: - master ,前面代码指定，只有master分支发生push事件时，才会触发workflow

  • jobs..name — workflow文件主体是jobs字段，表示要执行的一项或多项任务

  • jobs..needs — needs字段指定当前任务的依赖关系，即运行顺序

  • jobs.<job_id>.runs-on — runs-on字段指定运行所需要的虚拟环境，必填

  • jobs.<job_id>.steps — steps 字段指定每个Job的运行步骤，每个步骤可以指定一下三个字段

• • jobs.<job_id>.steps.name — 步骤名称

  • jobs.<job_id>.steps.run — 该步骤运行的命令或者action

  • jobs.<job_id>.steps.env — 该步骤所需的环境变量

完整 workflow 文件的范例

name: Greeting from Mona

on: push

jobs:

--my-job:

----name: My Job

----runs-on: ubuntu-lastest

----steps:

------name: Print a greeting

------env:

--------MY_VAR: Hi there! My name is

--------FIRST_NAME: Mona

--------MIDDLE_NAME: The

--------LAST_NAME: Octocat

------run:

--------echo $MY_VAR $FIRST_NAME $MIDDLE_NAME $LAST_NAME

基础知识就这么多，下面开始操作

发布 Vue 项目到 Github Pages

• 在 GitHub 新建一个空仓库，并将一个 Vue 项目代码 push 到仓库

• 生成 【GitHub密钥】，点击右上角个人中心的【Settings】【Developer settings】【Personal access tokens】,【Generate new token】,描述一下这个token，【Select scopes】选 【repo】、【admin:repo_hook】、【delete_repo】。最后点击【Generate token】

• 保存好这个生成的 【GitHub密钥】

• 设置项目密钥，【代码仓库】的 【Settings】【Secrets】【New secret】，取个名字Name，把上面的token作为Value，Name需和workflow脚本中保持一致(GitHub 执行 workflow 的时候需要根据 【Name】 来取得这个 【密钥】)，这里取ACCESS_TOKEN

• 打开项目的 package.json 文件，加一个 homepage 字段，表示该应用发布后的根目录 — “homepage”: “https://[username].github.io/[store_name]"，如我的是 “https://nandehutuzn.github.io/zn-blog“

• 项目新建 vue.config.js文件，配置publicPath 为仓库名称，publicPath: ‘/zn-blog’

• 在项目代码根目录新建 .github/workflows目录，新建一个ci.yml文件，文件内容如下：

name: Github Actions Build and Deploy Demo

on:

push:

branches:

- master

jobs:

build-and-deploy:

runs-on: ubuntu-lastest

steps:

- name: Checkout

uses: actions/checkout@master

- name: Build and Deploy

uses: JamesIves/github-pages-deploy-action-action@master

env:

ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }}

BRAHCN: gh-pages

FOLDER: dist

BUILD_SCRIPT: npm install && npm run build

上面 workflow 文件的要点如下：

1.整个流程在 master 分支发生 push 事件时触发

2.只有一个job，运行在虚拟机环境 ubuntu-lastest

3.第一步是获取源码，使用的 action 是 actions/checkout

4.第二步是构建和部署，使用的 action 是 JamesIves/github-pages-deploy-action

5.第二步需要四个环境变量，分别为 GitHub 密钥、发布分支(和后面配置对应)、构建生成文件结果所在目录(和项目build命令对应)、构建命令。其中，只有 GitHub 密钥是秘密变量，需要写在双括号里面，其他三个都可以直接写在文件里

• 保存，将整个仓库 push 到 GitHub — 每次推送后可在项目【Actions】面板中查看构建进度

• GitHub 项目代码仓库中【Settings】，下拉到【Github Pages】模块，设置【Source】为 “Branch:gh-pages”(即workflow配置文件中的BRANCH变量值)，”/(root)” 【Save】

这时打开上面的 homepage 地址应该就能看到内容了

设置为自己的域名

免费的域名是 GitHub 给的，里面包含 【.github.io】 字样，当然它也支持更换为自己域名，操作也很简单。

• 项目 public 目录新建 CNAME 文件，文件内容为要使用的域名，不带 http:、www. 等前缀，如：lbjning.com。CNAME 是 GitHub 设置自己域名时必要的文件，vue 项目中你直接把它放在根目录下会发现不生效，这是因为 CNAME 文件只存在于 master 分支，GitHub 构建发布用的是 gh-pages 分支，而这个分支内容都是项目打包构建后自动生成的，一种解决办法是，代码仓库【Settings】，下拉到【GtiHub Pages】【Custom domain】填入 CNAME 中的内容，如：lbjning.com。保存后你会发现 gh-pages 分支下多了个 CNAME 文件，但是这种手动方式需要你每次打包构建完成都来操作一次，因为 GitHub Actions 每次执行前都会把 gh-pages 分支内容清空掉。解决办法也很简单，把 CNAME 文件放到 master 分支的 public 目录下，因为这个目录下的文件是不参与打包构建的，且会直接拷贝到构建目录，能满足我们的要求。

• 登录【域名管理面板】，哪里购买的域名就登录哪个平台，添加两条记录，两条记录的 【主机记录】值分别为 www 和 @，记录值可通过命令行工具 ping GitHub Pages 原始域名获取，我的是 ping nandehutuzn.github.io

• 【注意】: 因为原来域名【nandehutuzn.github.io】后面 GitHub 会自动加帮我们上仓库名字【zn-blog】，所以在项目的 vue.config.js 文件中我们增加了 publicPath：’/zn-blog’ 配置，现在需要把这个配置删除。

  个人试玩网站：https://lbjning.com

• 

完。