個(gè)人博客與簡(jiǎn)書(shū)同步：zhuzhaohua.com

簡(jiǎn)介

很久之前就想自己做一個(gè)博客，把自己的工作、生活記錄下來(lái)，但做IT的，大家懂的，個(gè)人時(shí)間實(shí)在寶貴。開(kāi)始時(shí)的想法是做一個(gè)前后端分離，基于vue和springboot的javaEE項(xiàng)目，也著手實(shí)施了，但囿于業(yè)余時(shí)間有限，進(jìn)度比較緩慢（后續(xù)完工后可能會(huì)開(kāi)源出來(lái)，敬請(qǐng)期待），而另外一個(gè)阻礙，就是服務(wù)部署公網(wǎng)需要考慮服務(wù)器的成本，畢竟家里沒(méi)有礦。。。

本博客所采用的是一種既節(jié)省成本，又簡(jiǎn)單便捷的個(gè)人博客方式：

• GitHub Pages提供的靜態(tài)頁(yè)面托管服務(wù)（國(guó)內(nèi)也可以考慮碼云提供的Gitee Pages）
• VuePress靜態(tài)網(wǎng)站生成器

VuePress是Vue作者尤大的一個(gè)作品，其實(shí)是用來(lái)寫(xiě)文檔的，但有vue生態(tài)的加持，擴(kuò)展能力非常強(qiáng)，也很適合搭建博客。VuePress有很多優(yōu)秀的特性，其可以在md文件中引用vue組件的能力尤其讓我癡迷。vuepress其原理與現(xiàn)代前端項(xiàng)目是一致的，基于node平臺(tái)、webpack驅(qū)動(dòng)的開(kāi)發(fā)方式，打包后為靜態(tài)頁(yè)面，可以發(fā)布到任意靜態(tài)服務(wù)器上。以下是官方的描述：

事實(shí)上，一個(gè) VuePress 網(wǎng)站是一個(gè)由 Vue、Vue Router 和 webpack 驅(qū)動(dòng)的單頁(yè)應(yīng)用。如果你以前使用過(guò) Vue 的話(huà)，當(dāng)你在開(kāi)發(fā)一個(gè)自定義主題的時(shí)候，你會(huì)感受到非常熟悉的開(kāi)發(fā)體驗(yàn)，你甚至可以使用 Vue DevTools 去調(diào)試你的自定義主題。

在構(gòu)建時(shí)，我們會(huì)為應(yīng)用創(chuàng)建一個(gè)服務(wù)端渲染（SSR）的版本，然后通過(guò)虛擬訪(fǎng)問(wèn)每一條路徑來(lái)渲染對(duì)應(yīng)的HTML。這種做法的靈感來(lái)源于 Nuxt 的 nuxt generate 命令，以及其他的一些項(xiàng)目，比如 Gatsby。

GitHub Pages 就不贅述了，行業(yè)內(nèi)比較普及，網(wǎng)上資料也比較多。

下面開(kāi)始搭建我們的博客吧!

VuePress安裝

安裝工具，給大家推薦下tyarn，是國(guó)內(nèi)某寶的鏡像源，如果yarn或者npm網(wǎng)速捉急，建議使用tyarn，強(qiáng)烈建議不要使用cnpm，問(wèn)題太多。

VuePress官方文檔有很詳盡的安裝教程，這里就大概搬運(yùn)一下：

# node 要求 8以上 

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

# 創(chuàng)建vuepress的工程路徑
mkdir myblog
cd myblog

# 工程初始化
yarn init -y # 或者 npm init -y

# 文檔路徑
mkdir docs

# .vuepress目錄
cd docs
mkdir .vuepress

# config.js
cd .vuepress
touch config.js

# public目錄
mkdir public

# 設(shè)置package.json的腳本配置
  "scripts": {
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
  }

完成后的工作目錄如下：

myblog
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json

這是vuepress最基本目錄結(jié)構(gòu)，其中config.js是網(wǎng)站的基本配置信息，詳細(xì)配置內(nèi)容請(qǐng)見(jiàn)官方文檔:配置

當(dāng)然，我的博客已經(jīng)開(kāi)源myBlog，可以Fork或者克隆下來(lái)直接修改并使用。

默認(rèn)主題修改

環(huán)境搭建好以后，無(wú)需過(guò)多的配置，運(yùn)行npm run dev 就可以訪(fǎng)問(wèn)自己的博客了，做java后臺(tái)出身的我，深感“約定大于配置”的魅力，如果我們單單是記錄文檔，默認(rèn)的主題完全符合要求，簡(jiǎn)潔大方，但如果是做個(gè)人博客，一定是需要個(gè)性化的東西的，默認(rèn)的主題無(wú)法滿(mǎn)足我們個(gè)性化的需要。官方文檔中，提供了修改默認(rèn)主題的方式：

你可以使用 vuepress eject [targetDir] 這個(gè)命令來(lái)將默認(rèn)主題的源碼復(fù)制到 .vuepress/theme 文件夾下，從而可以對(duì)默認(rèn)主題進(jìn)行任意的修改。需要注意的是一旦 eject，即使升級(jí) VuePress 你也無(wú)法再獲得 VuePress 對(duì)默認(rèn)主題的更新。

下載下來(lái)的theme文件夾要放在.vuepress/路徑下,做過(guò)vue的人，或者有一些前端基礎(chǔ)的人，打開(kāi)這個(gè)文件夾，你就會(huì)看到vuepress的所有細(xì)節(jié)，你會(huì)看到Home、Layout、Navbar、Sidebar這樣如此熟悉的字眼，你可以對(duì)樣式做任意的修改。

我是做后臺(tái)的 :joy:，說(shuō)來(lái)慚愧，前端基本是自學(xué)了一年，技術(shù)薄弱，而且時(shí)間有限，所以沒(méi)有對(duì)自己的博客樣式做過(guò)多的改造。讀者在開(kāi)啟theme后，可以盡情發(fā)揮。

集成UI組件

vuepress支持?jǐn)U展，支持引入第三方組件，在.vuepress/下創(chuàng)建enhanceApp.js文件，這里展示的是引入vue生態(tài)圈比較知名的ui庫(kù)Element,來(lái)自于餓了么。

/**
 * 擴(kuò)展 VuePress 應(yīng)用
 */
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

export default ({
  Vue, 
}) => {
  // ...做一些其他的應(yīng)用級(jí)別的優(yōu)化
  Vue.use(Element)
}

當(dāng)然，在這之前，需要先安裝element。

yarn add element-ui

在擴(kuò)展之后，就可以在自定義的組件或者md文件中，使用element的組件了。

個(gè)性化組件開(kāi)發(fā)

前文提到，vuepress最吸引我的，就是在md中可以使用vue組件及語(yǔ)法，其實(shí)這背后的技術(shù)實(shí)現(xiàn)也不難理解。但仔細(xì)品味，為什么在看到它之前，我沒(méi)有想過(guò)這個(gè)問(wèn)題？為什么看似簡(jiǎn)單的東西，卻給我一種耳目一新的感覺(jué)，這不禁又讓我想起曾經(jīng)與一位智者的對(duì)話(huà)，大概意思就是：

改變這個(gè)世界的是技術(shù)，但改變技術(shù)的，是思考問(wèn)題的方式。

扯遠(yuǎn)了 :joy: 。如果我們需要開(kāi)發(fā)自己的組件，那么在.vuepress下新建components文件夾，可以在里面編寫(xiě).vue，與vue-cli開(kāi)發(fā)無(wú)異，而且，組件是全局注冊(cè)的，組件之間互相調(diào)用，不用手動(dòng)引入，在md文件中，在theme中都可以使用。

博客的自動(dòng)路由

官方給出的方案是一個(gè)文檔管理的方案，比如我們做一套api文檔，修改與添加文檔不是會(huì)很頻繁，所以，采用在config.js中配置路由的形式是很可取，很簡(jiǎn)單的。比如像這樣：

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: {
      '/foo/': [
        '',     /* /foo/ */
        'one',  /* /foo/one.html */
        'two'   /* /foo/two.html */
      ],

      '/bar/': [
        '',      /* /bar/ */
        'three', /* /bar/three.html */
        'four'   /* /bar/four.html */
      ],

      // fallback
      '/': [
        '',        /* / */
        'contact', /* /contact.html */
        'about'    /* /about.html */
      ]
    }
  }
}

但如果我們是用來(lái)寫(xiě)博客，一天寫(xiě)兩三篇，每一篇對(duì)應(yīng)一個(gè)md文件，都要在路由中添加一下，這實(shí)在會(huì)逼死強(qiáng)迫癥，這也是我在選擇vuepress時(shí)，遇到的最大的障礙。靜態(tài)網(wǎng)站，可能真的沒(méi)有更好的辦法，動(dòng)態(tài)路由這種事情，應(yīng)該是后臺(tái)實(shí)現(xiàn)的，然而我們是沒(méi)有服務(wù)端的。大腦好像短路了，就在我決定放棄，準(zhǔn)備老老實(shí)實(shí)手寫(xiě)路由的時(shí)候，突然想到，官方文檔中提到了VueRouter，對(duì)啊，這是一個(gè)單頁(yè)面應(yīng)用，所謂路由，是vuerouter模擬出來(lái)的假象，$router 是否可以使用，是否能成為切入點(diǎn)呢？于是我又翻了一遍官方文檔，找到了這個(gè)元數(shù)據(jù)：

如果用戶(hù)在 .vuepress/config.js 配置了 themeConfig，你將可以通過(guò) $site.themeConfig 訪(fǎng)問(wèn)到它。如此一來(lái)，你可以通過(guò)它來(lái)對(duì)用戶(hù)開(kāi)放一些自定義主題的配置 —— 比如指定目錄或者頁(yè)面的順序，你也可以結(jié)合 $site.pages 來(lái)動(dòng)態(tài)地構(gòu)建導(dǎo)航鏈接。最后，別忘了，作為 Vue Router API 的一部分，this.$route 和 this.$router 同樣可以使用。

沒(méi)錯(cuò),$pages就是我想要的東西,它記錄了所有md文件的元數(shù)據(jù)，我可以通過(guò)在元數(shù)據(jù)中添加分類(lèi)、標(biāo)簽，以及時(shí)間來(lái)實(shí)現(xiàn)路由。

每一次新寫(xiě)的文章，無(wú)需在config.js中設(shè)置路由，只需要在md中按照元數(shù)據(jù)的格式，設(shè)置好type(分類(lèi)),tags(標(biāo)簽)。編譯，push到github，就可以在相應(yīng)的菜單中看到它。

但這會(huì)產(chǎn)生一個(gè)難以忽視的問(wèn)題，需要大量的循環(huán)遍歷pages以實(shí)現(xiàn)分類(lèi)以及標(biāo)簽（可以參考我的組件：BlogList），甚至，我們需要對(duì)時(shí)間進(jìn)行升序、降序的排列，這些原本應(yīng)該是服務(wù)端在數(shù)據(jù)庫(kù)里完成的事情，現(xiàn)在都需要瀏覽器去完成，著實(shí)會(huì)讓人有一些擔(dān)憂(yōu)。我大概計(jì)算了一下，如果習(xí)慣非常好，時(shí)間充足，一天寫(xiě)一篇博客的話(huà)，一年360篇，30年是1萬(wàn)篇，當(dāng)然，這過(guò)于理想化了，但如果這個(gè)項(xiàng)目有性能測(cè)試的話(huà)，那么這個(gè)值可以作為測(cè)試的上限，以現(xiàn)代的網(wǎng)絡(luò)條件以及計(jì)算機(jī)能力來(lái)說(shuō)，應(yīng)該是可以應(yīng)對(duì)的。顯然，我是多慮了，但這里有明顯的的“壞味道”，作者本人暫時(shí)還沒(méi)有想到更好的解決辦法，大神們有什么想法，可以與我聯(lián)系。

md文件中的元數(shù)據(jù)可以參照以下，

---
title: 本博客搭建教程
date: '2019-06-01'
type: 技術(shù)
tags: js|vue
sidebarDepth: 3
sidebar: auto
note: 基于vuepress的個(gè)人博客，實(shí)現(xiàn)了博客自動(dòng)路由、默認(rèn)主題修改、elementUI庫(kù)集成、mp3背景播放、標(biāo)簽墻、評(píng)論功能
---

對(duì)于元數(shù)據(jù)的使用，參見(jiàn)組件BlogList

標(biāo)簽墻的實(shí)現(xiàn)

標(biāo)簽墻的實(shí)現(xiàn)在上文中已經(jīng)提到了，通過(guò)元數(shù)據(jù)的tags設(shè)置標(biāo)簽，在BlogList中，遍歷$pages，匹配其中的tag。
頁(yè)面可以參照組件Tags

評(píng)論功能集成

評(píng)論功能的集成，這里使用的是網(wǎng)上比較流行的valine組件：

yarn add leancloud-storage
yarn add valine

對(duì)于組件的封裝可以參見(jiàn)Valine.vue,

    new Valine({
      el: '#vcomments' ,
      appId: '',// your appId
      appKey: '', // your appKey
      notify:true, 
      verify:false, 
      avatar:'mm', 
      placeholder: 'just go go' 
    });

其中 appid 與appkey 需要在leancloud中注冊(cè)獲得。

詳細(xì)的內(nèi)容，原作者有詳盡的說(shuō)明：云淡風(fēng)輕

GitHub Pages

在你的個(gè)人博客已經(jīng)創(chuàng)建就緒之后，我們需要做的就是發(fā)布它，這需要以下幾步：

• 本機(jī)安裝git，有g(shù)ithub賬號(hào)，這一點(diǎn)不贅述。
• 創(chuàng)建一個(gè) “用戶(hù)名.github.io” 這樣的倉(cāng)庫(kù)，
• 進(jìn)入倉(cāng)庫(kù) ，在settings中，找到 github pages的設(shè)置。
• github官方是給提供模板的，可以先選一個(gè)，在替換成我們的個(gè)人博客的時(shí)候，要把分支先pull下來(lái)，清除原有文件。
• 也可以直接在倉(cāng)庫(kù)根路徑下方一個(gè)index.html,隨便寫(xiě)點(diǎn)內(nèi)容，以驗(yàn)證我們的頁(yè)面是否可以訪(fǎng)問(wèn)

以上步驟網(wǎng)上資料非常多，不清楚可以百度。在一切準(zhǔn)備就緒之后，可以試試瀏覽器直接訪(fǎng)問(wèn)自己的主頁(yè)：用戶(hù)名.github.io。

之后的事情，我們可以寫(xiě)一個(gè)自動(dòng)發(fā)布的腳本：

# 構(gòu)建
npm run build
# 導(dǎo)航到構(gòu)建輸出目錄
cd docs/.vuepress/dist

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

# 推到你倉(cāng)庫(kù)的 master 分支
git push -f git@github.com:zhuzhaohua/zhuzhaohua.github.io.git master

build之后，默認(rèn)會(huì)將靜態(tài)打包文件放在.vuepress/dist下，我們只需把這個(gè)文件夾里的內(nèi)容提交到倉(cāng)庫(kù)里即可。

每次寫(xiě)了新博客，都可以通過(guò)這個(gè)腳本發(fā)布。

綁定域名

現(xiàn)在，博客已經(jīng)可以通過(guò)url： ***.github.io 訪(fǎng)問(wèn)了。

但是傳說(shuō)當(dāng)中，高大上的碼農(nóng)都要有一個(gè)自己的域名，那么，就去買(mǎi)一個(gè)吧。我是在騰訊云買(mǎi)的.com頂級(jí)域名，第一年才20多塊錢(qián)，是的，你沒(méi)有看錯(cuò)，我們到現(xiàn)在為止，個(gè)人博客的搭建，只需要投入這20幾塊錢(qián)，如果你買(mǎi)cn域名，或者另類(lèi)一些的，可能只需要幾塊錢(qián)。。。。。。
在購(gòu)買(mǎi)域名的時(shí)候，需要上傳個(gè)人信息的，住址、身份證信息等，相關(guān)部門(mén)以及機(jī)構(gòu)需要登記審核。但審核期間完全可以正常使用，如果審核未通過(guò)，則會(huì)被停用。
在購(gòu)買(mǎi)域名后，需要配置域名解析，這也就是花錢(qián)買(mǎi)域名的意義，通過(guò)dns,將買(mǎi)來(lái)的域名解析到github pages上。如何設(shè)置，網(wǎng)上資源很多，這里推薦一下：鏈接

結(jié)語(yǔ)

從開(kāi)始研究到發(fā)布，用時(shí)兩天，沒(méi)有太多時(shí)間雕琢，比較簡(jiǎn)陋，僅當(dāng)演示，希望大家見(jiàn)諒。

如此折騰，做了一個(gè)屬于自己的博客，要說(shuō)它有意義，其實(shí)也不會(huì)有幾個(gè)人能看到，畢竟滄海一粟，如此平凡。
今天是2019年的6月1日，這個(gè)博客，就當(dāng)是送給自己的禮物吧，兒童節(jié)快樂(lè)。