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

栏目: 服务器 · 发布时间: 5年前

内容简介:在之前为了搭建 VuePress 的文档,顺带制作了视频教程,如今准备再次搭建一个 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 及优化【自动化】

点击该项目名称后可以进一步配置:

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

在 VuePress 官方文档中提及要使用 github-token,首先获取这个 token ,进入 Github 设置,左下的 Developer settings

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

添加描述,勾选 repo

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

将生成的 token 放入 Travis 配置中:

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

确认构建好你的项目后,在根目录下按照文档添加 .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 提交:

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

访问自定义域名 css.shanyuhai.top ,想起域名尚未解析,解析域名并重新查看结果:

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

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

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

最后

为了方便阅读,所以将内容进行了划分:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

改变未来的九大算法

改变未来的九大算法

[美] 约翰.麦考密克 / 管策 / 中信出版社 / 2013-6 / 39.00元

Google得出的搜索结果是如何产生的? 百度为何会陷入“搜索门”,又是什么机制使然? 身处在大数据时代的我们,究竟该如何应对变化莫测的世界? …… 没有满篇的专业术语,第一次让我们通过简单明了的语言、生动的例证了解支撑计算机王国的灵魂支柱——9大算法,包括人工智能、数据压缩,以及Google著名的PageRank等。 本书精彩地介绍了搜索引擎、PageRank、公开......一起来看看 《改变未来的九大算法》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具