vuepress爬坑之旅

時間  2019-11-07
標籤 vuepress 之旅 简体版
原文   原文鏈接

前言

前些天我忽然想搞個我的博客，本身搞網站以爲太麻煩，百度來百度去好像hexo很不錯。但是不知道爲啥，我搞了一個星期都沒搞出來，不是這錯就是那錯。怎麼分類，怎麼管理標籤又是一塌糊塗，文檔寫起來又很麻煩。而後我就放棄了。沒過多久我就瞭解到還有一個東西叫vuepress。雖然如今立刻要9102年了，但是我vue還沒用過幾回。因而我決定拿這個項目練練手，順便學習下vue。事實證實這又是一次踩坑，不過結果還好，踩坑好久以後搞出來網站了。css

1.vuepress是什麼

vuepress是基於vue的靜態博客系統。何爲靜態博客？靜態博客就是不用跟後臺打交道，只有展現功能的博客。也就是不能評論，不能點贊，不能在線討論等。哎，看到這些就憋屈，沒有評論萬一有人看上我怎麼辦？可是要交互，就須要數據庫就須要有後臺。這些搞起來就沒完沒了。還須要花大把銀子。思來想去，想來思去，最後決定仍是不要女友了。就搞個靜態博客了，末尾我留下個人微信就行了。看上個人妹子能夠加我（偷笑.jpg）。html

2.安裝vuepress

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

yarn是什麼？這個1年前我就知道了，不過如今仍是第一次用。你能夠把yarn當成npm。它只是比npm優秀一丟丟。使用的命令又不太同樣而已。做用都是同樣的，也都是從npm庫裏下載模塊。vue

安裝步驟：node

  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,避免由於升級而致使項目不可用。全局安裝只是爲了命令行使用命令，實際用到的代碼仍是本地的代碼。git

從第1步到第4步，執行完後，文件夾的目錄結果以下：github

blog文件下有package.json和docs兩個文件(夾)，其實blog文件夾下還有node_modules文件夾，我這裏忽略了，你知道有就行，我就不在命令行打印出來了。web

.
|-blog
  |-docs
    |-README.md
  |-package.json
複製代碼

執行vuepress dev .結果以下：shell

命令行：數據庫

命令行效果

瀏覽器：

瀏覽器效果

瀏覽器顯示的格式不太對，應該顯示成標題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，歡迎下載使用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程