VuePress 是一款使用 Vue 驅動的靜態網站生成器，是 Vue 的作者 Evan You 為了方便文件的編寫而開發的。
- 預設主題與 Vue 官方文件一致
- 簡潔，少配置，高效能
- Markdown 專為技術文件提供擴充
- 自帶 PWA
- 自定義主題，可定製程度完全由自己決定
官方文件：由於 1.x 還處於測試階段，可能隨時變更，所以建議選用 0.x 版本
1. 初始化
安裝
首先需要安裝 vuepress
可以使用全域性安裝：（選一個版本安裝即可，使用 yarn 或 npm 都可以）
yarn add global vuepress # 0.x 版本
yarn add global vuepress@next # 1.x 版本
複製程式碼也可以使用區域性安裝，在你的專案根目錄下：
yarn add -D vuepress
yarn add -D vuepress@next
複製程式碼注意有一個坑，我遇到過，安裝 vuepress@next 以及其他外掛時，預設會安裝 alpha 0 版本，需要修改 package.json 檔案，更改版本號，再重新使用 yarn 安裝一下。
另外，全域性安裝與區域性安裝在後面的部署命令中會有些差別。
結構目錄
.
├── docs
│ ├── .vuepress
│ │ ├── public
│ │ └── config.js
│ │
│ └── README.md
│
└── package.json
複製程式碼可詳細檢視：目錄結構
2. 配置 config.js 檔案
基礎配置
module.exports = {
title: "destiny'Note",
description: "生命的意義不僅是活著，而是我們給別人的生命帶來了何種不同。",
base: '/', // 專案根路徑
dest: '/dist/', // 打包後的資料夾路徑，為了方便，我把 dist 資料夾放到了根目錄上
// head 標籤中的額外內容
head: [
['link', { rel: 'icon', href: '/favicon.ico' }] // 這個是標籤頁 logo
],
// 語言配置
locales: {
// 鍵名是該語言所屬的子路徑
// 作為特例，預設語言可以使用 '/' 作為其路徑。
'/': {
lang: 'zh-CN', // 將會被設定為 <html> 的 lang 屬性
}
}
}
複製程式碼可詳細檢視：配置
主題配置
module.exports = {
...
// 主題配置
themeConfig: {
// 頂部導航
nav: [
{ text: '首頁', link: '/' },
{ text: '歸檔', link: '/archives/'},
{ text: '分類', link: '/categories/' },
{ text: '標籤', link: '/tags/' },
{ text: '關於我', link: '/about/' }
],
// 側邊欄
sidebar: [
'/'
],
sidebarDepth: 2, // 預設 1 提取到 h2，0 為禁用，2 為 h2，h3
displayAllHeaders: false, // 預設值：false 側邊欄只會顯示由當前活動頁面的標題組成的連結
activeHeaderLinks: true, // 預設值：true 滾動時通過 hash 高亮側邊欄標題
// Git 倉庫和編輯連結
repo: 'username/repo', // 你的倉庫
repoLabel: 'GitHub', // 導航欄上的文字
editLinks: true,
// 預設為 "Edit this page"
editLinkText: '編輯此頁面'
}
}
複製程式碼可詳細檢視：預設主題配置
3. 首頁
配置 docs 下的 README.md 檔案即可：
---
home: true
heroImage: /hero.jpg
heroText: Hero
tagline: Hero 副標題
actionText: 快速上手 →
actionLink: /zh/guide/
features:
- title: 簡潔至上
details: 以 Markdown 為中心的專案結構，以最少的配置幫助你專注於寫作。
- title: Vue驅動
details: 享受 Vue + webpack 的開發體驗，在 Markdown 中使用 Vue 元件，同時可以使用 Vue 來開發自定義主題。
- title: 高效能
details: VuePress 為每個頁面預渲染生成靜態的 HTML，同時在頁面被載入的時候，將作為 SPA 執行。
footer: MIT Licensed | Copyright © 2018-present Evan You
---
複製程式碼首頁必須設定 home 為 true。預設樣式與官方文件首頁一致。
4. 開發和部署
定義指令碼
初始化 package.json，如果是區域性安裝的話，這個檔案已經存在，不需要執行這個命令
yarn init
複製程式碼編輯 package.json 檔案，新增如下指令碼：（這裡需要注意）
{
...
// 全域性安裝
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
// 區域性安裝
"scripts": {
"dev": "npx vuepress dev docs",
"build": "npx vuepress build docs"
}
}
複製程式碼個人不喜歡官方的寫法，就把名稱寫的簡潔一些。
執行指令碼命令：
yarn dev # 開發
yarn build # 打包
複製程式碼部署到 GitHub Pages 上
部署到 GitHub 上，首先要在 GitHub 上建立倉庫，這裡省略。
然後再本地初始化倉庫，並關聯遠端倉庫
git init
git remote add origin <repo> # 你的遠端倉庫
複製程式碼打包之後把整個專案上傳到 master 分支上，方便管理
git add -A
git commit -m 'init blog'
# 首次提交需要 --set-upstream，後續可以去掉
git push --set-upstream origin master # 所有程式碼推送到遠端倉庫的 master 分支上
複製程式碼單獨將打包好的檔案上傳到 gh-pages 分支上，自動會生成 GitHub Pages，在倉庫設定裡可以檢視到相應地址。
git subtree push --prefix dist origin gh-pages # 只將 dist 上傳到 gh-pages 分支
複製程式碼注意，最好配置一個 .gitignore 檔案，去掉不需要上傳的檔案和資料夾。
自動化部署
每一次更新完文章之後，都需要敲一大串程式碼，才能重新部署，顯得很繁瑣。那麼我們來讓這些命令合併成一個命令吧。
專案根目錄下建立 deploy.sh 檔案：
#!/usr/bin/env sh
# 確保指令碼丟擲遇到的錯誤
set -e
# 生成靜態檔案
yarn build
# 提交到歷史區，$1 為執行 sh 時的第一個引數
git add -A
git commit -m $1
# 提交到 master 分支
git push origin master
# 將 dist 檔案提交到 gh-pages 分支
git subtree push --prefix dist origin gh-pages
# 退出命令
exit 0
複製程式碼然後在 package.json 檔案中配置指令碼：
{
"scripts": {
//...
"deploy": "bash deploy.sh"
}
}
複製程式碼後續部署直接使用命令：
yarn deploy "updatedBlog"
複製程式碼需要注意的是，後面帶的訊息，不能使用空格隔開（本人對 shell 指令碼不熟悉，查詢了也沒明白，希望有大神指點一下），使用了空格，就會導致只提交了空格前的訊息
另外，這個命令需要在 git bash 中使用，不能在 Windows 的命令列中使用。
5. 後續
太喜歡 VuePress 了，因為後面都託管給 Vue 了，所以速度飛快。
後續會出一個如何修改預設主題的文章。