介绍
在之前为了搭建 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
,想起域名尚未解析,解析域名并重新查看结果:
最后
为了方便阅读,所以将内容进行了划分: