# vuepress与travis-cli持续集成自动化部署

由于前段时间整理了下工作中常用到的命令,想把其做成个文档,以备以后能够方便查阅,想到用vuepress来搭建文档。

vuepress的搭建完全可参照官网 (opens new window),但是在线部署的时候还是碰到了一些需要注意的细节地方。

本文的部署是集成了travis cli自动化部署。

# 配置

根目录新建travis.yml文件

language: node_js # node环境
node_js:
  - lts/*
script:
  - npm run docs:build # 执行命令
deploy:
  provider: pages
  skip-cleanup: true
  local_dir: docs/.vuepress/dist # 部署的文件夹文件
  github-token: $GITHUB_TOKEN # travis服务上的token变量
  target-branch: gh-pages # 集成发布到gh-pages上
  keep-history: true
  on:
    branch: master
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 设置github

  • 手动创建gh-pages

1hGicj.jpg (opens new window)

  • 创建github token

1hGFjs.jpg (opens new window) 1hGC9g.jpg (opens new window)

点击generate new token,选择部分权限

1hGEBq.png (opens new window)

保存后,注意复制token串,只有第一次才会显示,以后访问只能更新token串。

# 设置travis cli

github账户登录travis-ci (opens new window)

  • 开启自动部署的项目

1hGp4S.md.jpg (opens new window)

  • 设置变量GITHUB_TOKEN

1hGVH0.md.jpg (opens new window)

ADD后可以直接尝试修改项目代码后查看部署信息 1hGmNT.md.png (opens new window)

# 总结

通过这次项目部署学习到了怎么使用travis来持续集成github项目,学习阮一峰大神的持续集成服务 Travis CI 教程 (opens new window)了解来部分travis配置;最后推荐下我的这次部署的项目,前端开发工作中遇到的命令:fe-dev-command (opens new window)

更新于: 2/9/2020, 11:39:55 AM