博客搭建好之后盒粮，貌似很久沒(méi)有寫文章了鸵鸥，現(xiàn)在就來(lái)分享一下我搭建博客的艱苦行程和一些莫名其妙的坑。

ps:本博客是在MAC環(huán)境下進(jìn)行搭建的丹皱，并且對(duì)github pages和一些shell腳本知識(shí)有所了解妒穴。

警告警告：

由于xiaopingblog.cn這個(gè)域名沒(méi)續(xù)費(fèi)，已經(jīng)被人整成視頻網(wǎng)站了摊崭，請(qǐng)?jiān)L問(wèn)我的github原始地址讼油。http://biggercoffee.github.io，如果之前有訪問(wèn)過(guò)'xiaopingblog.cn'這個(gè)域名呢簸，那么訪問(wèn)'http://biggercoffee.github.io'的時(shí)候會(huì)自動(dòng)跳轉(zhuǎn)到'視頻網(wǎng)站'里矮台，清理一下緩存即可。

首先簡(jiǎn)單描述一下搭建的大體流程吧（其實(shí)挺簡(jiǎn)單的根时，只是體力活費(fèi)時(shí)而已）：

1. 擁有一個(gè)github pages
2. 在本地電腦里配置hexo的環(huán)境瘦赫。（ hexo與github pages綁定，寫博文修改博文等蛤迎，生成靜態(tài)博客并push to github确虱。)
3. 綁定自己的域名（也可以不用綁定，github pages有二級(jí)域名替裆，只不過(guò)綁定了一個(gè)屬于自己的域名更有逼格點(diǎn)兒校辩。）

Github Pages （第一步）

Github Pages免費(fèi)的靜態(tài)站點(diǎn)，其特點(diǎn)：免費(fèi)托管辆童、自帶主題宜咒、支持自制頁(yè)面等。

創(chuàng)建Github Pages比較簡(jiǎn)單把鉴，只要你有一個(gè)github賬號(hào)在創(chuàng)建一個(gè)倉(cāng)庫(kù)就行了故黑，但是這個(gè)倉(cāng)庫(kù)是有規(guī)則的，其格式必須為：yourusername.github.io纸镊。然后根據(jù)提示一直下一步即可倍阐，非常簡(jiǎn)單概疆。

image

作為一個(gè)開(kāi)發(fā)者逗威，要是連一個(gè)github賬號(hào)都沒(méi)有，那你可以洗洗睡了岔冀。

而倉(cāng)庫(kù)命名格式中的yourusername是你的github用戶名凯旭。筆者的github用戶名是biggercoffee。所以倉(cāng)庫(kù)命名格式則是biggercoffee.github.io

由于筆者有biggercoffee.github.io這個(gè)倉(cāng)庫(kù)，所以我上述效果圖提示已存在罐呼。純屬作為演示鞠柄。

Hexo （第二步）

Hexo 是一個(gè)快速、簡(jiǎn)潔且高效的博客框架嫉柴。Hexo 使用 Markdown（或其他渲染引擎）解析文章厌杜，在幾秒內(nèi)，即可利用靚麗的主題生成靜態(tài)網(wǎng)頁(yè)计螺。

安裝

Hexo的安裝網(wǎng)上有很多教程夯尽，但很多都很蛋疼且過(guò)期技術(shù)，所以最好的還是參考Hexo官方的安裝教程來(lái)一步一步走登馒。在此筆者也不寫詳細(xì)教程了匙握，因?yàn)榭赡懿怀?個(gè)月就坑了小伙伴們。中文版Hexo文檔點(diǎn)此進(jìn)行傳送陈轿。圈纺。。

本地環(huán)境說(shuō)白了就是要有Git和Node.js環(huán)境即可麦射。詳情參見(jiàn)官網(wǎng)文檔為準(zhǔn)蛾娶，也最好參考官網(wǎng)，避免入坑法褥。

建站

Hexo安裝好了之后茫叭，就開(kāi)始進(jìn)行建站。打開(kāi)終端cd到桌面并使用如下命令即可建好

hexo init yourname
cd yourname
npm install

其中yourname是你的文件夾名字可隨意劝氲取（本文章假設(shè)yourname的文件夾名稱是Hexo）揍愁。
建站好了之后需要了解更多的信息和其他步驟請(qǐng)參考官網(wǎng)的這篇文檔。https://hexo.io/zh-cn/docs/setup.html

這里需要特別提一下杀饵，官方的文檔里并沒(méi)講解如何配置與Github pages進(jìn)行關(guān)聯(lián)莽囤，在此特意說(shuō)一下配置信息。進(jìn)入到你的站點(diǎn)（使用hexo init yourname命令時(shí)切距，這里的yourname文件夾目錄朽缎，剛假設(shè)yourname是Hexo，所以我們進(jìn)入Hexo目錄）谜悟，然后以文本編輯器打開(kāi)_config.yml文件话肖，并滾動(dòng)到最下面添加如下配置信息（注意最下邊有deploy和type字段，覆蓋這兩個(gè)字段或者刪除這兩個(gè)字段然后復(fù)制下面的四個(gè)字段也行葡幸。）：

deploy:
type: git
repo: https://github.com/biggercoffee/biggercoffee.github.io.git
branch: master

把其中repo字段的值替換成你的github pages提交代碼的git地址最筒。

別告訴我你不知道你的github pages的git提交地址。蔚叨。床蜘。
好吧辙培，我還是附上一張截圖吧，進(jìn)入到你的github剛創(chuàng)建好的那個(gè)github pages倉(cāng)庫(kù)就能看到了邢锯。

image

好吧扬蕊，到此你使用終端，然后進(jìn)入到你的站點(diǎn)文件夾使用hexo s命令丹擎，如果成功會(huì)打印類似Hexo is running at http://localhost:4000/. Press Ctrl+C to stop的一句話尾抑，再打開(kāi)你的瀏覽器輸入localhost:4000地址見(jiàn)證神奇的一刻吧。

發(fā)布

當(dāng)然這只是本地跑起來(lái)了蒂培，而你的github pages服務(wù)器上并沒(méi)有蛮穿，所以你就需要在你的站點(diǎn)里使用終端命令進(jìn)行發(fā)布：

hexo clean
hexo g
hexo d

命令詳解，第一條是清楚緩存毁渗，第二條命令是生成本地發(fā)布文件夾践磅，第三條命令才是最后的發(fā)布到github pages上。更多的hexo命令操作請(qǐng)參考官方文檔即可灸异。不過(guò)一般用來(lái)用去無(wú)非就是創(chuàng)建頁(yè)面府适、發(fā)布這么幾條命令而已。Hexo官方命令參考文檔

其實(shí)學(xué)習(xí)一個(gè)新東西有事沒(méi)事多去官方看文檔肺樟，比在網(wǎng)上查資料要來(lái)的更靠譜的多檐春。

HEXO主題

如果你到了這里沒(méi)有任何問(wèn)題，那么恭喜你已經(jīng)成功了么伯，不過(guò)這才剛剛開(kāi)始疟暖。
當(dāng)你成功的看到自己博客搭建好的那一刻又是激動(dòng)又是失望，激動(dòng)的是博客總算折騰出來(lái)了田柔，失望的是俐巴，為何如此的丑。硬爆。欣舵。說(shuō)實(shí)話Hexo默認(rèn)的主題自我感覺(jué)還過(guò)得去，如果你想換風(fēng)格,Hexo的主題網(wǎng)上隨便一搜也有很多缀磕。在此筆者使用的博客主題是Next（國(guó)人寫的）缘圈。https://github.com/iissnan/hexo-theme-next

Next文檔已經(jīng)寫得很詳細(xì)了（上述鏈接里有文檔地址），筆者在此也沒(méi)啥要寫的袜蚕。只不過(guò)弱弱的吐槽一下糟把，配置這東西需要注冊(cè)的賬號(hào)挺多的。牲剃。遣疯。但擴(kuò)展性很強(qiáng)，需要什么功能自己去配置一下即可颠黎。

域名綁定（第三步另锋，可選）

筆者是在萬(wàn)網(wǎng)買的域名（http://xiaopingblog.cn/）。 域名買好之后提交實(shí)名認(rèn)證等狭归，這些操作就不在贅述夭坪。域名購(gòu)買地址https://wanwang.aliyun.com/。

這里需要特別提一下的就是萬(wàn)網(wǎng)如何與github pages進(jìn)行綁定过椎，首先假設(shè)你有一個(gè)域名并且是可用狀態(tài)室梅。修改你域名的DNS地址為 f1g1ns1.dnspod.net和f1g1ns2.dnspod.net

image

然后在你的本地站點(diǎn)目錄里的source目錄下添加一個(gè)CNAME文件，不帶后綴疚宇，效果如下

image

以文本編輯器打開(kāi)CNAME亡鼠，里面添加你的域名信息（不加http://） 如下圖

image

填寫完了之后再重新部署到github pages上（部署簡(jiǎn)寫命令hexo d -g)

下一步注冊(cè)DNSpod，然后添加域名敷待，添加記錄即可间涵。

添加域名填寫你的域名即可，老規(guī)矩不用添加http://榜揖，然后在點(diǎn)擊你的域名點(diǎn)進(jìn)去在添加記錄即可（其中記錄中CHAME的值是你的github pages的地址）勾哩。

image

那么現(xiàn)在把你本地的Hexo生成一下在提交到Github pages上吧（生成和提交簡(jiǎn)寫命令hexo d -g），然后打開(kāi)你的瀏覽器輸入你購(gòu)買的域名嘗試吧举哟。筆者的博客域名：http://xiaopingblog.cn/ 大家盡情的去蹂躪吧思劳。

ps:萬(wàn)網(wǎng)DNS地址更換貌似需要一段時(shí)間才能生效，如果不能訪問(wèn)請(qǐng)晚點(diǎn)或者隔天再訪問(wèn)域名妨猩，如果還是不行可能就是出問(wèn)題了潜叛。反正筆者當(dāng)時(shí)運(yùn)氣好，修改了萬(wàn)網(wǎng)DNS之后即時(shí)生效壶硅。

筆者分享

分享一些筆者用Hexo寫文章的tips

文章管理

一般筆者寫文章威兜、修改文章是在本地可視化寫文章，然后在使用命令提交上去庐椒。筆者使用的是一個(gè)hexo可視化文章管理的插件（hey）牡属，地址：https://github.com/nihgwu/hexo-hey 。

當(dāng)然也有一個(gè)Hexo的admin插件扼睬，但是那個(gè)插件不支持圖片拖拽進(jìn)來(lái)逮栅，所以筆者推薦使用hey。安裝和使用詳情窗宇，參見(jiàn)筆者給出的github地址措伐。

shell腳本自動(dòng)化（可忽略，只是一個(gè)想法）

開(kāi)啟Hexo的本地服務(wù)或者提交到github pages這些都是一些終端里的Hexo命令军俊，所以筆者寫了一些shell腳本侥加，來(lái)簡(jiǎn)化這些操作。所以基本就是用hey可視化寫文章粪躬，寫好了之后担败，然后點(diǎn)擊一鍵部署的shell腳本昔穴，然后就自動(dòng)發(fā)布了（當(dāng)然這也純屬雞助，看個(gè)人提前。）吗货。由于shell腳本比較簡(jiǎn)單，隨意網(wǎng)上搜索資料一大堆狈网。再加上筆者自己寫的腳本代碼也沒(méi)上傳宙搬，在此插入一個(gè)一鍵部署的shell腳本代碼

cd Desktop/Hexo
hexo clean
hexo g
hexo d

cd到自己的站點(diǎn)目錄，然后直接使用hexo命令即可拓哺。shell腳本自動(dòng)化操作就是封裝了這些命令而已勇垛，在此也只是提供這么一個(gè)想法，既然我們都是coder士鸥，何不善用自己已有的知識(shí)尼闲孤。

寫到最后

github pages雖然免費(fèi)，但畢竟是國(guó)外的服務(wù)器烤礁，國(guó)內(nèi)訪問(wèn)可以稍微緩慢崭放，如果是土豪，可去買一個(gè)支持Node.js的國(guó)內(nèi)云空間即可鸽凶”疑埃總之github pages + hexo搭建博客還是挺能折騰人的。但畢竟免費(fèi)玻侥，而且身為技術(shù)人員不就是該具備折騰的精神嗎决摧？（博客地址點(diǎn)此）

反饋問(wèn)題

具反饋hexo d部署的時(shí)候出現(xiàn)了not found問(wèn)題，如果遇上這問(wèn)題先輸入npm install hexo-deployer-git --save命令凑兰，然后在運(yùn)行hexo d部署嘗試掌桩。（在這里感謝@LeoLeoHan給出的解決方案）