vuepress和pages搭建專業(yè)的博客

vuePress是什么？

VuePress 俺簡(jiǎn)單介紹下，是國(guó)內(nèi)有名大神的尤雨溪發(fā)布的全新基于 vue 靜態(tài)網(wǎng)站的生成器，內(nèi)置的有 webpack組件，可以拿來(lái)寫文檔，主要是md格式。做出的感覺就是簡(jiǎn)約，性能也比較好，你也可以自定義很多的插件。響應(yīng)式布局，PC端、手機(jī)端都能顯示，覺得還不錯(cuò)就選它。

類似的建站工具其實(shí)有很多，你也許了解一點(diǎn)，譬如 Wordpress，Jekyll, Hexo等，WordPress 這需要買臺(tái)云服務(wù)器才行，太貴哈哈 懂的都懂；Jekyll 是 Github-Page 默認(rèn)支持的，聽說操作起來(lái)比較復(fù)雜，沒有用過不做評(píng)價(jià)了；Hexo 之前一直在用，但覺得花里胡哨的，風(fēng)格上簡(jiǎn)潔優(yōu)雅，組件太多不夠輕量。自從遇見 VuePress，嗯，就是它了~

一 本地搭建

快速開始同 VuePress 官網(wǎng):

1 創(chuàng)建并進(jìn)入一個(gè)新目錄

//創(chuàng)建項(xiàng)目文件夾 mkdir ByteGuide && cd ByteGuide

2 進(jìn)入 ByteGuide 文件夾，使用你喜歡的包管理器進(jìn)行初始化

//yarn管理器 //npm包管理器 yarn init # npm init(默認(rèn)yes)

3 把 VuePress 安裝為本地依賴

yarn add -D vuepress # npm install -D vuepress

4 初始化項(xiàng)目使用 npm init 或 npm init -y（默認(rèn)yes）

npm init -y

5 創(chuàng)建屬于你的第一篇文檔，VuePress 會(huì)把 docs 作為文檔根目錄(/)，那這個(gè) README.md 這個(gè)相當(dāng)于你的主頁(yè)：

mkdir docs && echo '#Hello VuePress' > docs/README.md

在 Myblog 項(xiàng)目文件夾中創(chuàng)建 docs 文件夾，在 docs 中創(chuàng)建 .vuepress 文件夾，在.vuepress中創(chuàng)建 public 文件夾和 config.js 文件，基礎(chǔ)項(xiàng)目結(jié)構(gòu)如下所示：

Myblog ├─── docs │ ├── README.md │ └── .vuepress │ ├── public │ └── config.js | |—— notes //放.md格式的文件 └── package.json

二 基礎(chǔ)配置

1 在 config.js 文件中配置網(wǎng)站標(biāo)題、描述、主題等信息

module.exports = { title: 'blog', description: '個(gè)人網(wǎng)站', base: '/', markdown: { lineNumbers: false // 代碼塊顯示行號(hào) }, themeConfig: { nav:[ { text: '首頁(yè)', link:'/' }, { text:'阿龍的 'JavaScript 博客', items: [ {text: 'Java基礎(chǔ)', link: '/accumulate/' }, {text: '圖解算法', link: '/algorithm/'}, {text: '手摸手造一個(gè)RPC', link: 'http://dubbo.io/'} ] } ] } }

2 在 package.json 文件里加兩個(gè)啟動(dòng)命令

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

3 一切就緒 本地啟動(dòng)服務(wù)器 跑起來(lái)看看吧

//兩種方式啟動(dòng) yarn docs:dev # npm run docs:dev

它會(huì)在 http://localhost:8080(opens new window) 啟動(dòng)個(gè)熱加載的開發(fā)服務(wù)器。

此時(shí)界面類似于：

4 添加導(dǎo)航欄

在頁(yè)首的右上角添加導(dǎo)航欄 items，修改 config.js:

module.exports = { title: '...', description: '...', themeConfig: { nav: [ { text: '首頁(yè)', link: '/' }, { text: '龍歌的 JavaScript 博客', items: [ { text: 'CSDN', link: 'https://blog.csdn.net/weixin_45817252?type=blog' }, { text: '掘金', link: 'https://juejin.cn/user/1935575059273485' } ] } ] } }

效果如下：

更多的配置參考 VuePress 導(dǎo)航欄。

三 進(jìn)階配置

在 .md 文件中書寫代碼時(shí)，可在 ``` 后增加 js、html、json等格式類型，代碼塊即可按照指定類型高亮，這個(gè)很簡(jiǎn)單。

代碼所示：

::: tip 提示 this is a tip ::: ::: warning 注意 this is a tip ::: ::: danger 警告 this is a tip :::

效果：

現(xiàn)在我們添加一些 md 文檔，目前文檔的目錄如下：

. ├─ docs │ ├─ README.md │ └─ .vuepress │ └─ config.js | └─ notes | └─ 圖解路由協(xié)議.md | └─ redis對(duì)象系統(tǒng).md └─ package.json

我們?cè)?config.js 配置如下：

module.exports = { themeConfig: { nav: [...], sidebar: [ { title: '以前的文章', path: '/', collapsable: false, // 不折疊 children: [ { title: "學(xué)前必讀", path: "/" } ] }, { title: "學(xué)起來(lái)", path: '/notes/圖解路由協(xié)議', collapsable: false, // 不折疊 children: [ { title: "圖解路由協(xié)議", path: "/notes/圖解路由協(xié)議" }, { title: "redis對(duì)象系統(tǒng)", path: "/notes/redis對(duì)象系統(tǒng)" } ], } ] } }

對(duì)應(yīng)的效果如下：

代碼所示：

:tada: :100: :bamboo: :gift_heart: :fire:

效果：

這里有一份 Emoji 大全 https://www.webfx.com/tools/emoji-cheat-sheet/ 給你參考下用

現(xiàn)在基本的目錄和導(dǎo)航功能已經(jīng)實(shí)現(xiàn)，但如果我還想要加載 loading、切換動(dòng)畫、模式切換（暗黑模式）、返回頂部、評(píng)論等功能呢，為了簡(jiǎn)化開發(fā)成本，我們先可以直接使用主題插件，這里使用的主題是 vuepress-theme-rec 這個(gè)

現(xiàn)在我們安裝它

npm install vuepress-theme-reco --save-dev # or yarn add vuepress-theme-reco

同樣的道理，然后在 config.js 里引用該主題：

module.exports = { // ... theme: 'reco' // ... }

刷新一下頁(yè)面，我們會(huì)發(fā)現(xiàn)一些細(xì)節(jié)的改變，比如加載時(shí)的 loading 動(dòng)畫、以及支持切換暗黑模式：

在原本的主題里，我們發(fā)現(xiàn)每篇文章的目錄結(jié)構(gòu)出現(xiàn)在左側(cè)：而 vuepress-theme-reco 將原有的側(cè)邊欄的中的多級(jí)標(biāo)題移出，生成子側(cè)邊欄，放在了頁(yè)面的右側(cè)，如果你要全局開啟，可在頁(yè)面 config.js 里設(shè)置開啟：

module.exports = { //... themeConfig: { subSidebar: 'auto' } //... }

此時(shí)效果如下：

VuePress 基于 Vue，所以主題色用的是 Vue 的綠色，那我想換 VuePress 的主題色呢？

你可以創(chuàng)建一個(gè) .vuepress/styles/palette.styl 文件，文件代碼如下：

$accentColor = #3178c6

此時(shí)可以發(fā)現(xiàn)主題顏色變了：

更多的顏色修改參考 VuePress 的 palette.styl。

8 自定義修改樣式

如果你想自定義修改一些 DOM 元素的樣式呢？就比如在暗黑模式，我們發(fā)現(xiàn)用作強(qiáng)調(diào)的文字顏色比較暗淡，在暗黑模式下看不清楚，我想改下這個(gè)文字的顏色和背景色呢？

而 VuePress 提供了一種添加額外樣式的簡(jiǎn)便方法。你可以創(chuàng)建一個(gè) .vuepress/styles/index.styl 文件。這是一個(gè) Stylus 文件，但你也可以使用正常的 CSS 語(yǔ)法。

我們?cè)?.vupress 文件夾下創(chuàng)建這個(gè)目錄，然后創(chuàng)建 index.styl 文件，代碼如下：

// 通過檢查，查看元素樣式聲明 .dark .content__default code { background-color: rgba(58,58,92,0.7); color: #fff; }

此時(shí)文字就清晰了很多：

.page .page-title { display: none; }

最后的效果如下：

四 部署

我們的博客就算是正式的做好了，接下來(lái)我們部署到免費(fèi)的 Github Pages 上。我們?cè)?Github 上新建一個(gè)倉(cāng)庫(kù)，這里我取得倉(cāng)庫(kù)名為：blog。

對(duì)應(yīng)，我們需要在 config.js 添加一個(gè) base 路徑配置：

module.exports = { // 路徑名為 "//" base: '/blog/', //... }

最終的 config.js 文件內(nèi)容為：

module.exports = { title: 'blog', description: '個(gè)人網(wǎng)站', base: '/blog/', theme: 'reco', locales: { '/': { lang: 'zh-CN' } }, themeConfig: { // lastUpdated: '上次更新', nav:[ { text: '首頁(yè)', link:'/' }, { text: '阿龍的 JavaScript 博客', items: [ {text: '博客搭建', link: '/notes/'}, {text: '圖解高頻算法', link: '/algorithm/'}, {text: '手摸手造一個(gè)RPC', link: 'http://dubbo.io/'} ], } ], subSidebar: 'auto', sidebar: [ { title: '歡迎學(xué)習(xí)', path: '/', collapsable: false, children: [ { title: "學(xué)前必讀", path: "/" } ] }, { title: "文章", path: '/notes/redis對(duì)象系統(tǒng)', collapsable: false, children: [ {title: "redis對(duì)象系統(tǒng)", path: "./notes/redis對(duì)象系統(tǒng)"}, {title: "圖解路由協(xié)議", path: "./notes/圖解路由協(xié)議"} ], } ] } }

然后我們?cè)陧?xiàng)目 ByteGuide 目錄下建立一個(gè)腳本文件：deploy.sh，注意修改一下對(duì)應(yīng)的用戶名和倉(cāng)庫(kù)名：

#!/usr/bin/env sh # 確保腳本拋出遇到的錯(cuò)誤 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/ git push -f master:gh-pages cd -

然后命令行切換到 ByteGuide 目錄下，執(zhí)行 sh deploy.sh，就會(huì)開始構(gòu)建，然后提交到遠(yuǎn)程倉(cāng)庫(kù)，注意這里提交到了 gh-pages 分支，我們查看下對(duì)應(yīng)倉(cāng)庫(kù)分支的代碼：

我們可以在倉(cāng)庫(kù)的 Settings -> Pages 中看到最后的地址：

像我最后生成的地址就是 https://mqyqingfeng.github.io/blog/

至此，我們完成了 VuePress 和 Github Pages 的部署。

我們成功的用 VuePress 搭建了博客并部署到 Github Pages，但由于 Github 的訪問問題，我們可以選擇把倉(cāng)庫(kù)部署到 Gitee 一份，利用 Gitee 的 Pages 服務(wù)再生成一份靜態(tài)網(wǎng)站用于備用。

Gitee 導(dǎo)入倉(cāng)庫(kù)

上篇我們已經(jīng)在 Github 創(chuàng)建了博客倉(cāng)庫(kù)，現(xiàn)在我們?cè)?Gitee 綁定 Github 賬號(hào)后，選擇倉(cāng)庫(kù)導(dǎo)入：

倉(cāng)庫(kù)建立后，問題也來(lái)了，即我們一份本地倉(cāng)庫(kù)，如何保證 Github 和 Gitee 倉(cāng)庫(kù)代碼的同步呢？

在 Gitee 的項(xiàng)目主頁(yè)，提供了同步的按鈕，你只用點(diǎn)一下，即可與 Github 同步更新，但是注意這里的同步功能默認(rèn)是強(qiáng)制同步。

有點(diǎn)麻煩的是，我們需要在推送到 Github 后，再到 Gitee 項(xiàng)目主頁(yè)手動(dòng)點(diǎn)擊一下。

除此之外，我們也可以在 sh 腳本文件里，直接推送到兩個(gè)倉(cāng)庫(kù)地址上，我們修改一下上篇的腳本：

#!/usr/bin/env sh # 確保腳本拋出遇到的錯(cuò)誤 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/ git push -f git@github.com:Datalong/ByteGuide.git master:gh-pages git push -f git@gitee.com:Datalong/ByteGuide.git master:gh-pages cd -

當(dāng)我們執(zhí)行 sh deploy.sh 的時(shí)候，就會(huì)自動(dòng)往兩個(gè)倉(cāng)庫(kù)里推送。

至此，我們實(shí)現(xiàn)了 Github 與 Gitee 代碼倉(cāng)庫(kù)的同步。

唯一不足的地方是每次需要更新博客倉(cāng)庫(kù)你都需要手動(dòng)點(diǎn)擊同步，是有點(diǎn)麻煩，下篇著重描述下這里，再見。

系列文章目錄地址：https://github.com/Datalong/blog

GitHub JavaScript Vue 云存儲(chǔ)網(wǎng)關(guān) CSG 云解析服務(wù) DNS

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。