不知道為什么部分圖片上傳失敗，一直上傳不成功，如果有需要大家可以去我的小站觀看
背景
作為一個(gè)開(kāi)發(fā)者不能沒(méi)有博客，最近花了幾天的時(shí)間搭建了這個(gè)博客，處理了很多細(xì)節(jié)，在這篇文章中我會(huì)把我從開(kāi)始到現(xiàn)在以及后續(xù)的優(yōu)化整理出來(lái)，幫助更多的人搭建、維護(hù)、更新、自己的博客。
[圖片上傳失敗...(image-a6d642-1517989244362)]
一開(kāi)始我所有的博客都寫(xiě)在新浪微博，因?yàn)槲⒉┥细菀淄茝V自己的文章，微博用戶(hù)量大，但是后來(lái)微博的弊端慢慢的顯示出來(lái)了，畢竟不是開(kāi)發(fā)者的天地，我的博客中經(jīng)常會(huì)插入大量的代碼，而微博不支持markdown編輯，普通的編輯器對(duì)代碼塊的兼容性非常差，別說(shuō)高亮了，有時(shí)候排版都會(huì)錯(cuò)亂，最后外觀很不好看，如下圖：
而且微博的賬號(hào)系統(tǒng)也存在一定的弊端，所以后來(lái)轉(zhuǎn)向簡(jiǎn)書(shū)、掘金等技術(shù)平臺(tái)，不得不承認(rèn)相對(duì)于微博來(lái)說(shuō)這些平臺(tái)對(duì)開(kāi)發(fā)者就要友好多了，不過(guò)后來(lái)又發(fā)現(xiàn)一個(gè)問(wèn)題。因?yàn)槲以趯?xiě)文章的時(shí)候使用的是本地的markdown編輯器，而這些平臺(tái)對(duì)markdown語(yǔ)法的一些小細(xì)節(jié)并不嚴(yán)謹(jǐn)或者說(shuō)統(tǒng)一如下圖：
兩個(gè)平臺(tái)的編輯器無(wú)法做到統(tǒng)一，以至于每次寫(xiě)完文章都需要針對(duì)兩個(gè)平臺(tái)做不同的修改。
綜上所述，最簡(jiǎn)單的也最一勞永逸的方法就是搭建自己的博客平臺(tái)，而HEXO很好的幫我們解決了這個(gè)問(wèn)題，其實(shí)對(duì)于一個(gè)開(kāi)發(fā)者來(lái)說(shuō)并不是什么難事，整個(gè)流程對(duì)于大部分有代碼基礎(chǔ)的開(kāi)發(fā)者來(lái)說(shuō)一上午時(shí)間就可以搞定，不過(guò)最難的也是最頭痛的就是對(duì)細(xì)節(jié)的調(diào)整，對(duì)UI的修改、優(yōu)化等，不過(guò)本文會(huì)對(duì)此逐一講解。
環(huán)境配置
cURL:
$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
Wget:
$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh
安裝完成后，重啟終端并執(zhí)行下列命令即可安裝 Node.js。
$ nvm install stable
一般的開(kāi)發(fā)者不會(huì)沒(méi)有這個(gè)吧，我是安裝Xcode就會(huì)有這個(gè)了，
使用 Homebrew, MacPorts ：brew install git;或下載 安裝程序 安裝
- bitbucket賬號(hào)
一般都會(huì)使用HEXO+GitHub page的形式搭建自己的博客，但是這里有個(gè)問(wèn)題就是GitHub是開(kāi)源的，任何人都能在上面看到你的源代碼，雖然這并沒(méi)有什么太大的影響，不過(guò)對(duì)于我來(lái)說(shuō)感覺(jué)怪怪的，所以我就用了bitbucket page來(lái)處理我的博客，所有的東西都一樣只不過(guò)這個(gè)是個(gè)私有庫(kù)罷了（免費(fèi)五個(gè)人）
[圖片上傳失敗...(image-e0b2dc-1517989244362)]
開(kāi)始建站
第一步：創(chuàng)建倉(cāng)庫(kù)
進(jìn)入github/bitbucket（后續(xù)都以github為例）新建repo，這里要注意repo的名字一定要滿(mǎn)足your Account Name/github.io。如果是bitbucket那就是your Account Name/bitbucket.io，因?yàn)橹挥羞@樣的倉(cāng)庫(kù)名稱(chēng)最后才能以靜態(tài)頁(yè)面展示。如圖：XXX的內(nèi)容一定要與紅色的框里的文本一致。
[圖片上傳失敗...(image-793498-1517989244362)]
第二步：創(chuàng)建本地文件夾
創(chuàng)建文件夾之后CD到你創(chuàng)建的文件夾中執(zhí)行hexo的初始化相關(guān)命令
$ hexo init
$ npm install
執(zhí)行完畢之后你的文件夾里就有內(nèi)容了，標(biāo)準(zhǔn)的目錄結(jié)構(gòu)是這樣（只列出幾個(gè)必要的文件夾及其子目錄）
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml：
其中我們以后的大部分操作都會(huì)在_config.yml中進(jìn)行，這個(gè)文件是我們的站點(diǎn)的配置文件。scaffolds：
模板文件，規(guī)定了我們創(chuàng)建一篇文章的時(shí)候最開(kāi)始的樣子，source：
可以暫時(shí)的理解成我們文章的存放處themes：
主題文件
第三步：部署到Git
修改我們的的站點(diǎn)配置文件_config.yml中如下字段
[圖片上傳失敗...(image-2a6825-1517989244362)]
其中：
type值對(duì)應(yīng)的是你所部署的的服務(wù)器類(lèi)型，我們這里填寫(xiě)git就可以。repo是你的倉(cāng)庫(kù)地址，也就是倉(cāng)庫(kù)克隆的地址，推薦用https的鏈接。branch不寫(xiě)默認(rèn)是master，通常我們寫(xiě)成master就可以。
以上配置完成后保存 然后回到終端執(zhí)行npm install hexo-deployer-git --save安裝一個(gè)插件，這樣才能將你寫(xiě)好的文章部署到github服務(wù)器上并讓別人瀏覽到。安裝完成后在終端中依次執(zhí)行如下代碼(為了簡(jiǎn)單后續(xù)統(tǒng)稱(chēng)為三步)
hexo clean清理緩存hexo generate進(jìn)行渲染 簡(jiǎn)寫(xiě)hexo ghexo server部署到本地(調(diào)試使用) 簡(jiǎn)寫(xiě)hexo s。然后瀏覽器輸入http://localhost:4000就可以看到你博客的效果啦，不過(guò)這是本地調(diào)試用，其他人是看不到的。(調(diào)試完畢后記得control + C關(guān)閉本地端口，不然下次就進(jìn)不去啦)調(diào)試完畢后使用
hexo deploy簡(jiǎn)寫(xiě)為hexo d來(lái)部署到git服務(wù)器。
執(zhí)行完以上操作后打開(kāi)瀏覽器地址了輸入http://你github名字.github.io就可以看看到效果啦，這回是所有人都能看到的，用手機(jī)也可以。至此第三步已經(jīng)完成,最終的結(jié)果如下圖：
[圖片上傳失敗...(image-92c5da-1517989244362)]
第四步：寫(xiě)文章
使用如下命令 hexo new post “文章名字” 就可新建文章啦，建立好的文章在 source/_posts 中，你可以用markdown語(yǔ)法編輯內(nèi)容就可以。編輯完成后執(zhí)行第三步中終端的操作就可以啦，刷新下瀏覽器就可看到你的新文章啦。如下圖:
[圖片上傳失敗...(image-bed833-1517989244362)]
個(gè)性化
一：主題
獲取
主題是我么個(gè)性化的基礎(chǔ)和前提，我們想做任何個(gè)性化上的修改基本上都是在我們主題上的修改，先找到一個(gè)自己滿(mǎn)意的主題是首要任務(wù)。關(guān)于主題網(wǎng)上有很多很多，HEXO官方的主題目錄也收錄了好多來(lái)著世界各地開(kāi)發(fā)者的主題?；蛘唛_(kāi)發(fā)者也可以直接去網(wǎng)上搜索HEXO theme關(guān)鍵字來(lái)獲取主題。
安裝
主題一般都是repo，只要講起clone到博客目錄themes/XXXX下就可了，XXXX對(duì)應(yīng)的就是你給主題起的名字，像這樣：git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet 這樣就可以保證每次主題的作者有更新了我們就可以 pull獲取更新。不過(guò)這樣有個(gè)問(wèn)題后面我會(huì)在HEXO多終端同步一欄講到，所以這里我們選擇另一種方式去安裝，就是直接把主題的repo下載下來(lái)
然后解壓放到themes中。其實(shí)對(duì)于已經(jīng)穩(wěn)定的主題作者一般不會(huì)頻繁更新，不穩(wěn)定的主題我們也不會(huì)用，所以用后者安裝也是一樣的。
然后我們回到剛才的站點(diǎn)配置文件中_config.yml修改如下字段，對(duì)應(yīng)的名字就是你剛才那個(gè)主題文件夾的名字：我這邊是next，
[圖片上傳失敗...(image-ab7a4c-1517989244362)]
然后保存，再去終端執(zhí)行那三步，接著刷新網(wǎng)頁(yè)就可以看到新的界面啦。下面是我換了NEXT主題刷新后的效果。因?yàn)樵撟⒁庖呀?jīng)非常完善，所有后續(xù)用該主題做例子來(lái)講
[圖片上傳失敗...(image-af4ce3-1517989244362)]
二：主題菜單
添加按鈕
主題菜單也可以說(shuō)是主題按鈕。也就是上面頂部的兩個(gè)，next主題默認(rèn)的兩個(gè)是Home、Archive，我們一般會(huì)加上tag about category等。這些都是需要在主題上進(jìn)行修改，我們需要修改主題的配置文件，首先在主題的文件夾下找到_config.yml文件，沒(méi)錯(cuò)和之前的站點(diǎn)配置文件同名，只不過(guò)他們的路徑不同，大家千萬(wàn)不要弄混，站點(diǎn)配置文件是配置站點(diǎn)通用的東西，而主題配置文件是配置一些主題的元素。在主題配置文件找到menu字段
[圖片上傳失敗...(image-2220fe-1517989244362)]
可以看到主題作者注釋掉了一部分按鈕只保留了兩個(gè)最基本的，這里需要注意前面的Key并不是代表的是按鈕名字，因?yàn)樵撝黝}是支持多語(yǔ)言，所以這個(gè)key只是個(gè)標(biāo)識(shí)，具體的按鈕名字要去該路徑下查找
[圖片上傳失敗...(image-a8242e-1517989244362)]
其中每一個(gè)文件對(duì)應(yīng)了不同的語(yǔ)言，我們以漢語(yǔ)為例，進(jìn)入zh-Hans.yml中修改這些字段
[圖片上傳失敗...(image-82bc96-1517989244362)]
其中key就是之前我們?cè)谥黝}配置文件中的key，而后面的value則是簡(jiǎn)體中文狀態(tài)下按鈕的名字。修改完成后我們保存執(zhí)行那三步就可以看到我們新添加的按鈕了。
添加頁(yè)面
添加按鈕后我們需要點(diǎn)擊按鈕顯示統(tǒng)一的頁(yè)面。這時(shí)候我們需要添加頁(yè)面。以tag頁(yè)面為例，hexo中添加頁(yè)面的命令是hexo new page XXXXX 后面XXX則是要添加頁(yè)面的名稱(chēng)，我們這里寫(xiě)tags。為了測(cè)試新建的tag頁(yè)面我們對(duì)之前的頁(yè)面添加個(gè)tag。去 source/_post中找一篇文章我們?cè)陂_(kāi)頭添加如下字段,多標(biāo)簽以此類(lèi)推
[圖片上傳失敗...(image-a80002-1517989244362)]
然后編輯我們剛才生成的tag頁(yè)面(source/tags/index.md)指定其type為tags
[圖片上傳失敗...(image-1ac6fa-1517989244362)]
然后保存執(zhí)行那三步就會(huì)有如下效果
[圖片上傳失敗...(image-9e1eea-1517989244362)]
點(diǎn)擊對(duì)應(yīng)的tag即可跳轉(zhuǎn)到改tag所對(duì)應(yīng)的文章。其他頁(yè)面同理。
三：添加閱讀更多button
我們?cè)谑醉?yè)的時(shí)候其實(shí)就是我們的文章列表，但是這時(shí)候有個(gè)問(wèn)題，如果我們某一篇或者某幾篇文章很長(zhǎng)，那首頁(yè)是不是更長(zhǎng)呢？其實(shí)在首頁(yè)我們可以只顯示文章部分內(nèi)容，通過(guò)點(diǎn)擊閱讀更多按鈕來(lái)進(jìn)入文章詳情。這個(gè)時(shí)候就需要截?cái)辔恼?。我們?cè)谖恼碌暮线m地方采用``來(lái)截?cái)?用默認(rèn)文章來(lái)看
[圖片上傳失敗...(image-d25afc-1517989244362)]
然后執(zhí)行那三步就會(huì)如下效果
[圖片上傳失敗...(image-4086d9-1517989244362)]
點(diǎn)擊閱讀更多。
四：更改主題背景
首先找到如下路徑 themes\next\source\css_custom\custom.styl 會(huì)發(fā)現(xiàn)里面是空的，這個(gè)文件是Next主題為我們預(yù)留的做一些自定的css樣式的地方，我們添加如下代碼。
//背景圖片相關(guān)
@media screen and (min-width:1200px) {
body {
background-image:url(/images/bg.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:50% 50%;
background-size: cover
}
#footer a {
color:#eee;
}
}
這里大家應(yīng)該就可以看出括號(hào)里面的圖片路徑就是我們的背景圖片，我們只需把圖片放入 themes\next\source\images 中即可，記住圖片名字要寫(xiě)對(duì)，要有后綴。同理括號(hào)里面我們可以直接放一個(gè)圖片的鏈接比如 https://tpc.googlesyndication.com/simgad/6893153702744595670 做完這些操作保存，然后執(zhí)行那三步即可看到效果，不過(guò)可能瀏覽器有緩存，可以清理下緩存再刷新看看。
五：修改博客背景透明度
既然再上一步中修改了背景圖片，如果被NExt本身的白色擋住確實(shí)不好看，我們可以嘗試把本身的白色背景變成透明的，這樣會(huì)美觀很多，同樣還是修改剛才的文件 themes\next\source\css_custom\custom.styl 在上一步的基礎(chǔ)上我們可以添加如下代碼
//改變背景色和透明度
.main-inner {
background: #fff;
opacity: 0.9;
}
其中第一個(gè)屬性為顏色值，第二個(gè)屬性就是我們的透明度啦。適當(dāng)修改，不然會(huì)適得其反連字都看不清啦。做完上兩步就是我的這個(gè)博客的效果。
六：修改作者頭像為圓形，
我們默認(rèn)是方形的頭像，想修改為圓形的話(huà)同樣是上兩步的那個(gè)路徑下添加如下代碼
.site-author-image {
border-radius: 100%;
padding: 2px;
border: 2px dashed #fff;
animation: cycle 2s 0.5s forwards;
transition: border-radius 2s;
}
保存 -> 三步 即可看到效果
[圖片上傳失敗...(image-b8fc62-1517989244362)]
七：添加背景動(dòng)畫(huà)
背景動(dòng)畫(huà)使用Js來(lái)處理，會(huì)JS的同學(xué)可以自己寫(xiě)喜歡的動(dòng)畫(huà)，我這邊就用了網(wǎng)上比較通用的動(dòng)畫(huà)。找到以下路徑 themes\next\layout\_layout.swig 在文章 </body>的上面添加如下代碼
<script type="text/javascript"
color="255,255,255" opacity='1' zIndex="-2" count="100" src="http://cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}
然后 保存 -> 三步即可看到效果 其中src為JS的路徑，有興趣的可以自定義效果。
八：添加評(píng)論頁(yè)面
HEXO的評(píng)論頁(yè)面官方推薦了disqus，無(wú)奈已經(jīng)被墻，即使開(kāi)發(fā)時(shí)候自己有克服的方法但是也不能保證所有看你博客的人都有克服的方法。所有我們打算采用其他的的一些第三方來(lái)實(shí)現(xiàn)，首先先對(duì)市面上的幾個(gè)產(chǎn)品做下對(duì)比：
比較：
- disqus
比較大牌的評(píng)論系統(tǒng)，服務(wù)穩(wěn)定，唯一的缺點(diǎn)是國(guó)內(nèi)無(wú)法使用。暫不考慮
多說(shuō)
國(guó)內(nèi)比較出名的評(píng)論系統(tǒng)，已經(jīng)關(guān)閉服務(wù)暫不考慮。gitment
一款基于github issue的評(píng)論系統(tǒng)，風(fēng)格很像github，只是目前還不是太穩(wěn)定，且界面無(wú)法自定，可能會(huì)于博客有些不協(xié)調(diào)。而且評(píng)論需要github賬號(hào)-
livere
中文名字叫來(lái)必力，是一款韓國(guó)的評(píng)論系統(tǒng)，在不帶有任何民族情感的前提下來(lái)看確實(shí)棒子的東西還是不錯(cuò)的，也是我目前在使用的一款，我主要用它的原因有幾點(diǎn)支持很多種格式的評(píng)論導(dǎo)入，你可以很方便的吧之前在其他平臺(tái)上的評(píng)論數(shù)據(jù)導(dǎo)入進(jìn)來(lái)，支持多種json格式。
簡(jiǎn)介的UI提供多種主題。
國(guó)外的東西不受?chē)?guó)內(nèi)的限制。
集成：
先去livere的官網(wǎng)注冊(cè)m，具體過(guò)程我就不講了，一步一步安她的來(lái)就行，之后他會(huì)給你一個(gè)安裝代碼，像這樣：
[圖片上傳失敗...(image-795328-1517989244362)]
里面主要的信息就是data-uid。
NEXT主題本身是已經(jīng)集成了livere評(píng)論的，只不過(guò)被注釋掉了。找到主題配置文件 _config.yml 找到如下代碼
[圖片上傳失敗...(image-293656-1517989244362)]
打開(kāi)注釋填入你在livere中注冊(cè)后它給你的UID即可。然后 保存 -> 三步即可。
多終端操作
背景
大家都知道HEXO是靜態(tài)博客，所有的頁(yè)面都是靜態(tài)的通過(guò)本地文件渲染然后再部署上去，這就帶來(lái)一個(gè)多終端部署的問(wèn)題，比如公司電腦配置好了，想回家在進(jìn)行寫(xiě)作，發(fā)現(xiàn)家里什么都沒(méi)有還需要重新配置環(huán)境，不過(guò)這倒是次要，關(guān)鍵是如果不能保證兩個(gè)終端的內(nèi)容完全一樣就會(huì)造成服務(wù)器上的數(shù)據(jù)會(huì)被最后一次部署覆蓋，導(dǎo)致前幾次的都被覆蓋掉。
解決
其實(shí)大家應(yīng)該也看出HEXO整體的一套流程下來(lái)就是git的工作流程，不管你用github還是bitbucket都是遵循gitflow的，而gitflow就是一種多終端多人協(xié)同工作的解決方案。所以我們可以用它來(lái)解決多終端同步的問(wèn)題。
流程
我們先來(lái)了解下hexo的整體流程。我們正常的為文件夾結(jié)構(gòu)如圖：
[圖片上傳失敗...(image-b1f92e-1517989244362)]
第一步：hexo g
source文件夾下存放著我們的文章，tag、歸檔之類(lèi)的信息，也就是我們的博客的內(nèi)容。當(dāng)我們?cè)诮K端執(zhí)行 hexo g 的時(shí)候會(huì)被source中的文件按照某種規(guī)則方式渲染成靜態(tài)的頁(yè)面文件放到public中：
[圖片上傳失敗...(image-e20d2c-1517989244362)]
第二步：hexo d
然后我們執(zhí)行 hexo d 這一步暫時(shí)我們可以認(rèn)為就是對(duì)public中的文件進(jìn)行push到我們的git倉(cāng)庫(kù)的過(guò)程。所以在我們的倉(cāng)庫(kù)中 XXXXXX.bitbucket.io 大家看到的文件只有public中的文件。
附加：hexo clean
其實(shí)這一步是和gitflow沒(méi)有關(guān)系的，但是既然講到流程我這邊也在說(shuō)下，之前說(shuō)過(guò)這步是用來(lái)清理緩存的，其實(shí)他的作用是運(yùn)行在第一步之前，將整個(gè)public文件刪除，然后我們?cè)賵?zhí)行 hexo g 重新渲染進(jìn)public，之后再 hexo d 進(jìn)行部署，這樣就避免之前的內(nèi)容對(duì)我們?cè)斐捎绊憽?/p>
具體操作
通過(guò)上一步流程我們知道如果git服務(wù)器上只有public是不夠的，我們需要有我們整個(gè)博客文件夾下的所有文件才能進(jìn)行多終端操作。所有這邊有兩個(gè)方法：
新建另一個(gè)倉(cāng)庫(kù)我們暫時(shí)命名為MyProject，把我們所有的文件傳到這個(gè)Git倉(cāng)庫(kù)上，當(dāng)我們換另一臺(tái)電腦時(shí)候我們直接拉這個(gè)新倉(cāng)庫(kù)的代碼然后進(jìn)行寫(xiě)作 -> 三步走最后在將所有文件推到MyProject以后所有的git操作都在這個(gè)倉(cāng)庫(kù)中進(jìn)行。
git給我們提供了多分支操作，我們可以做xxxx.github.io這個(gè)倉(cāng)庫(kù)中創(chuàng)建一個(gè)新的分支暫時(shí)命名為hexo分支，這個(gè)分支的作用和上一個(gè)方法里MyProject的作用以及里面的文件一模一樣，只不過(guò)我們這個(gè)方法就省的我們?cè)賱?chuàng)建一個(gè)倉(cāng)庫(kù)了。以后所有的git操作都去這個(gè)分支進(jìn)行，本地的文件一直保持在這個(gè)分支就行，不過(guò)有一點(diǎn)需要注意的就是，即使所有的操作都在hexo分支下進(jìn)行也必須保證master分支為主分支(default branch)，不然你就打不開(kāi)你的博客了。
以上兩種都是屬于基本的git操作，本文不再贅述。不過(guò)有一點(diǎn)這里要強(qiáng)調(diào)下，還記一開(kāi)始我跟大家說(shuō)的主題的是推薦大家直接去主題所在的repo下載zip然后解壓拖進(jìn)博客目錄里面嗎？如果你不是拖拽進(jìn)來(lái)的而是clone下來(lái)的話(huà)在這一步你會(huì)涉及到git的 add submodule操作。其實(shí)操作不難，具體的命令網(wǎng)上也是大把。不過(guò)如果你像我一樣使用bitbucket的話(huà)可能發(fā)現(xiàn)無(wú)法進(jìn)行submodule操作，不知道這個(gè)是bitbucket的BUG還是什么其他原因，同樣的命令使用github托管博客的時(shí)候是沒(méi)有問(wèn)題的，而bitbucket就不行，當(dāng)你使用另一臺(tái)電腦的進(jìn)行拉去的時(shí)候執(zhí)行 git submodule init 操作的時(shí)候他會(huì)提示找不到。至今未解決，如果哪位大神有什么方法及時(shí)聯(lián)系我。
綁定個(gè)人域名
<font color=red>注意：bitbucket 從2015年開(kāi)始關(guān)閉了個(gè)人博客自定義域名的功能，也就是說(shuō)如果你是按照上面操作把個(gè)人博客部署在bitbucket中的話(huà)就無(wú)法使用自己的域名，關(guān)于這一點(diǎn)bitbucket文檔已經(jīng)有明顯的說(shuō)明</font>
[圖片上傳失敗...(image-984603-1517989244362)]
準(zhǔn)備工作
在github上創(chuàng)建倉(cāng)庫(kù)，倉(cāng)庫(kù)的名字為 username.github.io。然后修改站點(diǎn)配置文件中部署地址（repo對(duì)應(yīng)的字段），將原本的bitbucket的倉(cāng)庫(kù)地址改為github的地址
[圖片上傳失敗...(image-64560c-1517989244362)]
之后進(jìn)行保存然后三步走，部署成功后你的博客就從bitbucket上遷移到github中了，這樣一來(lái)，你整體的博客倉(cāng)庫(kù)還是在bitbucket中的私有庫(kù)中，但是public文件夾中的公開(kāi)文件已經(jīng)被你部署到github的倉(cāng)庫(kù)中。該保密的信息仍然保密，同時(shí)也不影響你綁定自己的域名，一舉兩得。正常情況下按照上面步驟完成后的博客地址是 xxx.github.io，下面就開(kāi)始綁定自己的域名。
域名購(gòu)買(mǎi)
這個(gè)渠道有很多，我就不再一一贅述，我這邊以阿里云的萬(wàn)網(wǎng)域名購(gòu)買(mǎi)為例,找到合適自己的域名
[圖片上傳失敗...(image-c64667-1517989244362)]
域名解析
購(gòu)買(mǎi)域名并且按照他的步驟實(shí)名認(rèn)證之后，需要把域名解析到我們的博客中，在阿里云的控制臺(tái)找到域名右側(cè)對(duì)應(yīng)的解析按鈕。點(diǎn)擊然后添加解析
[圖片上傳失敗...(image-c4323a-1517989244362)]
[圖片上傳失敗...(image-cd952d-1517989244362)]
然后按照如下填寫(xiě)添加解析，記得把記錄值替換成你自己的博客地址
[圖片上傳失敗...(image-d1911f-1517989244362)]
之后記得啟用該記錄，不過(guò)如果你像我一樣是阿里云購(gòu)買(mǎi)并且配置的話(huà)是不需要啟用的，默認(rèn)幫你啟用。
倉(cāng)庫(kù)配置
然后回到你的github倉(cāng)庫(kù)，進(jìn)入你的倉(cāng)庫(kù)設(shè)置頁(yè)面，找到如下字段，在紅框處添加你的域名，然后保存即可
[圖片上傳失敗...(image-d18d39-1517989244362)]
博客配置
回到你的博客目錄，在source目錄下創(chuàng)建一個(gè)<font color=red>不帶任何后綴的</font>文件，命名為 CNAME，里面填寫(xiě)你的域名，我是這樣，只添加你的域名不要添加其他東西。然后保存 執(zhí)行三步之后就可以通過(guò)你的域名訪問(wèn)你的博客啦，如果不能訪問(wèn)可能是因?yàn)檫\(yùn)營(yíng)商DNS緩存問(wèn)題。等幾分鐘就可以了。
[圖片上傳失敗...(image-3722c6-1517989244362)]
實(shí)現(xiàn)https協(xié)議
按照以上步驟完成后可以通過(guò)域名訪問(wèn)，但是有個(gè)問(wèn)題就是如果你用谷歌瀏覽器或者Safari，他就會(huì)提示你網(wǎng)站不被信任，只有你點(diǎn)擊仍要繼續(xù)才會(huì)展示你的博客，并且地址欄里面還是有個(gè)紅色的×，雖說(shuō)不影響使用和閱讀，但是還是感覺(jué)別扭，這次我們來(lái)講如何將自己的博客協(xié)議改為Https。這里有幾種方法：
購(gòu)買(mǎi)證書(shū)
使用免費(fèi)CA證書(shū)。騰訊云阿里云都有提供。不過(guò)有時(shí)間限制
使用CDN進(jìn)行反向代理
如果使用上兩步的話(huà)基本上證書(shū)的服務(wù)商都會(huì)告訴你如何配置，他們的文檔講的一定比我的詳細(xì)，不過(guò)主要原因是我們使用的github Page是不支持上傳證書(shū)的，所以這里主要說(shuō)下第三步，通過(guò)CDN配置反向代理，這里就需要用到一個(gè)國(guó)外的CDN服務(wù)提供商Cloudflare:
[圖片上傳失敗...(image-d2b256-1517989244362)]
原理
Cloudflare 提供DNS解析服務(wù)，而且速度很快，在阿里云半個(gè)小時(shí)才能生效的解析在它這里瞬間就生效，它提供了免費(fèi)的https服務(wù)(但不是應(yīng)用SSL證書(shū))。實(shí)現(xiàn)模式就是，用戶(hù)到CDN服務(wù)器的連接為https，而CDN服務(wù)器到GithubPage服務(wù)器的連接為http，就是在CDN服務(wù)器那里加上反向代理。
[圖片上傳失敗...(image-8a229d-1517989244362)]
用戶(hù)看到的小鎖其實(shí)是用戶(hù)連接到Cloudflare的證書(shū)，而由Cloudflare到github是沒(méi)有https的，不過(guò)對(duì)于我們靜態(tài)博客已經(jīng)夠了。
配置
第一步：
還是先去官網(wǎng)注冊(cè)，然后添加你的域名，注意添加的是你購(gòu)買(mǎi)的域名。
第二步：
進(jìn)入DNS解析界面填入如下解析，因?yàn)槲覀兪褂胏louldflare做DNS解析所以一會(huì)我們需要把我們購(gòu)買(mǎi)域名的那個(gè)地方的解析刪掉。
[圖片上傳失敗...(image-ea9f1a-1517989244362)]
其中前兩個(gè)是使你的域名指向github的服務(wù)器地址，github文檔中給的就是這個(gè)兩個(gè)地址，最后那個(gè)CNAME記錄指向的是你的github倉(cāng)庫(kù)域名username.github.io。一定要嚴(yán)格按照這個(gè)來(lái)配置。
第三步：
記錄下cloudflare給你的DNS解析服務(wù)器，就在上一步那個(gè)頁(yè)面下邊，用這個(gè)記錄去把你域名購(gòu)買(mǎi)處（我的是阿里云）的DNS解析服務(wù)器替換掉，同時(shí)刪掉阿里云里面的DNS解析記錄，因?yàn)槲覀円院缶涂縞louleflare來(lái)解析DNS啦。
[圖片上傳失敗...(image-be875a-1517989244362)]
[圖片上傳失敗...(image-d9e9e3-1517989244362)]
[圖片上傳失敗...(image-b0c9a3-1517989244362)]
第四步：
回到clouldflare 上面選擇crypto選項(xiàng)然后下面選擇full或者是Flexible
[圖片上傳失敗...(image-54f46f-1517989244362)]
選項(xiàng)中幾個(gè)的區(qū)別如下圖
[圖片上傳失敗...(image-c690c2-1517989244362)]
最后那個(gè)是需要證書(shū)支持的。然后滾動(dòng)到下面打開(kāi)always use HTTPS開(kāi)關(guān)
[圖片上傳失敗...(image-6105d2-1517989244362)]
第五步：
以上步驟配置好之后基本就完成了，但是如果直接有人在地址欄里面輸入http://XXXXX 進(jìn)入你的博客的話(huà)你這邊還是會(huì)出現(xiàn)非Https的效果，所以我們這里要做一個(gè)強(qiáng)制跳轉(zhuǎn)。
[圖片上傳失敗...(image-596cc4-1517989244362)]
這樣就萬(wàn)無(wú)一失了。
坑點(diǎn)：
我之前按照以上步驟操作完成后發(fā)現(xiàn)首頁(yè)雖然是https了也不顯示紅叉了，但是也沒(méi)有顯示綠色的小鎖，而是一個(gè)嘆號(hào)，但是有些博文頁(yè)面可以正常顯示https綠鎖。后來(lái)發(fā)現(xiàn)是因?yàn)楫?dāng)前頁(yè)面中有非https的鏈接導(dǎo)致，比如圖片圖床不是https的，或者評(píng)論插件不支持https，不過(guò)我博客中使用的來(lái)必力評(píng)論是支持https，只是我當(dāng)時(shí)的圖床無(wú)都是http所以只能是顯示嘆號(hào)了，后來(lái)把所有圖片圖床換成https的就好啦。
最后
整篇文章只有開(kāi)始一小部分在講解如何搭建博客，后續(xù)的基本都是交給大家如何優(yōu)化，調(diào)整一些細(xì)節(jié)問(wèn)題如UI、用戶(hù)體驗(yàn)之類(lèi)的，當(dāng)然我們能做的遠(yuǎn)遠(yuǎn)不止這些，如果有什么問(wèn)題歡迎與我探討。下面的留言我都會(huì)看的。此外當(dāng)本人對(duì)HEXO有新的看法或者玩法的話(huà)該文章會(huì)不斷的更新，希望大家關(guān)注我的小站，感謝。
