為什么選擇vuepress

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

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

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

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

• 從性能上來說: vuepress > docsify

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

• 靈活性上, vuepress也是相當占優勢的, 對vue熟悉的朋友可以編寫vue組件實現你想要的功能樣式

vuepress特性

• 為技術文檔而優化的內置Markdown拓展

• 在Markdown文件中使用Vue組件的能力

• Vue驅動的自定義主題系統

• 自動生成Service Worker(支持PWA)

• Google Analytics集成

• 基于Git的"最后更新時間

• 多語言支持

• 響應式布局

• 支持PWA模式

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

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

項目搭建

安裝vuepress

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

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

注意

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

初始化項目

創建項目目錄blog

mkdir blog cd blog

初始化

yarn init -y # 或者 npm init -y

初始化完成后, 會創建一個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

創建docs目錄, 主要用于放置我們寫的.md類型的文章以及.vuepress相關的配置

mkdir docs

接著在docs文件夾中創建.vuepress文件夾

cd?docs mkdir?.vuepress

這個文件主要就是放vuepress相關的配置

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

頁面具體內容配置

基本配置

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

cd?.vuepress touch?config.js

config.js最基礎的配置文件內容如下:

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

如果這時運行npm run docs:dev或者yarn docs:dev, 會出現頁面404頁面,vuepress默認打開的是docs下的readme.md文件, 由于你沒有創建,所以找到的是vuepress默認提供的404頁面, 關于這有點,我們借助vue-devtools工具來查看一下vue的結構

在docs目錄下創建README.md文件, 再運行,就可以看到運行起來的效果, 如下圖所示:

• blog001.jpg

設置封面頁

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

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

效果圖如下:

配置導航欄nav

在config.js中添加:

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

效果如下圖:

如果想要展示二級導航, 可以這樣配置:

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

效果如圖所示:

當你使用上面的方式配置nav時, 目錄結構最好和我創建的一樣 項目目錄結構如下:

導航欄創建好了, 接下來就是配置頁面內容中的側邊欄slider

配置側邊欄slider

1.自動獲取側邊欄內容

如果你希望自動生成當前頁面標題的側邊欄, 可以在config.js中配置來啟用

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

2.展示每個頁面的側邊欄

如果你希望為不同的頁面組顯示不同的側邊欄, 就和官網一樣, 點擊指南顯示的是對應的側邊欄,目前目錄有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常考面試題"]]}]}} }

設置的效果圖如下: 在node導航下:

在前端導航下的效果:

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

自定義布局內容

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

在.vuepress文件夾下創建components文件夾, 在components下再創建fixed.vue文件

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

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

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

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

配置插件

UI插件

配置內置的全局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"],???//?加載進度條]

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

支持PWA

vuepress還有一個我比較看重的優勢, 就是支持PWA, 當用戶沒有網的情況下,一樣能繼續的訪問我們的網站

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

首先需要安裝插件:

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

在config.js中配置:

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

注意點:

為了讓你的網站完全地兼容 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, 但是我的博客采用的是部署到自己的服務器, 并沒有部署成 GitHub Pages, 所有我使用的是valine, 它除了評論功能還可以統計閱讀量, 請大家看:

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

valine 使用

點擊進入 Valine官網 ，需要先注冊才能使用.

然后創建應用, 獲取APP ID 和APP KEY

應用創建好以后，進入剛剛創建的應用，選擇左下角的設置 > 應用Key，然后就能看到你的APP ID 和APP Key了

• 安裝:

yarn add vuepress-plugin-comment -D

• 快速使用

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

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

appid和appkey為你創建的應用的APP ID 和APP Key

gitTalk 使用

主題樣式修改

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

你可以調整的顏色變量:

// 顏色 $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// 響應式 breakpoints $MQWide ?= 1440px $MQNarrow ?= 1024px $MQMobile ?= 768px $MQMobileNarrow ?= 480px

注意點:

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

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

部署

nginx部署

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

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

• 你有一臺服務器

• 已經安裝好nginx, 如果不會的小伙伴請看如何安裝nginx

• 解析了一個可用的域名

第二步: 打包你的項目

運行npm run docs:build將項目打包, 默認打包文件在docs/.vuepress/dist目錄下

第三步: 配置nginx

進入到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 配置文件將訪問的靜態資源文件的路徑

**第四步: 上傳靜態資源文件 **

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

**第五步: 重啟nginx **

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

然后你就可以通過域名來訪問你的網站啦!

github部署

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

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

• 文檔放置在docs目錄中

• 使用的是默認的構建輸出位置

• vuepress以本地依賴的形式被安裝到你的項目中, 在根目錄package.json文件中包含如下代碼:

//?配置npm?scripts "scripts":?{"docs:dev":?"vuepress?dev?docs","docs:build":?"vuepress?build?docs"}//?VuePress?以本地依賴的形式被安裝 "devDependencies":?{"vuepress":?"^1.2.0" }

第二步: 創建github倉庫

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

第三步: 配置倉庫名稱

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

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

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

#!/usr/bin/env?sh#?確保腳本拋出遇到的錯誤 set?-e#?生成靜態文件 npm?run?docs:build#?進入生成的文件夾 cd?docs/.vuepress/distgit?init git?add?-A git?commit?-m?'deploy'#?如果發布到?https://<USERNAME>.github.io/<REPO> git?push?-f?git@github.com:<USERNAME>/<REPO>.git?master:gh-pages #?例如?git?push?-f?git@github.com:koala-coding/blog.git?master:gh-pages? cd?-

第五步: 雙擊 deploy.sh 運行腳本

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

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

項目地址

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

本文章實現的內容都已經上傳到github, 如果不想一步步進行配置的, 可以直接下載下來使用,就不用重復造輪子啦!

需要博客源碼的小伙伴可以直接公眾后臺回復【博客】領取，或者直接聯系我。

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

??愛心三連擊1.看到這里了就點個在看支持下吧，你的「在看」是我創作的動力。 2.關注公眾號程序員成長指北，「帶你一起學Node」！ 3.特殊階段，帶好口罩，做好個人防護。 4.添加微信【ikoala520】，拉你進技術交流群一起學習。“在看轉發”是最大的支持

總結

以上是生活随笔為你收集整理的如何快速搭建好看的个人博客(完整配置与源码)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。