基于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 - 知乎