javascript - 拯救懒癌文档君 - VuePress + Travis CI + Github Pages 自动线上生成文档 - 个人文章

作者：codexu

整体思路

1.Github 创建项目，本地创建切换到 docs 分支，通过 VuePress 构建文档项目（写一些文档），上传至 Github。

2.Travis CI 自动 clone 后安装依赖、编译、上传至 Github master 分支。

3.通过 GitHub Pages 功能将 master 分支上的内容展示在 web 上。

创建项目

1.使用 VuePress 初始化项目，只说几点，文档写的十分详细。

依赖安装在 devDependencies。
package.json script 写运行和打包脚本，"serve": "vuepress dev docs"，"build": "vuepress build docs"。（这里按照自己习惯，后面做持续集成要用）
创建 docs 文件夹，把所有 markdown 文档存放在这里。
docs/.vuepress/config.js 可以做大量配置。

2.使用 Github 创建项目 [name].github.io，例如我的文档是 codexu.github.io，关联到本地。

为什么用 [name].github.io ？

因为在这个项目下，可以直接使用 https://[name].github.io/ 域名，短小精悍～

3.通过 git checkout -b docs 切换到 docs 分支，docs 分支存放文档源码，master 分支存放打包好的 HTML 等文件。

为什么使用 master 分支存放打包后的文件？

因为在 [name].github.io 项目下没得选，你也可以换个其他仓库，就可以避免这个问题。

4.写一些文档，做一下简单的配置，先别急着提交到 Github。

通过 Travis CI 做自动化打包及部署

1.在根目录下创建 .travis.yml 文件，并写入一些内容：

language: node_js
node_js:
    - 10
cache: yarn
install:
    - yarn
script:
    - yarn build
after_success:
    - cd docs/.vuepress/dist
    - git init
    - git config --global user.name "${U_NAME}"
    - git config --global user.email "${U_EMAIL}"
    - git add -A
    - git commit -m 'deploy'
    - git push --quiet --force "https://${GH_TOKEN}@${GH_REF}" master:${P_BRANCH}

language: 语言选择 node_js，我们前端还有的选吗？
node_js: node版本，这块也许是越高越快？
cache: yarn 缓存，能使你构建速度更快...吧。
install: 安装依赖的包管理工具，使用 yarn 比 npm 快的多。
script: 一切就绪之后通过 yarn install 安装依赖。
after_success: 安装结束后，我们做一些打包和 push 到 Github 的指令。
环境变量 "${***}" 这块后面会提到。

2.这时候可以 push 到 Github 了，因为没有 .travis.yml Travis CI 是不会理你的项目的，同时将默认分支改为 docs。