vuepress與travis-cli持續整合自動化部署

Mondo發表於2019-09-28
Vue

由於前段時間整理了下工作中常用到的命令，想把其做成個文件，以備以後能夠方便查閱，想到用vuepress來搭建文件。

vuepress的搭建完全可參照官網，但是線上部署的時候還是碰到了一些需要注意的細節地方。

本文的部署是整合了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
複製程式碼

設定github

  • 手動建立gh-pages

vuepress與travis-cli持續整合自動化部署

  • 建立github token

vuepress與travis-cli持續整合自動化部署
vuepress與travis-cli持續整合自動化部署

點選generate new token，選擇部分許可權

vuepress與travis-cli持續整合自動化部署

儲存後，注意複製token串，只有第一次才會顯示，以後訪問只能更新token串。

設定travis cli

用github賬戶登入travis-ci

  • 開啟自動部署的專案

vuepress與travis-cli持續整合自動化部署

  • 設定變數GITHUB_TOKEN

vuepress與travis-cli持續整合自動化部署

ADD後可以直接嘗試修改專案程式碼後檢視部署資訊

vuepress與travis-cli持續整合自動化部署

總結

通過這次專案部署學習到了怎麼使用travis來持續整合github專案，學習阮一峰大神的持續整合服務 Travis CI 教程瞭解來部分travis配置；最後推薦下我的這次部署的專案，前端開發工作中遇到的命令：fe-dev-command

相關文章