一步步搭建 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_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 官网

转载于:https://juejin.im/post/5c9f7dc851882567bf2a2bcb