拯救懶癌文件君 - VuePress + Travis CI + Github Pages 自動線上生成文件

codexu發表於2019-06-17

VueGithub

作者：codexu

整體思路

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}
複製程式碼

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。