Hexo已經看膩了，來試試VuePress搭建個人部落格

BrownHu發表於2018-04-23
HexoVue

Hexo已經看膩了，來試試VuePress搭建個人部落格

VuePress

先簡單介紹一下VuePress，這是尤大在2018年4月份釋出的一個新輪子。

Hexo已經看膩了，來試試VuePress搭建個人部落格

一個基於 Vue SSR 的靜態站生成器，本來的目的是爽爽的寫文件，但是我發現用來擼一個人部落格也非常不錯。

這是VuePress的官方文件 這是VuePress的中文文件

上手搭建

你可以跟著文件上的例子自己玩一玩，不過由於VuePress的文件也是用VuePress來實現的，所以我取巧直接拿VuePress倉庫中的docs目錄拿來玩耍。

  1. 首先安裝VuePress到全域性
npm install -g vuepress
複製程式碼
  1. 然後把VuePress倉庫克隆到你的電腦
git clone git@github.com:docschina/vuepress.git
複製程式碼
  1. 在docs檔案中執行（請確保你的 Node.js 版本 >= 8）
cd vuepress
cd docs
vuepress dev
複製程式碼

當你看到這一行就說明已經成功了：

 VuePress dev server listening at http://localhost:8080/
複製程式碼

下面我們開啟http://localhost:8080/ 發現真的開啟了vuepress文件：

Hexo已經看膩了，來試試VuePress搭建個人部落格

下面的工作就是資料的替換了，但我們應該先看一下docs的目錄結構：

├─.vuepress
│  ├─components
│  └─public
│      └─icons
│   └─config.js // 配置檔案
├─config // Vuepress文件的配置參考內容
├─default-theme-config // Vuepress文件的預設主題配置內容
├─guide // Vuepress文件的指南內容
└─zh // 中文文件目錄
    ├─config
    ├─default-theme-config
    └─guide
└─README.md // 首頁配置檔案
複製程式碼

文件分成了兩部分，中文文件在/zh/目錄下，英文文件在根目錄下。

其實目錄裡面的東西都挺好看懂的，首先guide 、default-theme-config、config 這三個目錄中的都是Vuepress文件的主要內容，從中文文件裡也可以看到只有這三個目錄被替換了。

首頁配置

預設主題提供了一個主頁佈局，要使用它，需要在你的根目錄 README.md 的 YAML front matter 中指定 home：true，並加上一些其他的後設資料。

我們先看看根目錄下的README,md：

home: true // 是否使用Vuepress預設主題
heroImage: /hero.png // 首頁的圖片
actionText: Get Started →  // 按鈕的文字
actionLink: /guide/ // 按鈕跳轉的目錄
features: // 首頁三個特性
- title: Simplicity First
  details: Minimal setup with markdown-centered project structure helps you focus on writing.
- title: Vue-Powered
  details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.
- title: Performant
  details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
footer: MIT Licensed | Copyright © 2018-present Evan You // 頁尾
複製程式碼

實在看不懂，官網有比我更詳細的配置說明。

導航配置

導航配置檔案在.vuepress/config.js中

在導航配置檔案中nav是控制導航欄連結的，你可以把它改成自己的部落格目錄。

nav: [
    {
        text: 'Guide',
        link: '/guide/',
    },
    {
        text: 'Config Reference',
        link: '/config/'
    },
    {
        text: 'Default Theme Config',
        link: '/default-theme-config/'
    }
]
複製程式碼

剩下的預設主題配置官方文件都有很詳細的文件說明這裡就不在囉嗦了。

更改預設主題色

你可以在.vuepress/目錄下建立一個override.styl檔案。 vuepress提供四個可更改的顏色：

$accentColor = #3eaf7c // 主題色
$textColor = #2c3e50 // 文字顏色
$borderColor = #eaecef // 邊框顏色
$codeBgColor = #282c34 // 程式碼背景顏色
複製程式碼

我把它改成了這樣：

Hexo已經看膩了，來試試VuePress搭建個人部落格

側邊欄的實現

由於評論區裡問的人較多，所以在這裡更新一下，其實我就算在這裡寫的再詳細也不如大家去看官方文件。 側邊欄的配置也在.vuepress/config.js中：

sidebar: [
  {
    title: 'JavaScript', // 側邊欄名稱
    collapsable: true, // 可摺疊
    children: [
      '/blog/JavaScript/學會了ES6，就不會寫出那樣的程式碼', // 你的md檔案地址
    ]
  },
  {
    title: 'CSS', 
    collapsable: true,
    children: [
      '/blog/CSS/搞懂Z-index的所有細節',
    ]
  },
  {
    title: 'HTTP',
    collapsable: true,
    children: [
      '/blog/HTTP/認識HTTP-Cookie和Session篇',
    ]
  },
]
複製程式碼

對應的文件結構：

├─blog // docs目錄下新建一個部落格目錄
│  ├─CSS
│  ├─HTTP
│  └─JavaScript
複製程式碼

我的部落格：brownhu

部署

在配置好你部落格之後，命令列執行：

Vuepress build
複製程式碼

當你看到這一行就說明成功了：

Success! Generated static files in vuepress.
複製程式碼

將打包好的vuepress目錄上傳到你的github倉庫，和github page配合，就可以配置好你的部落格網站了。

相關文章