介绍
在之前为了搭建 VuePress 的文档，顺带制作了视频教程，如今准备再次搭建一个 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，想起域名尚未解析，解析域名并重新查看结果：
最后
为了方便阅读，所以将内容进行了划分：
VuePress 初始化及发布
VuePress 插件系列
VuePress 自动化
参考文档
VuePress 官网