版權(quán)聲明：本文原創(chuàng)發(fā)布于公眾號(hào) wingjay，轉(zhuǎn)載請務(wù)必注明出處！ http://www.lxweimin.com/p/99665608d295

對程序員而言，最好的簡歷就是個(gè)人博客和GitHub

零、個(gè)人博客

每個(gè)優(yōu)秀的程序員都會(huì)有個(gè)人獨(dú)占的一方網(wǎng)絡(luò)空間，那里是他個(gè)人的舞臺(tái)，聽說過他的人會(huì)逐漸匯聚進(jìn)來，認(rèn)識(shí)他，熟悉他，鼓勵(lì)他，贊揚(yáng)他。而對他個(gè)人而言，他有了一個(gè)可以暢所欲言的小房間，他可以專研學(xué)術(shù)，聊聊情懷。同時(shí)和喜愛他的讀者成為好友，共同成長。

這難道不是一件很cool的事情嗎？

一、先看成果

教方法前先來看看最終的效果吧。http://wingjay.com是本人搭建的個(gè)人博客，可作為模版參照，主要特性有以下幾點(diǎn)：

1. 個(gè)人域名: wingjay.com
2. 無需購置服務(wù)器，本站同時(shí)掛載在Github Pages 和 GitCafe Pages上，免服務(wù)器費(fèi)的同時(shí)還能做負(fù)載均衡，想想還有點(diǎn)小激動(dòng)
3. 在GitHub上同時(shí)管理你的博客和相應(yīng)代碼，再也不用擔(dān)心博客遺失
4. SSL支持，即"http://" -> "https://"，更安全也更高大上

二、再看兵器

• 博客框架：Hexo 3，這是一款能快速、簡潔且高效的博客框架，支持Markdown編輯，自動(dòng)渲染出漂亮的靜態(tài)頁面。
• 前端主題：Next，效果參考http://wingjay.com
• 域名購買：類似萬網(wǎng)的平臺(tái)都可以，你可以選購自己名字的域名，一年幾十元左右，兩杯咖啡的錢。
• SSL：CloudFlare

三、抄起家伙

本文寫作方式是安裝流程主線 + 優(yōu)質(zhì)參考文章。由于網(wǎng)絡(luò)上關(guān)于Hexo搭建博客的教程玲瑯滿目，若讀者完全自己動(dòng)手則要一篇篇找，浪費(fèi)時(shí)間走彎路；相反，若作者悉數(shù)摘抄進(jìn)來，反倒未必符合各人情況，且不利閱讀。

所以，主線講解思路，參考深入閱讀。

下文以搭建 http://wingjay.com 個(gè)人博客為例。

1. GitHub Pages

在不購買服務(wù)器的前提下，我們的網(wǎng)站需要掛在GitHub Pages上。

1. 你需要擁有一個(gè)GitHub賬號(hào)，去完成新手任務(wù)吧。
2. 進(jìn)入GitHub Pages，一步步做，完成后就能在瀏覽器打開http://wingjay.github.io了。

至此，我們已經(jīng)利用GitHub Pages搭建好了個(gè)人博客雛形了。下面要做的，就是個(gè)性化了。

2. 安裝Hexo博客框架

經(jīng)過上面步驟，我們已經(jīng)擁有了一個(gè)初步域名：http://username.github.io 加一個(gè)免費(fèi)網(wǎng)絡(luò)空間了。好比房間有了，但還沒有任何家具。所以下面我們需要把空白的博客豐富起來。

放心，不需要你手寫一大堆html、css文件，也不用找jQuery來實(shí)現(xiàn)酷炫的頁面效果。Hexo是一款博客框架，它會(huì)幫我們搭建。

i. 安裝Hexo

參考中文文檔或英文文檔。完成該步后，你的電腦便擁有了Git、Node.js和Hexo。

ii. GitHub管理

為了讓自己未來的博客和代碼處在git管理之下，我們要把剛剛在Github上博客項(xiàng)目拉到本地。如本人創(chuàng)建的https://github.com/wingjay/wingjay.github.io，在本地創(chuàng)建文件夾，名字任意，此處設(shè)為myblog，進(jìn)入該文件夾，把項(xiàng)目代碼clone下來。

git clone https://github.com/wingjay/wingjay.github.io

好了，此時(shí)會(huì)自動(dòng)在myblog目錄下創(chuàng)建子文件夾wingjay.github.io,那里就是我們博客的代碼，以后的操作都在git的管理之下了，此時(shí)默認(rèn)的branch為master。

iii. 初始化Hexo

請參考文檔。init命令中的<folder>就是文件夾wingjay.github.io。初始化后，wingjay.github.io里面就已經(jīng)有完整的Hexo框架了。

iv. 熟悉Hexo

為了讓讀者快速了解Hexo，我作幾個(gè)簡單介紹吧。當(dāng)然，更多的還是需要仔細(xì)閱讀文檔才能了解更詳細(xì)。

Hexo目錄結(jié)構(gòu)

• _config.yml是整體的配置文件，很多基礎(chǔ)配置、插件配置等都需要在里面進(jìn)行。要注意的是，該文件格式要求極為嚴(yán)格，缺少一個(gè)空格都會(huì)導(dǎo)致運(yùn)行錯(cuò)誤。小提示：不要用Tab縮進(jìn)，用兩個(gè)空格符。
• layout，包括draft(草稿)、page(頁面)、post(文章)。這個(gè)就是三種文件的基本格式，其中post是你發(fā)表的文章，會(huì)顯示在你的網(wǎng)站里，一篇post會(huì)包括title標(biāo)題、date日期、tags標(biāo)簽等信息；draft是草稿，只有你在本地能看到，必須要publish后才能成為post，draft和post差別是date，因?yàn)閐raft沒有發(fā)表，所以不需要指定日期。page是一個(gè)頁面，對應(yīng)一個(gè)新的html頁面，比如博客內(nèi)容展示頁是一個(gè)頁面，留言本也是一個(gè)頁面。
• public文件夾，這個(gè)文件夾是最終會(huì)發(fā)布到網(wǎng)站上的真實(shí)內(nèi)容。怎么理解呢？我們可以把public文件夾當(dāng)作是真正的被用戶看到的，而其他的source、themes等都是為public服務(wù)的。Hexo里有一個(gè)很重要的指令hexo generate，這個(gè)指令就是利用所有代碼里的配置信息、source里寫的文章、themes里的樣式，共同生成最終的靜態(tài)html文件，存入public文件夾內(nèi)。在我們執(zhí)行了發(fā)布指令hexo deploy后，就會(huì)把public的內(nèi)容部署到GitHub Pages上。當(dāng)用戶在訪問我們的博客時(shí)，他們會(huì)看到public里生成的html文件。這個(gè)概念非常重要，即代碼和真實(shí)靜態(tài)頁面是獨(dú)立的。
• generate和deploy，generate會(huì)把我們的配置、文章和主題結(jié)合起來生成一堆酷炫的html靜態(tài)文件放在public里面。但此時(shí)用戶還看不到本地public文件里的頁面，我們必須用后一個(gè)指令deploy才能把靜態(tài)文件部署到GitHub Pages上。不過，在部署前，需要配置讓它自動(dòng)部署到我們前面創(chuàng)建的Github項(xiàng)目中。
• deploy相關(guān)配置。為了能夠讓項(xiàng)目自動(dòng)把public文件夾的內(nèi)容部署到GitHub項(xiàng)目中，我們可以按部署文檔進(jìn)行配置，其中選擇的branch為master。此后，每次運(yùn)行deploy后，項(xiàng)目就會(huì)自動(dòng)把public文件夾內(nèi)容全部覆蓋到當(dāng)前的GitHub項(xiàng)目master分支上。
• 代碼和靜態(tài)文件分開管理。根據(jù)上面知道，每次部署后，public文件內(nèi)容會(huì)覆蓋掉項(xiàng)目整個(gè)master分支。這樣可以實(shí)現(xiàn)網(wǎng)站靜態(tài)文件的版本控制，但是，仔細(xì)對比這個(gè)master分支，我們會(huì)發(fā)現(xiàn)里面只剩下靜態(tài)文件了，我們的代碼比如source、themes統(tǒng)統(tǒng)沒有了，這就導(dǎo)致無法對代碼進(jìn)行版本管理了。這意味著我換一臺(tái)電腦，我就再也找不到代碼了，只剩下一堆之前編譯出來的靜態(tài)文件。所以，為了對代碼也進(jìn)行版本控制，我們創(chuàng)建一個(gè)新的分支：code，然后在這個(gè)分支里進(jìn)行代碼控制，master里則保存部署的新的靜態(tài)文件。大家可以自行比對這兩個(gè)branch的內(nèi)容差異。

v. 配置Hexo

做一些基礎(chǔ)配置即可，請參考配置文檔

vi. 小結(jié)

到這里，我們已經(jīng)完成了hexo的配置，我們可以分別管理代碼和靜態(tài)文件。執(zhí)行deploy操作后，刷新你的網(wǎng)頁 http://username.github.io 你就能看到默認(rèn)的內(nèi)容了。

但此時(shí)還是默認(rèn)主題，不夠美觀，所以下一步要配置Next主題。

3. 配置主題Next

Hexo主題非常多，可以參考豐富多彩的Hexo主題，本文選Next為主題，樣式參考我的博客。

進(jìn)入配置階段，最好的文檔還是官方文檔，簡單得不能再細(xì)致了。下面只提幾點(diǎn)注意：

• 第三方評(píng)論系統(tǒng)。評(píng)論系統(tǒng)很重要，你可以與讀者進(jìn)行更多交流，配置也簡單，建議采用DISQUS，更國際化一點(diǎn)，配置見此。另外，前期建議開啟不登陸評(píng)論，即在Disqus的Comment Rule里允許Guest comment。
• 創(chuàng)建留言板。熟悉page的創(chuàng)建與使用，參考這里
• 給自己博客做SEO。有好的SEO便于搜索引擎索引你的網(wǎng)站，隨著以后讀者增多，他們可以更好搜索到你的網(wǎng)站。具體方法見此

4. 替換自己的域名

好了，經(jīng)過上面的步驟，博客已經(jīng)擁有了一個(gè)全新的主題啦。

下面，我們要對域名 http://wingjay.github.io 下手啦。

i. 購買域名

速速前往萬網(wǎng)或相關(guān)域名購買網(wǎng)站，按自己名字挑選一個(gè)閃閃發(fā)光的個(gè)人域名吧！

ii. 域名解析_1

以購買的域名wingjay.com為例，我們希望在訪問這個(gè)域名時(shí)能自動(dòng)進(jìn)入Github Pages，所以我們要在萬網(wǎng)建立一個(gè)CNAME紀(jì)錄來幫我們做一個(gè)域名跳轉(zhuǎn)：wingjay.com -> wingjay.github.io，www.wingjay.com -> wingjay.github.io。添加方法參考這里，添加后可以看到兩條記錄：

域名解析

iii. 域名解析_2

但是，此時(shí)并不能成功訪問，因?yàn)镚ithub Pages是有限制的，它不允許任意域名都跳轉(zhuǎn)過來，而是只限制一個(gè)域名，而且這個(gè)域名必須聲明在CNAME文件中。

所以，我們需要添加一個(gè)CNAME文件到項(xiàng)目的master中才行，參考這里。讀者可以參考本人的CNAME文件內(nèi)容。

不過，對于Hexo 3，這里有一個(gè)坑要注意：大家應(yīng)該還記得上文說的，master分支里的內(nèi)容都是自動(dòng)生成的，而且會(huì)完全覆蓋之前的內(nèi)容。如果我們直接創(chuàng)建一個(gè)新文件CNAME，填好域名。但會(huì)發(fā)現(xiàn)在下一次部署后這個(gè)文件就消失了。不用驚訝，因?yàn)閔exo并不會(huì)自動(dòng)生成CNAME文件，所以在部署時(shí)被覆蓋刪除了。

所以，我們就需要這個(gè)CNAME工具hexo-generator-cname，這時(shí)會(huì)自動(dòng)在public里生成一個(gè)CNAME文件，把你的域名加進(jìn)去再部署一下吧！

5. HTTP -> HTTPS

HTTPS是安全版的HTTP協(xié)議，它在http協(xié)議與TCP之間加入SSL層，采用端口443，不僅會(huì)對傳輸數(shù)據(jù)加密，還會(huì)進(jìn)行身份驗(yàn)證。當(dāng)然個(gè)人博客并沒有強(qiáng)制性要求采用該協(xié)議，這也只是本人的好奇而為。

目前Github Pages已經(jīng)支持https了，但是不支持自定義證書。不過我們可以利用CloudFlare來實(shí)現(xiàn)。具體實(shí)現(xiàn)可以參考這里。

說明：po主網(wǎng)站的https正處在申請中

四、總結(jié)

經(jīng)過上面的步驟，我們已經(jīng)能夠通過訪問自己的域名進(jìn)入自己酷炫的博客了。本文的任務(wù)也就告一段落。

除了上面的功能，本人還完成了支持雙域名同時(shí)登陸，其中，支持雙域名的解決思路是考慮到Github Pages的CNAME紀(jì)錄只允許添加一個(gè)域名，所以本人又在Gitcafe上部署了一套。不過考慮到這點(diǎn)大家不一定能用的上，就沒有做介紹，有需要的話可以看下文的聯(lián)系方式聯(lián)系我。

五、一天變cool系列文章

如何在一天之內(nèi)完成一款具備cool屬性的Android產(chǎn)品<簡詩>

如何在一天之內(nèi)搭建以你自己名字為域名且具備cool屬性的個(gè)人博客

謝謝！

wingjay