vuepress爬坑之旅

郭邯發表於2018-12-26
Vue

前言

前些天我突然想搞個個人部落格，自己搞網站覺得太麻煩，百度來百度去好像hexo很不錯。可是不知道為啥，我搞了一個星期都沒搞出來，不是這錯就是那錯。怎麼分類，怎麼管理標籤又是一塌糊塗，文件寫起來又很麻煩。然後我就放棄了。沒過多久我就瞭解到還有一個東西叫vuepress。雖然現在馬上要9102年了，可是我vue還沒用過幾次。於是我決定拿這個專案練練手，順便學習下vue。事實證明這又是一次踩坑，不過結果還好，踩坑很久之後搞出來網站了。

1.vuepress是什麼

vuepress是基於vue的靜態部落格系統。何為靜態部落格？靜態部落格就是不用跟後臺打交道，只有展示功能的部落格。也就是不能評論，不能點贊，不能線上討論等。哎，看到這些就憋屈，沒有評論萬一有人看上我怎麼辦？但是要互動，就需要資料庫就需要有後臺。這些搞起來就沒完沒了。還需要花大把銀子。思來想去，想來思去，最後決定還是不要女朋友了。就搞個靜態部落格了，末尾我留下我的微信就好了。看上我的妹子可以加我（偷笑.jpg）。

2.安裝vuepress

安裝vuepress，官網推薦是使用yarn。事實證明官方推薦是正確的。我在我的window上使用npm結果報錯不斷。最後還是改用了yarn。

yarn是什麼？這個1年前我就知道了，不過現在還是第一次用。你可以把yarn當成npm。它只是比npm優秀一丟丟。使用的命令又不太一樣而已。作用都是一樣的，也都是從npm庫裡下載模組。

安裝步驟：

  1. 新建一個資料夾，比如名為blog
  2. 使用管理員身份執行命令列工具，進入剛才新建的blog資料夾，執行yarn init -y生成package.json
  3. 執行yarn global add vuepress 全域性安裝vuepress，再執行yarn add -D vuepress再本地安裝yarn
  4. 命令列執行mkdir docs,在blog資料夾下新建docs資料夾。
  5. 命令列執行echo '# hello world' > docs/README.md 在docs資料夾下新建一個markdown檔案
  6. 執行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就是這個東東。

image

配置這個的步驟如下:

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 就可以看到效果了(有時候重新整理下就可以了，有時候不行)。

新增了favorite

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是可以巢狀的，從而可以顯示多級選單。

配置前：

nav配置前

配置後：

nav配置後

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文件

另外推薦下我自己的網站：前端蝸牛路

vuepress的demo我已經上傳到github了，可以檢視這裡。vuepress的demo

再囉嗦下，顯示的目錄結構你們有沒有覺得很帥，這個工具是我自己開發的,ctree-cli，歡迎下載使用。

相關文章