自动化测试平台开发（十二）：接口测试 - 部署 VuePress到 GitHub Pages

前面说到VuePress构建在线文档，发布方式有2种，一是发布到服务器，二是发布到GitHub上，通过Pages链接访问（不需要服务器，白嫖）。

GitHub访问受限，很多时候需要vpn，其实Gitee-仓库-》服务-》GiteePages 也可以，但是因为Gitee需要实名认证并且我的项目原本在Github上，所以docs还是放在了Github。

 

下面是详细步骤：

一、初始化 Git 仓库

首先，登陆 GitHub，然后，点击右上角➕找到 new repository 选项，创建一个新的仓库。（步骤很简单，这里不细说）

这个仓库用来存放整个项目：https://github.com/txu2k8/auto-test-platform

 

在 package.json 里加一些脚本（deploy-gh）：

{
  "name": "tpdocs",
  "version": "1.0.0",
  "description": "测试平台",
  "private": true,
  "homepage" : "https://txu2k8.github.io/auto-test-platform/",
  "main": "index.js",
  "scripts": {
    "test": "vue-cli-service serve --mode test --port 9528",
    "test:unit": "jest --clearCache && vue-cli-service test:unit",
    "test:ci": "npm run lint && npm run test:unit",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy-gh": "npm run docs:build && bash scripts/deploy-gh.sh"
  },
  "author": "tao.xu2008@outlook.com",
  "license": "ISC",
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.9.7",
    "@vuepress/plugin-medium-zoom": "^1.9.7",
    "vuepress": "^1.9.7"
  }
}

 

本地运行：

yarn docs:dev # 或者：npm run docs:dev

 

本地构建：

yarn docs:build # 或者：npm run docs:build

 

二、配置 GitHub Pages

首先，在 docs/.vuepress/config.js 中配置正确的 base。

module.exports = {
  base: '/auto-test-platform/',
  title: 'testPlatform.docs'
}

新建脚本 tpDocs/scripts/deploy-gh.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:txu2k8/txu2k8.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

# 把上面的 <USERNAME> 换成你自己的 Github 用户名，<REPO> 换成仓库名，比如我这里就是：
git push -f git@github.com:txu2k8/auto-test-platform.git master:gh-pages

cd -

执行脚本进行部署：

yarn deploy-gh # 或者：npm run deploy-gh 或者 ./scripts/deploy-gh.sh

 

deploy-gh.sh会打包tpDocs下VuePress项目为静态页面，并push到项目github仓库的gh-pages分支。

 

Github 仓库，点击 settings-》Pages：配置

 

三、遇到的问题

页面css样式不生效，可能是打包后路径问题，可以通过在package.json种添加homepage解决：

{
  "private": true,
  "homepage" : "https://txu2k8.github.io/auto-test-platform/",
}

 

 

四、在线访问

https://txu2k8.github.io/auto-test-platform

 

 

  

 

 

-------- THE END --------