【工具】使用 VuePress 快速搭建好看的個人博客

為什么選擇vuepress

博客地址?程序員成長指北(http://www.inode.club/)??可以先體驗下。

之前使用docsify部署過個人博客, 在此之前也使用過gitbook, 這次使用vuepress來改版, 根據(jù)自己的體驗, 將這三者做一個對比

• 從閱讀體驗來說(個人感覺): gitbook > docsify =vuepress

• 從配置上來說, docsify相比于vuepress和gitbook都要簡單一些.

• 從性能上來說: vuepress > docsify

  雖然docsify也是基于vue的, docsify是運(yùn)行時解析, vuepress是預(yù)先渲染HTML

• 靈活性上, vuepress也是相當(dāng)占優(yōu)勢的, 對vue熟悉的朋友可以編寫vue組件實現(xiàn)你想要的功能樣式

vuepress特性

• 為技術(shù)文檔而優(yōu)化的內(nèi)置Markdown拓展
• 在Markdown文件中使用Vue組件的能力
• Vue驅(qū)動的自定義主題系統(tǒng)
• 自動生成Service Worker(支持PWA)
• Google Analytics集成
• 基于Git的"最后更新時間
• 多語言支持
• 響應(yīng)式布局
• 支持PWA模式

總的來說, 使用vuepress優(yōu)勢有挺多的, 特別是我之前使用docsify搭建的網(wǎng)站, 是一點(diǎn)也沒有被瀏覽器收錄啊, 怎么都搜不到,受到一萬點(diǎn)打擊,所以決心改一改

其實vuepress的官網(wǎng)已經(jīng)寫的挺好的了, 但是我這篇文章也有優(yōu)勢啊,是一步步的教你搭建, 這樣就不用來回在文檔中去找什么配置.(當(dāng)然如果你想直接通過官網(wǎng)來學(xué)習(xí), 可以直接看官網(wǎng),點(diǎn)擊鏈接就可以喔)

項目搭建

安裝vuepress

第一步就是進(jìn)行vuepress進(jìn)行安裝: 如果使用npm來安裝, Node.js版本需要 >=8 才可以

yarn global add vuepress # 或者：npm install -g vuepress

注意

如果你的現(xiàn)有項目依賴了 webpack 3.x，推薦使用 Yarn而不是 npm 來安裝 VuePress。因為在這種情形下，npm 會生成錯誤的依賴樹。

初始化項目

創(chuàng)建項目目錄blog

mkdir blog
cd blog

初始化

yarn init -y # 或者 npm init -y

初始化完成后, 會創(chuàng)建一個package.json

{
??"name":"blog",??
??"version":?"1.0.0",
??"main":?"index.js",
??"license":?"MIT"
??"scripts":?{
?????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1"
??}
}

在package.json中, 配置啟動命令

"scripts":?{
????"docs:dev":?"vuepress?dev?docs",
????"docs:build":?"vuepress?build?docs"
??}

啟動項目: npm run docs:dev這條命令就等于vuepress dev docs

打包項目: npm run build 這條命令就等于 vuepress build docs

創(chuàng)建docs目錄, 主要用于放置我們寫的.md類型的文章以及.vuepress相關(guān)的配置

mkdir docs

接著在docs文件夾中創(chuàng)建.vuepress文件夾

cd?docs
mkdir?.vuepress

這個文件主要就是放vuepress相關(guān)的配置

到這一步, 我們的項目大體架子已經(jīng)搭建出來了,接下來進(jìn)行配置.

頁面具體內(nèi)容配置

基本配置

接下來要讓頁面顯示內(nèi)容, 就需要進(jìn)行配置, 新建一個總的配置文件config.js, 這個文件的名字是固定的.

cd?.vuepress
touch?config.js

config.js最基礎(chǔ)的配置文件內(nèi)容如下:

module.exports?=?{
????title:?'koala的博客',
????description:?'專注?Node.js?技術(shù)棧分享，從前端到Node.js再到數(shù)據(jù)庫',
}

如果這時運(yùn)行npm run docs:dev或者yarn docs:dev, 會出現(xiàn)頁面404頁面,vuepress默認(rèn)打開的是docs下的readme.md文件, 由于你沒有創(chuàng)建,所以找到的是vuepress默認(rèn)提供的404頁面, 關(guān)于這有點(diǎn),我們借助vue-devtools工具來查看一下vue的結(jié)構(gòu)

在docs目錄下創(chuàng)建README.md文件, 再運(yùn)行,就可以看到運(yùn)行起來的效果, 如下圖所示:

• blog001.jpg

設(shè)置封面頁

此時README文件中沒有內(nèi)容,封面頁是空的, 我們可以通過在這個markdown文件中寫一些內(nèi)容, 同時官方也給我們提供了封面頁的模板(個人覺得還是比較實用的):

---
home:?true
heroImage:?/home.png
actionText:?Get?Started?→
actionLink:?/node/
features:
-?title:?day?day?up
??details:?記錄每一天的進(jìn)步,?一分耕耘，一分收獲.
-?title:?程序員成長指北
??details:?專注?Node.js?技術(shù)棧分享，從?前端?到?Node.js?再到?后端數(shù)據(jù)庫，祝您成為優(yōu)秀的高級?Node.js?全棧工程師
-?title:?koala
? details:?一個有趣的且樂于分享的人。座右銘：今天未完成的，明天更不會完成。
footer:?MIT?Licensed?|?Copyright???2018-present?Evan?You

---

效果圖如下:

配置導(dǎo)航欄nav

在config.js中添加:

themeConfig:{
??nav:?[{text:?"主頁",?link:?"/"??????},
??????{?text:?"node",?link:?"/node/"?},
??????{?text:?"前端",?link:?"/webframe/"},
??????{?text:?"數(shù)據(jù)庫",?link:?"/database/"???},
??????{?text:?"android",?link:?"/android/"???},
??????{?text:?"面試問題",?link:?"/interview/"?}
????],
}

效果如下圖:

如果想要展示二級導(dǎo)航, 可以這樣配置:

themeConfig:{
??nav:?[{text:?"主頁",?link:?"/"??????},
??????{?text:?"node",?link:?"/node/"?},
??????{?text:?"前端",?
????????items:?[?
??????????{?text:?"html",?link:"/web/html/"},
??????????{?text:?"css",?link:"/web/css/"},
??????????]
??????},
??????{?text:?"數(shù)據(jù)庫",?link:?"/database/"???},
??????{?text:?"android",?link:?"/android/"???},
??????{?text:?"面試問題",?link:?"/interview/"?}
????],
}

效果如圖所示:

當(dāng)你使用上面的方式配置nav時, 目錄結(jié)構(gòu)最好和我創(chuàng)建的一樣 項目目錄結(jié)構(gòu)如下:

導(dǎo)航欄創(chuàng)建好了, 接下來就是配置頁面內(nèi)容中的側(cè)邊欄slider

配置側(cè)邊欄slider

1.自動獲取側(cè)邊欄內(nèi)容

如果你希望自動生成當(dāng)前頁面標(biāo)題的側(cè)邊欄, 可以在config.js中配置來啟用

//?.vuepress/config.js
module.exports?=?{
??themeConfig:{
????sidebar:?'auto',
????//?sidebarDepth:?1?
??}
}

2.展示每個頁面的側(cè)邊欄

如果你希望為不同的頁面組顯示不同的側(cè)邊欄, 就和官網(wǎng)一樣, 點(diǎn)擊指南顯示的是對應(yīng)的側(cè)邊欄,目前目錄有node \ database \ web等, 這些目錄下都存放著多個md文件:

module.exports?=?{
??themeConfig:{
????sidebar:{
??????"/node/":[
????????["",?"node目錄"],
????????["path",?"作為前端也需要知道的路徑知識"],
????????["stream",?"node核心模塊-stream"]
??????],
??????"/web/":[
????????["",?"前端"],
????????{
??????????title:?"css",
??????????name:?"css",
??????????collabsable:?false,
??????????children:?[
????????????["css/",?"目錄"],
????????????['css/1',?"css?？济嬖囶}"]
??????????]
????????}
??????]
????}
??}
}

設(shè)置的效果圖如下: 在node導(dǎo)航下:

在前端導(dǎo)航下的效果:

上面采用了兩個方式配置側(cè)邊欄, 一個側(cè)邊欄是node目錄下直接是寫的markdown文章, 而在web下又有多個分類, 所有有進(jìn)行了分欄配置, 其實這兩種方式在我們博客中都是比較常見的

自定義布局內(nèi)容

網(wǎng)站的導(dǎo)航和側(cè)邊欄都已經(jīng)配置好之后, 如果你覺得頁面不是很符合你的預(yù)期, 你也可以自定修改成你想要的效果。比如就像我的博客中左側(cè)固定的內(nèi)容, 就是自定義的全局組件. 這里使用vuepress提供的插件機(jī)制來實現(xiàn)

在.vuepress文件夾下創(chuàng)建components文件夾, 在components下再創(chuàng)建fixed.vue文件

<template>
??<div?class="fixed_container">
????<div?class="tencent_code">
??????<h4>關(guān)注作者公眾h4>
??????<p>和萬千小伙伴一起學(xué)習(xí)p>
??????<img?src="/ggh.jpg"?alt="">
????div>
????<div?class="group_code">
??????<h4>加入技術(shù)交流群h4>
??????<p>掃描二維碼?備注
????????<span>?加群span>
??????p>
??????<img?src="/wechat.jpg"?alt="">
????div>
??div>
template>
<script>
export?default?{
??name:?'fixed'
}
script>
?....
?//?這里省略了部分樣式代碼,?想看全部的小伙伴點(diǎn)開github地址就可以了
?

然后在配置文件中以插件的形式配置即可:

??//?插件
??plugins:[
????{
??????name:"page-plugin",
??????globalUIComponents:["fixed"],?
????}
??]

globalUIComponents是用于注入全局的UI, 它以數(shù)組的形式接收參數(shù)名字, 這里的名字必須與components文件夾下的.vue文件同名, 全局UI就是一個Vue組件; 其實vuepress也提供了一些內(nèi)置的全局UI組件, 例如:back-to-top, popup, nprogress等.

配置插件

UI插件

配置內(nèi)置的全局UI,首先需要插件:

yarn?add?-D?@vuepress/plugin-back-to-top?@vuepress/plugin-nprogress
#?OR?npm?install?-D?@vuepress/plugin-back-to-top??@vuepress/plugin-nprogress

在config.js中配置:

??plugins:[
???["@vuepress/back-to-top"],?//?返回頂部
???["@vuepress/nprogress"],???//?加載進(jìn)度條
??]

這里需要注意一點(diǎn)就是看你項目中是否安裝了vuepress, 由于我之前是全局安裝的, 在項目下還沒有安裝, 插件是依賴于vuepress的, 所有沒有安裝的需要安裝上, 插件才有效.

支持PWA

vuepress還有一個我比較看重的優(yōu)勢, 就是支持PWA, 當(dāng)用戶沒有網(wǎng)的情況下,一樣能繼續(xù)的訪問我們的網(wǎng)站

在0.x 版本中我們只要配置serviceWorker: true 即可, 但是我們現(xiàn)在使用的是1.2.0版本, 這個版本中已經(jīng)將這個功能抽離出來作為插件的方式使用, 下面就看一下具體如何使用的:

首先需要安裝插件:

yarn?add?-D?@vuepress/plugin-pwa
#?或者?npm?install?-D?@vuepress/plugin-pwa

在config.js中配置:

module.exports?=?{
??plugins:?['@vuepress/pwa',?{
????serviceWorker:?true,
????updatePopup:?true
??}]
}

注意點(diǎn):

為了讓你的網(wǎng)站完全地兼容 PWA，你需要:

• 在 .vuepress/public 提供 Manifest 和 icons
• 在 .vuepress/config.js 添加正確的 head links

//?配置
module.exports?=?{
??head:?[
????['link',?{?rel:?'icon',?href:?`/favicon.ico`?}],
????//增加manifest.json
????['link',?{?rel:?'manifest',?href:?'/manifest.json'?}],
??],
}

manifest.json 文件

{
??"name":?"koala_blog",
??"short_name":?"blog",
??"version":?"1.0.0",
??"description":?"程序員成長指北博主,?koala的博客",
??"manifest_version":?2
}

配置評論

由于之前有小伙伴說過,『程序員成長指北』公眾號上不能評論，所有這次我在博客中增加了評論功能，剛開始本來打算使用gitTalk, 但是我的博客采用的是部署到自己的服務(wù)器, 并沒有部署成 GitHub Pages, 所有我使用的是valine, 它除了評論功能還可以統(tǒng)計閱讀量, 請大家看:

但是我后面也會將gitTalk配置方式寫出來, 方便使用gitTalk的小伙伴

valine 使用

點(diǎn)擊進(jìn)入 Valine官網(wǎng) ，需要先注冊才能使用.

然后創(chuàng)建應(yīng)用, 獲取APP ID 和APP KEY

應(yīng)用創(chuàng)建好以后，進(jìn)入剛剛創(chuàng)建的應(yīng)用，選擇左下角的設(shè)置 > 應(yīng)用Key，然后就能看到你的APP ID 和APP Key了

• 安裝:

yarn add vuepress-plugin-comment -D

• 快速使用

在.vuepress下的config.js插件配置中:

module.exports?=?{
??plugins:?[
????[
??????'vuepress-plugin-comment',
??????{
????????choosen:?'valine',?
????????//?options選項中的所有參數(shù)，會傳給Valine的配置
????????options:?{
??????????el:?'#valine-vuepress-comment',
??????????appId:?'Your?own?appId',
??????????appKey:?'Your?own?appKey'
????????}
??????}
????]
??]
}

appid和appkey為你創(chuàng)建的應(yīng)用的APP ID 和APP Key

gitTalk 使用

主題樣式修改

vuepress默認(rèn)是主題顏色是綠色, 如果你不喜歡可以對其進(jìn)行更改. 如果要對默認(rèn)設(shè)置的樣式進(jìn)行簡單顏色替換, 或者自定義一些顏色變量供以后使用, 可以在.vuepress/styles下創(chuàng)建palette.styl文件.

你可以調(diào)整的顏色變量:

// 顏色
$textColor ?= #2c3e50
$accentColor ?= #1e90ff
$grayTextColor ?= #666
$lightTextColor ?= #999
$borderColor ?= #eaecef
$codeBgColor ?= #282c34
$arrowBgColor ?= #ccc
$navbarColor ?= #fff
$headerColor ?= #fff
$headerTitleColor ?= #fff
$nprogressColor ?= $accentColor

// 布局
$navbarHeight ?= 3.6rem
$bannerHeight ?= 12rem

// 響應(yīng)式 breakpoints
$MQWide ?= 1440px
$MQNarrow ?= 1024px
$MQMobile ?= 768px
$MQMobileNarrow ?= 480px

注意點(diǎn):

你應(yīng)該只在這個文件中寫入顏色變量。因為 palette.styl 將在根的 stylus 配置文件的末尾引入，作為配置，它將被多個文件使用，所以一旦你在這里寫了樣式，你的樣式就會被多次復(fù)制

如果要添加額外的樣式, vuepress也是提供了簡便方法的, 只要在.vuepress/styles文件下創(chuàng)建一個 index.styl, 在里面寫css樣式即可, 注意文件命名是固定的.

部署

nginx部署

我的博客采用的是靜態(tài)文件部署, 感覺方便又便捷, 之前部署在Github Pages上, 訪問速度不是很理想.

第一步: 確保你滿足下面幾個條件

• 你有一臺服務(wù)器
• 已經(jīng)安裝好nginx, 如果不會的小伙伴請看如何安裝nginx
• 解析了一個可用的域名

第二步: 打包你的項目

運(yùn)行npm run docs:build將項目打包, 默認(rèn)打包文件在docs/.vuepress/dist目錄下

第三步: 配置nginx

進(jìn)入到nginx 配置目錄, 找到conf.d文件, 添加下面的配置:

server?{
????listen???????80;
????server_name??www.inode.club;

????root?????/usr/web/inode/dist;

????error_log???/var/log/nginx/inode-error.log;
????access_log??/var/log/nginx/inode-access.log;

????#????????deny?all;
????index??index.php?index.html?index.htm;
}

• server_name 是你解析的域名地址
• root 配置文件將訪問的靜態(tài)資源文件的路徑

**第四步: 上傳靜態(tài)資源文件 **

將靜態(tài)資源文件放置到服務(wù)器上, 路徑為配置的/usr/web/inode/dist, 可以借助xftp工具上傳也可以通過git克隆, 選擇適合自己的方式就可以

**第五步: 重啟nginx **

# 重啟之前務(wù)必檢查配置是否正確
sudo nginx -t  // 檢查配置
sudo nginx -s reload  // 重啟

然后你就可以通過域名來訪問你的網(wǎng)站啦!

github部署

將代碼部署到 Github Pages, 你可以看vuepress文檔: vuepress部署, 也參照我這里寫的的步驟來部署

第一步: 首先確保你的項目滿足以下幾個條件:

• 文檔放置在docs目錄中
• 使用的是默認(rèn)的構(gòu)建輸出位置
• vuepress以本地依賴的形式被安裝到你的項目中, 在根目錄package.json文件中包含如下代碼:

//?配置npm?scripts
"scripts":?{
????"docs:dev":?"vuepress?dev?docs",
????"docs:build":?"vuepress?build?docs"
?}

//?VuePress?以本地依賴的形式被安裝
"devDependencies":?{
??"vuepress":?"^1.2.0"
}

第二步: 創(chuàng)建github倉庫

在github上創(chuàng)建一個名為blog的倉庫, 并將代碼提交到github上

第三步: 配置倉庫名稱

配置docs/.vuepress/config.js文件中的base, 如果打算發(fā)布到https://.github.io//(也就是說你的倉庫在: ?https://github.com// ), 此處我的倉庫為: blog, 則將base按照如下配置即可:

module.exports?=?{
??base:?"/blog/"
}

第四步: 在項目根目錄中,創(chuàng)建一個如下的腳本文件deploy.sh

#!/usr/bin/env?sh

#?確保腳本拋出遇到的錯誤
set?-e

#?生成靜態(tài)文件
npm?run?docs:build

#?進(jìn)入生成的文件夾
cd?docs/.vuepress/dist

git?init
git?add?-A
git?commit?-m?'deploy'

#?如果發(fā)布到?https://.github.io/
[email protected]:/.git?master:gh-pages
#?例如[email protected]:koala-coding/blog.git?master:gh-pages?
cd?-

第五步: 雙擊 deploy.sh 運(yùn)行腳本

會自動在我們的 GitHub 倉庫中，創(chuàng)建一個名為 gh-pages 的分支，而我們要部署到 GitHub Pages 的正是這個分支

第六步: setting Github Pages這是最后一步了，在 GitHub 項目點(diǎn)擊 Setting 按鈕，找到 GitHub Pages - Source，選擇 gh-pages 分支，點(diǎn)擊 Save 按鈕后，靜靜地等待它部署完成即可。

項目地址

我的網(wǎng)站 程序員成長指北(http://www.inode.club/)?就是這樣搭建出來的!

參考文章 https://juejin.im/post/5c94ddf35188252d65344cfe