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