前言
前些天我突然想搞個個人部落格，自己搞網站覺得太麻煩，百度來百度去好像hexo很不錯。可是不知道為啥，我搞了一個星期都沒搞出來，不是這錯就是那錯。怎麼分類，怎麼管理標籤又是一塌糊塗，文件寫起來又很麻煩。然後我就放棄了。沒過多久我就瞭解到還有一個東西叫vuepress。雖然現在馬上要9102年了，可是我vue還沒用過幾次。於是我決定拿這個專案練練手，順便學習下vue。事實證明這又是一次踩坑，不過結果還好，踩坑很久之後搞出來網站了。
1.vuepress是什麼
vuepress是基於vue的靜態部落格系統。何為靜態部落格？靜態部落格就是不用跟後臺打交道，只有展示功能的部落格。也就是不能評論，不能點贊，不能線上討論等。哎，看到這些就憋屈，沒有評論萬一有人看上我怎麼辦？但是要互動，就需要資料庫就需要有後臺。這些搞起來就沒完沒了。還需要花大把銀子。思來想去，想來思去，最後決定還是不要女朋友了。就搞個靜態部落格了，末尾我留下我的微信就好了。看上我的妹子可以加我（偷笑.jpg）。
2.安裝vuepress
安裝vuepress，官網推薦是使用yarn。事實證明官方推薦是正確的。我在我的window上使用npm結果報錯不斷。最後還是改用了yarn。
yarn是什麼？這個1年前我就知道了，不過現在還是第一次用。你可以把yarn當成npm。它只是比npm優秀一丟丟。使用的命令又不太一樣而已。作用都是一樣的，也都是從npm庫裡下載模組。
安裝步驟：
- 新建一個資料夾，比如名為blog
- 使用管理員身份執行命令列工具，進入剛才新建的blog資料夾，執行
yarn init -y生成package.json - 執行
yarn global add vuepress全域性安裝vuepress，再執行yarn add -D vuepress再本地安裝yarn - 命令列執行
mkdir docs,在blog資料夾下新建docs資料夾。 - 命令列執行echo '# hello world' > docs/README.md 在docs資料夾下新建一個markdown檔案
- 執行
npx vuepress dev docs預覽效果。
2.1 步驟詳解：
第3步解釋下，全域性安裝vuepress是為了方便在命令列呼叫vuepress命令。在本地也可以不用安裝vuepress，在本地安裝的目的是為了解耦。當全域性vuepress升級到其他版本後，本地還可以使用之前版本的vuepress,避免因為升級而導致專案不可用。全域性安裝只是為了命令列使用命令，實際用到的程式碼還是本地的程式碼。
從第1步到第4步，執行完後，資料夾的目錄結果如下：
blog檔案下有package.json和docs兩個檔案(夾)，其實blog資料夾下還有node_modules資料夾，我這裡忽略了，你知道有就行，我就不在命令列列印出來了。
.
|-blog
|-docs
|-README.md
|-package.json
複製程式碼執行vuepress dev .結果如下：
命令列：
瀏覽器：
瀏覽器顯示的格式不太對，應該顯示成標題1的格式，結果顯示成了'# Hello VuePress!'。這個是經常出現的事情。不用緊，稍後我們用自己的markdown工具，編輯下docs資料夾下README.md就可以了。
2.2 修改package.json
在package.json中加入一些命令，簡化我們的工作。
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
複製程式碼當我們執行yarn docs:dev 就相當於執行vuepress dev docs
當我們執行yarn docs:build 就相當於執行vuepress build docs
此時package.json完整程式碼如下:
{
"name": "blog",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
},
"license": "MIT"
}
複製程式碼2.3 預覽效果
命令列執行 yarn docs:dev 預覽效果。這時候你可以用你的markdown工具修改docs下README.md的內容，修改完了瀏覽器會自動重新整理，展現最新內容。
2.4 打包
命令列執行yarn docs:build,vuepress就會把我們的markdown檔案打包生成html檔案。打包會在docs資料夾下生成.vuepress資料夾，生成的html檔案被存放在.vuepress資料夾下的dist資料夾下。
我們可以在.vuepress下新建一個config.js檔案，通過修改dest可以把檔案生成到不同的目錄。我就不修改了。
生成的html檔案可以部署到任何靜態伺服器上，我是上傳到了github上。
此時目錄結構如圖所示:
|-blog
|-docs
| |-.vuepress
| | |-dist
| | | |-404.html
| | | |-assets
| | | | |-css
| | | | | |-0.styles.f164d2bb.css
| | | | |-img
| | | | | |-search.83621669.svg
| | | | |-js
| | | | | |-2.aae77c18.js
| | | | | |-3.48b292a8.js
| | | | | |-4.6947e3e9.js
| | | | | |-app.0ffe2193.js
| | | |-index.html
| |-README.md
|-package.json
複製程式碼2.5 總結
以上是vuepress的基本用法，相信大多數人都可以執行成功。接下來就是進階階段了。
3. 配置favorite.icon
這是一個很小的知識點，但是折騰起來也很麻煩。favorite.icon就是這個東東。
配置這個的步驟如下:
1.製作icon,尺寸可以是16*16 或者 32*32 或者64*64。具體什麼尺寸自己定就可以。可以ps製作一個或者百度下載一個
2.在.vuepress下新建public資料夾，把製作好的icon放進去。
3.在.vuepress下新建config.js配置檔案。config.js中可以配置的項非常多，可以點選這裡檢視配置，我這裡只講最基本的。
此時的目錄結構如下：
|-blog
|-.gitignore
|-docs
| |-.vuepress
| | |-config.js
| | |-public
| | | |-favicon.ico
| | | |-favorite.png
| |-README.md
|-package.json
複製程式碼4.配置config.js
module.exports = {
title:"前端蝸牛路",
description:"郭邯同學的個人部落格",
head:[
['link',{rel:'icon',href:'/favicon.ico'}]
]
}
複製程式碼注意這裡的link的href是直接連結到根目錄，我之前寫的是/public/favicon.ico結果導致一直出不來。
好了，現在重新命令列重新執行下yarn docs:dev 就可以看到效果了(有時候重新整理下就可以了，有時候不行)。
4. 配置導航欄
4.1 目標是是什麼
我想要這樣一個導航欄，分別為首頁、文章、掘金、GitHub、知乎、女朋友。
- 點選“首頁”就回到部落格的首頁
- 點選“文章”顯示下拉選單,下拉選單有兩個項“軟技能”和“webgl”。這是兩類我想分享的部落格內容
- 點選“掘金”、“GitHub”、“知乎”就跳到我相應的其他網站主頁
- “女朋友”就是我一些無病呻吟的感慨（拿鍵盤捂臉）
4.2 配置config.js
有了以上目標我們配置config.js。我們修改config.js如下：
其中themeConfig下的nav就是我們配置的導航欄。
module.exports = {
title:"前端蝸牛路",
description:"郭邯同學的個人部落格",
head:[
['link',{rel:'icon',href:'/favicon.ico'}]
],
themeConfig: {
nav: [
{ text: '首頁', link: '/' },
{
text: '文章',
items:[
{ text: '軟技能' , link:'/softskill/'},
{ text: 'webgl' , link:'/webgl/'}
]
},
{ text: '掘金', link: 'https://juejin.im/user/5b0f41de518825153a440dd9' },
{ text: 'GitHub', link: 'https://github.com/ggwork'},
{ text: '知乎', link: 'https://www.zhihu.com/people/yagb/activities'},
{ text: '女朋友', link: '/girlfriend/'}
],
}
}
複製程式碼配置中text是顯示在導航欄上的文字，link是連結，items是二級選單。items是可以巢狀的，從而可以顯示多級選單。
配置前：
配置後：
4.3 新建目錄
在導航欄上我們除了外鏈外，我們還配置了幾個目前還不存在的連結'/softskill/'、'/webgl/'、'/girlfriend/'。這些連結對應我們伺服器上的對應的目錄。如果我們伺服器上沒有這些目錄，點選這些選單的話就會報404錯誤。
所以我們要新建這些目錄（資料夾）
在.vuepress同級目錄下新建softskil、webgl和girlfriend資料夾。每個資料夾下都必須存在一個readme.md檔案、否則就會報錯。
此時的目錄結構如下：
|-blog
|-docs
| |-.vuepress
| | |-config.js
| | |-public
| | | |-favicon.ico
| | | |-favorite.png
| |-girlfriend
| | |-readme.md
| |-README.md
| |-softskill
| | |-readme.md
| |-webgl
| | |-readme.md
|-package.json
複製程式碼回到瀏覽器，重新整理下，點選下導航欄，你就可以發現，導航欄已經可以訪問了。比如點選“女朋友”。結果如下:
自此我們導航欄就配置完成了。關於配置選項的詳情，請點選這裡檢視：主題配置
5. 配置側邊欄
5.1 需求說明
下面我們開始配置側邊欄，我們以導航欄文章選項下的“軟技能”為例。我需要點選“軟技能”之後，左邊出現側邊欄，顯示我softskill資料夾下我需要分享的文章，這樣方便網友通過點選側邊欄檢視不同的文章。
5.2 配置config.js
配置側邊欄還需要配置config.js，配置如下：
module.exports = {
title: '前端蝸牛路',
description: '郭邯同學的個人部落格',
head: [['link', { rel: 'icon', href: '/favicon.ico' }]],
themeConfig: {
nav: [
{ text: '首頁', link: '/' },
{
text: '文章',
items: [
{ text: '軟技能', link: '/softskill/' },
{ text: 'webgl', link: '/webgl/' }
]
},
{ text: '掘金', link: 'https://juejin.im/user/5b0f41de518825153a440dd9' },
{ text: 'GitHub', link: 'https://github.com/ggwork' },
{ text: '知乎', link: 'https://www.zhihu.com/people/yagb/activities' },
{ text: '女朋友', link: '/girlfriend/' }
],
sidebar: {
'/softskill/': [
'',
'軟技能-程式碼之外的生存指南1（職業篇）',
'軟技能-程式碼之外的生存指南2（自我營銷篇）',
'軟技能-程式碼之外的生存指南3（自我學習）',
'軟技能-程式碼之外的生存指南4（生產力）',
'軟技能-程式碼之外的生存指南5（理財）',
'軟技能-程式碼之外的生存指南6（健身）',
'軟技能-程式碼之外的生存指南7（精神）'
],
'/webgl/': ['']
}
}
}
複製程式碼sidebar就是側邊欄，softskill就是我們的軟技能。softskill下的''的意思是，點選“軟技能”顯示其下的readme.md檔案。其他的都是對應的markdown檔案。
5.3 新建markdown檔案
此時目錄結構如下：
.
|-blog
|-docs
| |-.vuepress
| | |-config.js
| | |-public
| | | |-favicon.ico
| | | |-favorite.png
| |-girlfriend
| | |-readme.md
| |-README.md
| |-softskill
| | |-readme.md
| | |-軟技能-程式碼之外的生存指南1（職業篇）.md
| | |-軟技能-程式碼之外的生存指南2（自我營銷篇）.md
| | |-軟技能-程式碼之外的生存指南3（自我學習）.md
| | |-軟技能-程式碼之外的生存指南4（生產力）.md
| | |-軟技能-程式碼之外的生存指南5（理財）.md
| | |-軟技能-程式碼之外的生存指南6（健身）.md
| | |-軟技能-程式碼之外的生存指南7（精神）.md
| |-webgl
| | |-readme.md
複製程式碼重新整理下瀏覽器，已經成功了。
這裡有一點需要注意：在config.js中配置的側邊欄的文字跟瀏覽器側邊欄顯示的文字可能是不一樣的。在config中配置的文字是對應的markdown文章的檔名。在瀏覽器側邊欄顯示的文字是markdown文章內容裡第一個格式為標題1的文字
6.靜態資源
我們寫markdown中，有很多時候都需要引入靜態資源，比如圖片和一些js。vuepress提供了對應的引入靜態資源的方法。詳情請點選這裡，靜態資源。
不過，我個人不喜歡這樣，因為有時候我的部落格經常需要複製貼上到其他網站。這時候如果用靜態資源就就比較麻煩了，每次都要上傳排版。這裡我推薦騰訊雲的物件儲存，為什麼推薦它呢？因為它是免費的，而且有50G的空間，足夠我用好多年了。
詳細用法請點選這裡。騰訊物件儲存
7. 部署
對於部署，官網提供了一個.sh檔案，結果悲催啊，windows上不能執行.sh檔案。反正按照官網給的教程，搞了很久都沒成功。目前據我百度的結果vuepress沒有什麼自動部署的方法，最後我還是老老實實的每次打包後，手動使用git把dist資料夾上傳到自己的github page上。
對於如何建立github page你可以百度，這個很簡單，我就不分享了。如果你有好的部署方法請告訴我。
官網推薦的部署方法地址在這裡：部署
8.其他高階用法
vuepress簡單但是也蠻強大的，通過以上的步驟我們基本上可以建一個看起來醜醜的，但是卻很實用的網站。vuepress是可以美化的，也有很多高階的用法，比如markdown語法的擴充套件簡直牛逼了，還可以自己建立元件。這些我就不介紹了，我有個醜醜的網站就知足了。更詳細的用法請點選這裡：
另外推薦下我自己的網站：前端蝸牛路
vuepress的demo我已經上傳到github了，可以檢視這裡。vuepress的demo
再囉嗦下，顯示的目錄結構你們有沒有覺得很帥，這個工具是我自己開發的,ctree-cli，歡迎下載使用。