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