一步步搭建 VuePress 及優化【自動化】

介紹

在之前為了搭建 VuePress 的文件，順帶製作了視訊教程，如今準備再次搭建一個 VuePress 的專案，一看自己的視訊竟然有五個小時，天吶，我只是需要過一遍而已，所以重新整理成文件吧，萬一將來又要用呢……

當然，如果您覺得文字版不夠直觀，可以前往觀看視訊版： 【☛ 視訊地址 ☚】 ，當時錄製完本地測試後覺得聲音大小還可以，結果一套錄完了才發現聲音很小，所以推薦帶上耳機。

VuePress 文件示例

自動化方案

1. 自動生成側邊欄

2020-01-14 修改

採用 vuepress-plugin-auto-sidebar 外掛解決。

2. 自動部署到 Github Pages

2019-06-25 新增 travis-ci 的視訊

首先進入 travis-ci 官網，將對應的專案啟用 Travis CI ：

點選該專案名稱後可以進一步配置：

在 VuePress 官方文件中提及要使用 github-token，首先獲取這個 token，進入 Github 設定，左下的 Developer settings：

新增描述，勾選 repo：

將生成的 token 放入 Travis 配置中：

確認構建好你的專案後，在根目錄下按照文件新增 .travis.yml：

language: node_js
node_js:
  - lts/*
script:
  - npm run docs:build
deploy:
  provider: pages
  skip-cleanup: true
  local_dir: docs/.vuepress/dist
  github-token: $GITHUB_TOKEN
  keep-history: true
  on:
    branch: master
複製程式碼

發現少了自定義域名這一步驟，追加一個指令碼吧：

# cname.sh

#!/usr/bin/env sh

set -e

cd docs/.vuepress/dist
echo 'css.shanyuhai.top' > CNAME
複製程式碼

# .travis.yml

language: node_js
node_js:
  - lts/*
script:
  - npm run docs:build
  - npm run cname
deploy:
  provider: pages
  skip-cleanup: true
  local_dir: docs/.vuepress/dist
  github-token: $GITHUB_TOKEN
  keep-history: true
  on:
    branch: master
複製程式碼

# package.json

"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs",
  "cname": "bash cname.sh"
},
複製程式碼

commit 提交：

訪問自定義域名 css.shanyuhai.top ，想起域名尚未解析，解析域名並重新檢視結果：

最後

為了方便閱讀，所以將內容進行了劃分：

1. VuePress 初始化及釋出
2. VuePress 外掛系列
3. VuePress 自動化

參考文件

1. VuePress 官網