使用VuePress建置個人部落格步驟詳解（附程式碼）

這次帶給大家使用VuePress來建立個人部落格步驟詳解（附程式碼），使用VuePress搭建個人部落格的注意事項有哪些，以下就是實戰案例，一起來看一下。

VuePress

#vuepress是特別4月12日發布的一個全新的基於vue的靜態網站產生器，其實就是vue的spa應用，內建webpack，可以用來寫文件。

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

這是VuePress的官方文件

上手搭建

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

1.先安裝VuePress到全域

npm install -g vuepress

2.然後把VuePress倉庫複製到你的電腦

git clone git@github.com:docschina/vuepress.git

在docs檔案中執行（請確保你的Node.js 版本>= 8）

cd vuepress
cd docs
vuepress dev

當你看到這一行就表示已經成功了：

 VuePress dev server listening at http://localhost:8080/

下面我們打開http://localhost:8080/

發現真的打開了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 // 代码背景颜色

我把它改成了這樣：

側邊欄的實現

由於評論區裡問的人較多，所以在這裡更新一下，其實我就算在這裡寫的再詳細也不如大家去看官方文檔。

側邊欄的設定也在.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配合，就可以設定好你的部落格網站了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

vue實作行動微信公眾號步驟詳解

jQuery實作點選標題文字切換字型步驟詳解

以上是使用VuePress建置個人部落格步驟詳解（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！