vuepress搭建個人部落格或則書寫文件
vuepress是尤大大4月12日釋出的一個全新的基於vue的靜態網站生成器，實際上就是一個vue的spa應用，內建webpack，可以用來寫文件。這篇文章給大家介紹了VuePress搭建個人部落格的過程，感興趣的朋友一起看看吧。
VuePress
vuepress是尤大大4月12日釋出的一個全新的基於vue的靜態網站生成器，實際上就是一個vue的spa應用，內建webpack，可以用來寫文件。
一個基於 Vue SSR 的靜態站生成器，本來的目的是爽爽的寫文件，但是我發現用來擼一個人部落格也非常不錯。
上手搭建
你可以跟著文件上的例子自己玩一玩，不過由於VuePress的文件也是用VuePress來實現的，所以我取巧直接拿
1.首先安裝VuePress到全域性
npm install -g vuepress
2.然後把VuePress倉庫克隆到你的電腦
在docs檔案中執行（請確保你的 Node.js 版本 >= 8）
|
1 2 3 |
|
當你看到這一行就說明已經成功了：
|
1 |
|
發現真的打開了vuepress文件：
下面的工作就是資料的替換了，但我們應該先看一下docs的目錄結構：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// Vuepress文件的預設主題配置內容
|
文件分成了兩部分，中文文件在/zh/目錄下，英文文件在根目錄下。
其實目錄裡面的東西都挺好看懂的，首先guide 、default-theme-config、config 這三個目錄中的都是Vuepress文件的主要內容，從中文文件裡也可以看到只有這三個目錄被替換了。
首頁配置
預設主題提供了一個主頁佈局，要使用它，需要在你的根目錄 README.md 的 YAML front matter 中指定 home：true，並加上一些其他的元資料。
我們先看看根目錄下的README,md：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
|
實在看不懂，官網有比我更詳細的配置說明。
導航配置
導航配置檔案在.vuepress/config.js中
在導航配置檔案中nav是控制導航欄連結的，你可以把它改成自己的部落格目錄。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
剩下的預設主題配置官方文件都有很詳細的文件說明這裡就不在囉嗦了。
更改預設主題色
你可以在.vuepress/目錄下建立一個override.styl檔案。
vuepress提供四個可更改的顏色：
|
1 2 3 4 |
|
我把它改成了這樣：
側邊欄的實現
由於評論區裡問的人較多，所以在這裡更新一下，其實我就算在這裡寫的再詳細也不如大家去看官方文件。
側邊欄的配置也在.vuepress/config.js中：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
對應的文件結構：
|
1 2 3 4 |
|
部署
在配置好你部落格之後，命令列執行：
Vuepress build
當你看到這一行就說明成功了：
Success! Generated static files in vuepress.
將打包好的vuepress目錄上傳到你的github倉庫，和github page配合，就可以配置好你的部落格網站了。
原文連結：https://juejin.im/post/5addb90af265da0b7f442935