一步步搭建 VuePress 及优化【自动化】

介绍在之前为了搭建 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_jsnode_js: - lts/*script: - npm run docs:builddeploy: 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 shset -ecd docs/.vuepress/distecho ‘css.shanyuhai.top’ > CNAME# .travis.ymllanguage: node_jsnode_js: - lts/*script: - npm run docs:build - npm run cnamedeploy: 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 官网