前言

還記得大學(xué)時(shí)期在新浪開了個(gè)博客，記錄了很多大學(xué)時(shí)的生活點(diǎn)滴，但隨著微博的出現(xiàn)，博客平臺(tái)逐漸「過時(shí)」，信息碎片化的趨勢(shì)愈演愈烈，自己也就逐漸放棄了博客的維護(hù)了。隨著微博、朋友圈等平臺(tái)的壯大，信息進(jìn)入「快餐」時(shí)代，人們不再需要長(zhǎng)篇大論，不再需要斟酌文字，信息的發(fā)送變得尤為簡(jiǎn)單，人們表達(dá)/表現(xiàn)自己的欲望得到了更快的滿足，這一表象也恰恰驗(yàn)證了人「懶」的天性。

雖說博客停止維護(hù)了，但閑來無事也喜歡在「印象筆記」上寫寫文章，記錄一下心情，評(píng)論一下電影，分析一下技術(shù)，偶爾總結(jié)一下自己。寫得多了，愈發(fā)覺得「印象筆記」糟糕的寫作和排版體驗(yàn)實(shí)在影響心情，恰好這些天嘗試了一下「Markdown」語法，瞬間被「能夠把文章像代碼一樣管控起來」這種體驗(yàn)所俘獲，誰讓我是一名羞澀的「程序員」呢。同時(shí)，最近看了周楷雯Kevin的「Producter」（一本涵蓋了設(shè)計(jì)、交互、視覺、開發(fā)、營(yíng)銷的作品），加之平時(shí)對(duì)設(shè)計(jì)一直感興趣，很自然地就萌生了創(chuàng)建獨(dú)立博客，自己設(shè)計(jì)實(shí)現(xiàn)博客風(fēng)格，文章使用Markdown語法編寫，用Git維護(hù)。Google了一下幾個(gè)關(guān)鍵詞，很快就出來了「Github pages」「Hexo」「Jekyll」「博客主題模板」等教程。在知乎上搜索了一下獨(dú)立博客相關(guān)信息，在問題有哪些好看的Hexo主題里看到了@正峰設(shè)計(jì)的Hexo主題Next，簡(jiǎn)潔、清晰，效果很合心意，維護(hù)于Github，于是，初步?jīng)Q定使用「Github pages」+「Hexo」+「Next」搭建第一個(gè)屬于自己的獨(dú)立博客。

博客的搭建

Github pages庫(kù)創(chuàng)建

這步不用多說，申請(qǐng)Github帳號(hào)「YourAccount」，創(chuàng)建repository [YourAccount.github.io]，這樣就ok了，章節(jié)「Hexo安裝與配置」完成后即可通過域名YourAccount.github.io訪問自己的博客了。什么？嫌棄域名不簡(jiǎn)潔，難看，處女座表示完全接受不了？！沒關(guān)系，「域名申請(qǐng)與配置」章節(jié)可以滿足你三個(gè)愿望。

Hexo安裝與配置

其實(shí)...這個(gè)步驟也沒什么，總共命令才三條，由于我用的是OS X系統(tǒng)，Win和Linux的盆友們就自行查看hexo官方文檔啦。下面是OS X系統(tǒng)下的安裝命令：

安裝Node.js

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
$ nvm install 4

安裝Git

直接下載Git安裝包進(jìn)行安裝即可。

安裝Hexo

$ npm install -g hexo-cli

初始化Hexo

安裝完成后，新建用于存放Blog源文件的目錄（此處假設(shè)為/YourBlog/），然后使用Terminal運(yùn)行下述命令，即可完成文件夾的「Hexo化」，后續(xù)的所有操作均在此文件夾中。

$ hexo init

除了初始化指令，常用的hexo指令集有下面這些，具體用法后面章節(jié)會(huì)提到。

$ hexo g
$ hexo d
$ hexo new "xxxx"
$ hexo clean
$ ...

NexT主題安裝與配置

進(jìn)入YourBlog目錄，找到themes文件夾，在Terminal中使用git下載NexT主題：

$ git clone https://github.com/iissnan/hexo-theme-next.git

將「hexo-theme-next」文件夾改名為「next」。

打開YourBlog/_config.yml文件，找到「Themes」關(guān)鍵字，在下方加入下述代碼，并注釋掉其他的「theme xxx」代碼，即可切換到NexT主題。

$ #theme xxx
$ theme next

打開YourBlog/themes/next/_config.yml文件，找到「Schemes」關(guān)鍵字，里面有三套風(fēng)格，可根據(jù)個(gè)人喜好選擇其中一款，我選用的這款是Mist。

$ #scheme: Muse
$ scheme: Mist
$ #scheme: Pisces

Markdown語法及編輯工具

開頭提到吸引我開博客很重要的一點(diǎn)是能用Markdown編輯和維護(hù)所有文章，就算后面需要做文章遷移，只要我保留了Markdown格式的源文件，無論我遷移到哪個(gè)網(wǎng)絡(luò)平臺(tái)，文章的格式和排版都能維持一致。Markdown的理念是「易讀易寫」，語法很容易上手，具體可參考官網(wǎng)說明。

至于Markdown編輯器，我沒有嘗試太多，打算先用著Mou試試。鑒于現(xiàn)在Markdown編輯器之多（無論在線還是離線），不排除在熟悉Markdown語法后會(huì)多更換幾個(gè)編輯器試試。Mou里面也有比較詳細(xì)的Markdown語法例程，對(duì)熟悉Markdown語法還是挺有幫助的。

發(fā)表第一篇博文

好了，準(zhǔn)備工作基本完成，下面來嘗試發(fā)布第一篇博文。

1）新建博文.md文件。執(zhí)行下述命令后，可以發(fā)現(xiàn)在YourBlog/Source/_posts/下有一個(gè)「myFirstBlog.md」文件。

$ hexo new "myFirstBlog"

2）使用Markdown編輯器打開myFirstBlog，隨便編寫一些內(nèi)容。

3）執(zhí)行下述指令，編譯生成hexo靜態(tài)網(wǎng)頁(yè)

$ hexo g

4）執(zhí)行下述命令，在本機(jī)測(cè)試網(wǎng)站顯示效果

$ hexo s -s

5）打開瀏覽器，訪問「http://localhost:4000/」，即可看到博客的整體顯示效果。

6）執(zhí)行下述命令，把博客部署到githup服務(wù)器上，再訪問「YourAcount.github.io」，即可看到最終部署到服務(wù)器上的博客效果了。

$ hexo d

域名申請(qǐng)與配置

前面說道，如果不滿意Github默認(rèn)的域名，可以自己申請(qǐng)自定義域名與「YourAcount.github.io」綁定，即可通過自定義域名訪問自己的博客了。

1）申請(qǐng)域名

雖然很多人都推薦使用godaddy申請(qǐng)域名，不過我圖方便，直接在阿里云上申請(qǐng)了「chamchamben.com」的域名，首年45元。

2）hexo配置

$ npm install hexo-generator-cname --save

執(zhí)行上述命令，安裝hexo的「CNAME」生成器；然后打開YourBlog/_config.yml文件，找到url關(guān)鍵字，在其后面填入剛申請(qǐng)的域名，這里我填寫了「http://chamchamben.com」。在下一次執(zhí)行「hexo g」時(shí)，會(huì)自動(dòng)在YourBlog/public/下創(chuàng)建CNAME文件，里面存放著自定義域名「chamchamben.com」。

3）域名配置

在域名的「解析設(shè)置」里，添加如圖所示的三項(xiàng)內(nèi)容，即可完成域名重定向。

4）大功告成

在瀏覽器輸入你的自定義域名，即可訪問自己的獨(dú)立博客了?。?！

剩下還要做什么？當(dāng)然就是寫文章，優(yōu)化主題配置，學(xué)習(xí)前端知識(shí)自行設(shè)計(jì)主題模板，推廣博客等等了。

坑?。。?/h4>

雖說上面的步驟看著簡(jiǎn)單，但真正操作起來，還是或多或少有些坑的。

1）NexT主題的bug

在修改了已有.md博客文件后，執(zhí)行「hexo g」指令時(shí)，其實(shí)并沒有生成正確的index.html文件，導(dǎo)致博客「首頁(yè)」會(huì)出現(xiàn)博文丟失的情況。此時(shí)只需要再執(zhí)行一次「hexo g」指令，即可生成正確的index.html文件了。

$ hexo g
$ hexo g

2）本地預(yù)覽正常，但部署到Github后頁(yè)面不對(duì)

本地預(yù)覽時(shí)，若直接使用「hexo s」命令，則預(yù)覽的是實(shí)時(shí)編譯出來的網(wǎng)頁(yè)，與使用「hexo d」部署到服務(wù)器時(shí)的網(wǎng)頁(yè)不一定一致，特別是遇到問題1）時(shí)，「hexo s」命令執(zhí)行的預(yù)覽是看不出來問題的。所以，在本地進(jìn)行預(yù)覽時(shí)，需要使用「hexo s -s」命令，確保編譯生成的網(wǎng)頁(yè)文件與即將部署到服務(wù)器的網(wǎng)頁(yè)文件一致，保證在部署前博客沒有問題。

$ hexo s
$ hexo s -s
$ hexo d

3）CNAME文件的生成

在「域名申請(qǐng)與配置」章節(jié)中提到CNAME文件，其作用是用于告知Github服務(wù)器即將把哪個(gè)域名綁定到Y(jié)ourAcount.github.io網(wǎng)址上。所以，CNAME中填寫域名與你申請(qǐng)的自定義域名必須一致，否則就不能通過自定義域名訪問博客了。

為什么說這里有坑呢，在網(wǎng)絡(luò)上搜索到的各種教程中，都說CNAME是直接在Github倉(cāng)庫(kù)中創(chuàng)建，然后手動(dòng)填入自定義域名的。當(dāng)然，手動(dòng)創(chuàng)建CNAME文件并寫入域名可以讓你的域名跳轉(zhuǎn)成功，但是，當(dāng)你下一次執(zhí)行「hexo g」和「hexo d」進(jìn)行網(wǎng)頁(yè)編譯部署時(shí)，你會(huì)發(fā)現(xiàn)Github庫(kù)中的CNAME文件被修改為「YourAcount.github.io」，此時(shí)通過瀏覽器訪問自定義域名時(shí)，會(huì)發(fā)現(xiàn)博客已經(jīng)訪問不了了。

所以，針對(duì)CNAME文件，還是通過「hexo-generator-cname」插件來自動(dòng)生成吧。

4）博客搭建完后就只管寫文章就行了？呵呵...

人的欲望是無窮的，當(dāng)博客搭建完后，你會(huì)開始想，這個(gè)主題再要是加點(diǎn)統(tǒng)計(jì)功能就好了，這個(gè)地方留白再多些就好了，這個(gè)動(dòng)畫速度再快些就好了...當(dāng)你開始想折騰，想真正按照自己想法去設(shè)計(jì)博客交互及視覺時(shí)，你會(huì)發(fā)現(xiàn)，「前端技術(shù)」在不遠(yuǎn)處跟你熱情招手呢~~

寫在最后

曾經(jīng)看過一句話「立志用功如種樹然，方其根芽，猶未有余，及其有干，尚未有枝，枝而后葉，葉而后花實(shí)。初種根時(shí)，只管栽培灌溉，勿作枝想，勿作葉想，勿作花想，勿作實(shí)想——懸想何益？但不忘栽培之功，怕沒有枝葉花實(shí)？」

某種意義說，博客之于我是一顆種子，是人生的一種積累方式。「初種根時(shí)，只管灌溉，勿作枝想，勿作葉想，勿作花想，勿作實(shí)想——懸想何益？但不忘栽培之功，怕沒有枝葉花實(shí)？」是的，博文之于博客，相當(dāng)于泥土，相當(dāng)于水份，相當(dāng)于肥料，只要養(yǎng)分充足，還擔(dān)心不能枝繁葉茂么？

共勉~

我的博客小站：點(diǎn)擊進(jìn)入