個(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 的話，當(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ò)虛擬訪問(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 就可以訪問(wèn)自己的博客了麦撵，做java后臺(tái)出身的我刽肠，深感“約定大于配置”的魅力溃肪，如果我們單單是記錄文檔，默認(rèn)的主題完全符合要求音五，簡(jiǎn)潔大方乍惊，但如果是做個(gè)人博客，一定是需要個(gè)性化的東西的放仗，默認(rèn)的主題無(wú)法滿足我們個(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ì)話策精，大概意思就是：

改變這個(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ù)：

如果用戶在 .vuepress/config.js 配置了 themeConfig居夹，你將可以通過(guò) $site.themeConfig 訪問(wèn)到它败潦。如此一來(lái)，你可以通過(guò)它來(lái)對(duì)用戶開(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ù)中添加分類、標(biāo)簽唉地，以及時(shí)間來(lái)實(shí)現(xiàn)路由砾脑。

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

但這會(huì)產(chǎn)生一個(gè)難以忽視的問(wèn)題，需要大量的循環(huán)遍歷pages以實(shí)現(xiàn)分類以及標(biāo)簽（可以參考我的組件：BlogList）硕噩，甚至假残，我們需要對(duì)時(shí)間進(jìn)行升序、降序的排列榴徐，這些原本應(yīng)該是服務(wù)端在數(shù)據(jù)庫(kù)里完成的事情守问，現(xiàn)在都需要瀏覽器去完成匀归，著實(shí)會(huì)讓人有一些擔(dān)憂坑资。我大概計(jì)算了一下耗帕，如果習(xí)慣非常好，時(shí)間充足袱贮，一天寫(xiě)一篇博客的話仿便，一年360篇，30年是1萬(wàn)篇攒巍，當(dāng)然嗽仪，這過(guò)于理想化了，但如果這個(gè)項(xiàng)目有性能測(cè)試的話柒莉，那么這個(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è) “用戶名.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è)面是否可以訪問(wèn)

以上步驟網(wǎng)上資料非常多季二，不清楚可以百度。在一切準(zhǔn)備就緒之后揭措，可以試試瀏覽器直接訪問(wèn)自己的主頁(yè)：用戶名.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 訪問(wèn)了麻裳。

但是傳說(shuō)當(dāng)中口蝠，高大上的碼農(nóng)都要有一個(gè)自己的域名，那么津坑，就去買一個(gè)吧妙蔗。我是在騰訊云買的.com頂級(jí)域名，第一年才20多塊錢疆瑰，是的眉反，你沒(méi)有看錯(cuò)，我們到現(xiàn)在為止穆役，個(gè)人博客的搭建寸五，只需要投入這20幾塊錢，如果你買cn域名耿币，或者另類一些的梳杏，可能只需要幾塊錢。。十性。叛溢。。劲适。
在購(gòu)買域名的時(shí)候楷掉，需要上傳個(gè)人信息的，住址减响、身份證信息等靖诗，相關(guān)部門以及機(jī)構(gòu)需要登記審核郭怪。但審核期間完全可以正常使用支示，如果審核未通過(guò)，則會(huì)被停用鄙才。
在購(gòu)買域名后颂鸿，需要配置域名解析，這也就是花錢買域名的意義攒庵，通過(guò)dns,將買來(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è)霹抛。