阅读 844

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

2019-06-25 新增 travis-ci 的视频

首先进入 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 官网
关注下面的标签,发现更多相似文章
评论