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

上周发了一片 《究竟什么是前端脚手架？》 ，我在后面留言：

作为懒癌晚期患者，我克服重重阻力，还是决定分享一下懒到极致后连打包都不愿意操作的办法。

整体思路

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

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

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

相关资料：

• 我的文档看下效果：codexu.github.io/

• 我的文档远吗： github.com/codexu/code…

• VuePress中文文档(1.x)： v1.vuepress.vuejs.org/zh/

• Travis CI：travis-ci.org

创建项目

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}
复制代码

"${***}"

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

3.Github 增加一个 Personal access tokens，位置在 Settings / Developer settings 。

• Note 随意填，填 travis-ci 就行。
• 除了 delete_repo 权限都打勾就行。

4.进入Travis CI，使用 Github 登陆， 进入dashboard，此时应该可以看到你刚创建的项目。

5.启动进入这个项目，右上角 More options 点击 setting，配置环境变量。

https://