介紹
在之前為了搭建 VuePress 的文件，順帶製作了視訊教程，如今準備再次搭建一個 VuePress 的專案，一看自己的視訊竟然有五個小時，天吶，我只是需要過一遍而已，所以重新整理成文件吧，萬一將來又要用呢……
當然，如果您覺得文字版不夠直觀，可以前往觀看視訊版： 【☛ 視訊地址 ☚】 ，當時錄製完本地測試後覺得聲音大小還可以，結果一套錄完了才發現聲音很小，所以推薦帶上耳機。
環境準備
對於環境準備不怎麼熟悉的還是推薦看 視訊第一節 吧。
Windows
-
安裝 cmder
解壓完成後複製其路徑地址，將其新增到環境變數。
使用
Win + R鍵快速啟動cmder，若成功則新增環境變數成功。 -
安裝 git
安裝包一路
next即可，在桌面上右鍵出現git bash here或命令列中輸入git --version能夠得到具體的版本資訊則安裝成功。 -
安裝 nodejs
安裝包同樣一路
next即可，在命令列輸入node -v，若得到具體版本資訊則安裝成功。 -
安裝 yarn
安裝完成後，在命令列輸入
yarn --version， 若得到具體版本資訊則安裝成功。 -
建立專案
建立專案可以分為兩種形式：
-
遠端倉庫
# xxx 為你的遠端倉庫連線 git clone xxx cd your_project_name npm init -y 複製程式碼 -
本地倉庫
# xxx 為你的遠端倉庫連線 npm init your_project_name -y cd your_project_name git remote add origin xxx 複製程式碼
-
-
安裝 vuepress
# 全域性安裝 yarn global add vuepress@next # 或者：npm install -g vuepress@next # 本地安裝 yarn add -D vuepress@next # 或者：npm install -D vuepress@next 複製程式碼 -
配置
package.json指令碼如果你的文件不是在
docs下，可以按照你的設定來：{ "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" } } 複製程式碼上面配置完後，可以進行測試：
yarn docs:dev # 或者：npm run docs:dev 複製程式碼若能在瀏覽器中正常訪問，則表示安裝成功。
Linux
Linux 配置與 Windows 所需一致，相信都用上 Linux 了，這點問題能夠解決。
搭建及優化
1. 瞭解路由與配置導航
關於檔案是如何渲染為對應的路由的：
| 檔案的相對路徑 | 頁面路由地址 |
|---|---|
/README.md |
/ |
/guide/README.md |
/guide/ |
/config.md |
/config.html |
瞭解了這個基本的概念後，就可以去配置對應的導航了。具體的導航欄配置介紹可以看 官方文件懂(www.bilibili.com/video/av433…) 。
在實踐後發現，若將所有內容放置在 docs/.vuepress/config.js 下將會很臃腫，難以閱讀與維護，推薦將其分離開，在根目錄下新建一個 config 資料夾：
// docs/.vuepress/config.js
const navConf = require('../../config/navConf.js');
module.exports = {
themeConfig: {
nav: navConf
},
}
複製程式碼舉個例子：
// config/navConf.js
module.exports = [
{ text: 'Home', link: '/' },
{ text: 'Guide', link: '/guide/' },
{ text: '基礎', items: [
{ text: 'Algorithm', link: '/base/algorithm/' },
{ text: 'Interview', link: '/base/interview/' },
{ text: 'Clean', link: '/base/clean/' },
{ text: 'Git', link: '/base/git/' },
]},
{
text: '開發',
items: [
{ text: 'FrontEnd', items: [
{ text: 'JavaScript', link: '/FrontEnd/javascript/' },
{ text: 'CSS', link: '/FrontEnd/css/' },
{ text: 'Webpack', link: '/FrontEnd/webpack/' },
{ text: 'Nodejs', link: '/FrontEnd/nodejs/' },
]},
{ text: 'BackEnd', items: [
{ text: 'Koa', link: '/BackEnd/koa/' },
{ text: 'MongoDB', link: '/BackEnd/mongodb/' },
{ text: 'Nginx', link: '/BackEnd/nginx/' },
] },
]
}
];
複製程式碼2. 配置側邊欄
側邊欄比導航欄要更為繁瑣一些。具體的導航欄配置介紹可以看 官方文件，對應的 視訊 。
首先在 docs 資料夾下新建你需要的目錄及檔案：
OS
├── centos
│ ├── 01-add-user.md
│ ├── 02-login-with-rsa-key.md
│ ├── 03-upload-file-to-server.md
│ └── README.md
├── manjaro
│ ├── 01-solve-problems-with-manjaro.md
│ └── README.md
└── windows
└── README.md
複製程式碼配置 config 檔案，當文章很多的情況下，還集中在 config 檔案中，那就得炸了：
// docs/.vuepress/config.js
const sidebarConf = require('../../config/sidebarConf/index.js');
module.exports = {
themeConfig: {
sidebar: sidebarConf
},
}
複製程式碼文章需要進行分類，所以會分成更多的子檔案，通過 index.js 進行管理：
# config/sidebarConf
sidebarConf
├── Base
│ ├── algorithm
│ │ └── index.js
│ ├── clean
│ │ └── index.js
│ ├── git
│ │ └── index.js
│ └── interview
│ └── index.js
├── Guide
│ └── index.js
├── index.js
└── OS
├── centos
│ └── index.js
├── manjaro
│ └── index.js
└── windows
└── index.js
複製程式碼// config/sidebarConf/index.js
// 介紹
const guide = require('./Guide/index.js');
// 基礎
const git = require('./Base/git/index.js');
const interview = require('./Base/interview/index.js');
const algorithm = require('./Base/algorithm/index.js');
const clean = require('./Base/clean/index.js');
// 作業系統
const windows = require('./OS/windows/index.js');
const manjaro = require('./OS/manjaro/index.js');
const centos = require('./OS/centos/index.js');
/**
* 側邊欄的配置
* 當路由深度越深時應當排序在更前方
* 示例: /frontend 和 /frontend/css
*
* 應當將 /frontend/css 寫在更上方
*/
module.exports = {
// 指南 Guide
'/guide/': guide,
// 基礎 Base
'/Base/git/': git,
'/Base/interview/': interview,
'/Base/clean/': clean,
'/Base/algorithm/': algorithm,
// 作業系統 OS
'/OS/manjaro/': manjaro,
'/OS/windows/': windows,
'/OS/centos/': centos,
// 根目錄下的 sidebar, 對於所有未匹配到的都會應用該 sidebar
// '/': [''] // 此處選擇禁用
};
複製程式碼以 CentOS 舉個例子：
// config/sidebarConf/OS/centos/index.js
const utils = require('../../../../utils/index.js');
const children = ['','01-add-user','02-login-with-rsa-key','03-upload-file-to-server'];
module.exports = [
utils.genSidebar('CentOS', children, false),
];
複製程式碼genSidebar 函式：
const utils = {
genSidebar: function (title, children = [''], collapsable = true, sidebarDepth = 1) {
return {
title,
collapsable,
sidebarDepth,
children
}
}
};
module.exports = utils;
複製程式碼3. SEO 配置
基本配置可以幫助我們做好網站的 SEO，更容易被搜尋到。具體的基本配置介紹可以看 官方文件，對應的 視訊 。
// docs/.vuepress/config.js
module.exports = {
title: '飛躍高山與大洋的魚',
description: '飛躍高山與大洋的魚的文件, vuepress 文件',
}
複製程式碼4. 更新時間與靜態資源
更新時間，如果按照文件進行配置的話時間格式是非中文的風格，解決很簡單：
// 新增多語言，改為國內即可
module.exports = {
locales: {
'/': {
lang: 'zh-CN',
}
},
themeConfig: {
lastUpdated: '上次更新',
},
}
複製程式碼所有的靜態資源都需要放置在 .vuepress/public 目錄下，你也可以為它們建立分類資料夾（這裡不好的效果是在預覽本地的 Markdown 檔案時無法看到圖片）：
public
├── apple-touch-icon.png
├── app.png
├── base
│ └── interview
│ └── 1468042984788341.png
├── favicon-32x32.png
├── favicon.ico
├── FrontEnd
│ └── javascript
│ ├── es6_20190112123602.png
│ └── es6_20190112124206.png
├── manifest.json
複製程式碼5. 部署到 github 並關聯到自定義域名
之前做視訊的時候還沒有
Travis CI的使用說明，剛剛看的時候發現有了，昨天花了好久來硬啃Travis官網，血虧……
這邊我釋出到的是 docs.shanyuhai.top ，所以 base 屬性預設為空即可；若是釋出到 docs.shanyuhai.top/docs 則 base 屬性為 docs。
deploy.sh 檔案示例：
#!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
# 生成靜態檔案
npm run docs:build
# 進入生成的資料夾
cd docs/.vuepress/dist
# 如果是釋出到自定義域名
echo 'docs.shanyuhai.top' > CNAME
git init
git add -A
git commit -m 'deploy'
# 如果釋出到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:shanyuhai123/documents.git master:gh-pages
cd -
複製程式碼6. 新增 Git 倉庫和編輯連結
參考文件及視訊同上：
// docs/.vuepress/config.js
module.exports = {
themeConfig: {
// 你的 Git 專案地址，新增後會在導航欄的最後追加
repo: 'shanyuhai123/documents',
// 啟用編輯
editLinks: true,
// 編輯按鈕的 Text
editLinkText: '編輯文件！',
// 編輯文件的所在目錄
docsDir: 'docs',
// 假如文件放在一個特定的分支下：
// docsBranch: 'master',
},
}
複製程式碼7. 域名解析
關於域名解析詳情可以去看我的 視訊 （第五個視訊中的解析方式存在問題）。
解析方式需要改為 CNAME 的形式：
最後
為了方便閱讀，所以將內容進行了劃分：