介紹
在之前為了搭建 VuePress 的文件，順帶製作了視訊教程，如今準備再次搭建一個 VuePress 的專案，一看自己的視訊竟然有五個小時，天吶，我只是需要過一遍而已，所以重新整理成文件吧，萬一將來又要用呢……
當然，如果您覺得文字版不夠直觀，可以前往觀看視訊版： 【☛ 視訊地址 ☚】 ，當時錄製完本地測試後覺得聲音大小還可以，結果一套錄完了才發現聲音很小，所以推薦帶上耳機。
自動化方案
1. 獲取對應目錄下的檔名
這是一個初步應急的方案，對應 視訊 地址，完整的自動化處理在延期佇列中……
建立 utils/getFilenames.js 方法：
const { readdir, writeFile } = require('fs');
const { resolve } = require('path');
const FOLDERPATH = '/home/yuan/Projects/documents/docs/OS/centos';
readdir(FOLDERPATH, (err, files) => {
let filenames = [];
files.forEach(file => {
if (file === 'README.md') {
file = `''`;
} else {
file = file.replace('.md', '');
file = `'${file}'`;
}
filenames.push(file);
});
filenames.sort(); // 排序
writeFile(resolve(__dirname, './filenames.js'), `[${filenames}]`, () => {
console.log('檔名獲取完成.');
})
});
複製程式碼每次修改了對應的內容後獲取該分類的路徑，接著修改 FOLDERPATH ，再修改 package.json 檔案：
"scripts": {
"getname": "node utils/getFilenames.js"
},
複製程式碼之後每次修改完路徑後使用 npm run getname 即可獲得結果，將資料放入對應的側邊欄配置中即可。
2. 自動部署到 Github Pages
首先進入 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 ，想起域名尚未解析，解析域名並重新檢視結果：
最後
為了方便閱讀，所以將內容進行了劃分：