基於travis-ci實現vuepress自動部署

1、安裝 vuepress

這裏只是按照

若是你想在一個現有項目中使用 VuePress，同時想要在該項目中管理文檔，則應該將 VuePress 安裝爲本地依賴。

# 將 VuePress 做爲一個本地依賴安裝
yarn add -D vuepress # 或者：npm install -D vuepress

# 新建一個 docs 文件夾
mkdir docs

# 新建一個 markdown 文件
echo "# Hello VuePress!" > docs/README.md

# 開始寫做
npx vuepress dev docs
複製代碼

接着，在 package.json 里加一些腳本:

{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}
複製代碼

而後就能夠開始寫做了:

$ yarn docs:dev # 或者：npm run docs:dev
複製代碼

2、GitHub Pages 部署

1. 在 docs/.vuepress/config.js 中設置正確的 base。

若是你打算髮布到 https://<USERNAME>.github.io/，則能夠省略這一步，由於 base 默認便是 "/"。

在你的項目中，建立一個以下的 deploy.sh 文件（請自行判斷去掉高亮行的註釋）:https://<USERNAME>.github.io/<REPO>/（也就是說你的倉庫在 https://github.com/<USERNAME>/<REPO>），則將 base 設置爲 "/<REPO>/"。

2. 在你的項目中，建立一個以下的 deploy.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:<USERNAME>/<USERNAME>.github.io.git master

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -
複製代碼

3、集成 travis-ci

先用 github 帳號登陸 travis 網站，而後同步你的倉庫， 而後勾選咱們的項目倉庫（是保存文檔的倉庫而不是放生成頁面的倉庫）

配置 .travis.yml

而後在你的項目文件夾新建文件 .travis.yml， 這個文件內容根據你的項目而定，好比咱們的項目能夠是這樣的。

language: node_js
sudo: required
node_js:
 - 8.11.3
branch: master
cache:
 directories:
 - node_modules
before_install:
 - export TZ='Asia/Shanghai' # 設置時區
script:
 - ./deploy.sh
複製代碼

access_token

首先在 github 的 setting -> developer setting -> personal access token一欄點擊generate new token， 這下面的選項全選，而後就會生成一個 token，複製這個 token。

進入 travis 後臺，在環境變量（Environment Variables）裏設置鍵值對，好比

access_token <把複製的token黏貼在這>
複製代碼

修改 deploy.sh

集成 travis 還須要咱們修改 deploy.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'

git config --local user.name "楊俊寧"
git config --local user.email "1003719811@qq.com"

# 若是發佈到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 若是發佈到 https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

# 若是使用 travis 持續集成
git push -f https://${access_token}@github.com/<USERNAME>/<REPO>.git master:gh-pages

cd -
複製代碼

將 deploy.sh 變成可執行文件

在項目根目錄下執行該命令

git update-index --add --chmod=+x build.sh
複製代碼

如今在試着 push，觀察 travis 服務器日誌是否成功。

4、參考連接

• 搭建持續集成、基於 vuepress 的 Github Page - 知乎