不知道為什么部分圖片上傳失敗干像，一直上傳不成功帅腌，如果有需要大家可以去我的小站觀看
背景
作為一個開發(fā)者不能沒有博客，最近花了幾天的時間搭建了這個博客麻汰，處理了很多細節(jié)速客，在這篇文章中我會把我從開始到現(xiàn)在以及后續(xù)的優(yōu)化整理出來，幫助更多的人搭建五鲫、維護溺职、更新、自己的博客位喂。
[圖片上傳失敗...(image-a6d642-1517989244362)]
一開始我所有的博客都寫在新浪微博浪耘，因為微博上更容易推廣自己的文章，微博用戶量大塑崖，但是后來微博的弊端慢慢的顯示出來了七冲，畢竟不是開發(fā)者的天地，我的博客中經(jīng)常會插入大量的代碼弃舒，而微博不支持markdown編輯癞埠，普通的編輯器對代碼塊的兼容性非常差状原，別說高亮了聋呢，有時候排版都會錯亂，最后外觀很不好看颠区，如下圖：
而且微博的賬號系統(tǒng)也存在一定的弊端削锰，所以后來轉(zhuǎn)向簡書、掘金等技術(shù)平臺毕莱，不得不承認相對于微博來說這些平臺對開發(fā)者就要友好多了器贩，不過后來又發(fā)現(xiàn)一個問題。因為我在寫文章的時候使用的是本地的markdown編輯器朋截，而這些平臺對markdown語法的一些小細節(jié)并不嚴謹或者說統(tǒng)一如下圖：
兩個平臺的編輯器無法做到統(tǒng)一蛹稍，以至于每次寫完文章都需要針對兩個平臺做不同的修改。
綜上所述部服，最簡單的也最一勞永逸的方法就是搭建自己的博客平臺唆姐，而HEXO很好的幫我們解決了這個問題，其實對于一個開發(fā)者來說并不是什么難事廓八，整個流程對于大部分有代碼基礎(chǔ)的開發(fā)者來說一上午時間就可以搞定奉芦，不過最難的也是最頭痛的就是對細節(jié)的調(diào)整，對UI的修改剧蹂、優(yōu)化等声功，不過本文會對此逐一講解。
環(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
一般的開發(fā)者不會沒有這個吧，我是安裝Xcode就會有這個了，
使用 Homebrew, MacPorts ：brew install git;或下載 安裝程序 安裝
一般都會使用HEXO+GitHub page的形式搭建自己的博客伸蚯，但是這里有個問題就是GitHub是開源的醋闭，任何人都能在上面看到你的源代碼，雖然這并沒有什么太大的影響朝卒，不過對于我來說感覺怪怪的证逻，所以我就用了bitbucket page來處理我的博客，所有的東西都一樣只不過這個是個私有庫罷了（免費五個人）
[圖片上傳失敗...(image-e0b2dc-1517989244362)]
開始建站
第一步：創(chuàng)建倉庫
進入github/bitbucket（后續(xù)都以github為例）新建repo抗斤，這里要注意repo的名字一定要滿足your Account Name/github.io囚企。如果是bitbucket那就是your Account Name/bitbucket.io，因為只有這樣的倉庫名稱最后才能以靜態(tài)頁面展示瑞眼。如圖：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)是這樣（只列出幾個必要的文件夾及其子目錄）
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
_config.yml：
其中我們以后的大部分操作都會在_config.yml中進行伤疙，這個文件是我們的站點的配置文件银酗。scaffolds：
模板文件，規(guī)定了我們創(chuàng)建一篇文章的時候最開始的樣子徒像，source：
可以暫時的理解成我們文章的存放處themes：
主題文件
第三步：部署到Git
修改我們的的站點配置文件_config.yml中如下字段
[圖片上傳失敗...(image-2a6825-1517989244362)]
其中：
type值對應(yīng)的是你所部署的的服務(wù)器類型黍特，我們這里填寫git就可以。repo是你的倉庫地址锯蛀，也就是倉庫克隆的地址灭衷，推薦用https的鏈接。branch不寫默認是master旁涤，通常我們寫成master就可以翔曲。
以上配置完成后保存 然后回到終端執(zhí)行npm install hexo-deployer-git --save安裝一個插件，這樣才能將你寫好的文章部署到github服務(wù)器上并讓別人瀏覽到劈愚。安裝完成后在終端中依次執(zhí)行如下代碼(為了簡單后續(xù)統(tǒng)稱為三步)
hexo clean清理緩存hexo generate進行渲染 簡寫hexo ghexo server部署到本地(調(diào)試使用) 簡寫hexo s瞳遍。然后瀏覽器輸入http://localhost:4000就可以看到你博客的效果啦，不過這是本地調(diào)試用菌羽，其他人是看不到的掠械。(調(diào)試完畢后記得control + C關(guān)閉本地端口，不然下次就進不去啦)調(diào)試完畢后使用
hexo deploy簡寫為hexo d來部署到git服務(wù)器算凿。
執(zhí)行完以上操作后打開瀏覽器地址了輸入http://你github名字.github.io就可以看看到效果啦份蝴，這回是所有人都能看到的，用手機也可以氓轰。至此第三步已經(jīng)完成,最終的結(jié)果如下圖：
[圖片上傳失敗...(image-92c5da-1517989244362)]
第四步：寫文章
使用如下命令 hexo new post “文章名字” 就可新建文章啦婚夫，建立好的文章在 source/_posts 中，你可以用markdown語法編輯內(nèi)容就可以署鸡。編輯完成后執(zhí)行第三步中終端的操作就可以啦案糙，刷新下瀏覽器就可看到你的新文章啦限嫌。如下圖:
[圖片上傳失敗...(image-bed833-1517989244362)]
個性化
一：主題
獲取
主題是我么個性化的基礎(chǔ)和前提，我們想做任何個性化上的修改基本上都是在我們主題上的修改时捌，先找到一個自己滿意的主題是首要任務(wù)怒医。關(guān)于主題網(wǎng)上有很多很多，HEXO官方的主題目錄也收錄了好多來著世界各地開發(fā)者的主題奢讨≈商荆或者開發(fā)者也可以直接去網(wǎng)上搜索HEXO theme關(guān)鍵字來獲取主題。
安裝
主題一般都是repo拿诸，只要講起clone到博客目錄themes/XXXX下就可了扒袖，XXXX對應(yīng)的就是你給主題起的名字，像這樣：git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet 這樣就可以保證每次主題的作者有更新了我們就可以 pull獲取更新亩码。不過這樣有個問題后面我會在HEXO多終端同步一欄講到季率，所以這里我們選擇另一種方式去安裝，就是直接把主題的repo下載下來
然后解壓放到themes中描沟。其實對于已經(jīng)穩(wěn)定的主題作者一般不會頻繁更新飒泻，不穩(wěn)定的主題我們也不會用，所以用后者安裝也是一樣的吏廉。
然后我們回到剛才的站點配置文件中_config.yml修改如下字段泞遗，對應(yīng)的名字就是你剛才那個主題文件夾的名字：我這邊是next，
[圖片上傳失敗...(image-ab7a4c-1517989244362)]
然后保存迟蜜，再去終端執(zhí)行那三步刹孔，接著刷新網(wǎng)頁就可以看到新的界面啦。下面是我換了NEXT主題刷新后的效果娜睛。因為該注意已經(jīng)非常完善，所有后續(xù)用該主題做例子來講
[圖片上傳失敗...(image-af4ce3-1517989244362)]
二：主題菜單
添加按鈕
主題菜單也可以說是主題按鈕卦睹。也就是上面頂部的兩個畦戒，next主題默認的兩個是Home、Archive结序，我們一般會加上tag about category等障斋。這些都是需要在主題上進行修改，我們需要修改主題的配置文件徐鹤，首先在主題的文件夾下找到_config.yml文件垃环，沒錯和之前的站點配置文件同名，只不過他們的路徑不同返敬，大家千萬不要弄混遂庄，站點配置文件是配置站點通用的東西，而主題配置文件是配置一些主題的元素劲赠。在主題配置文件找到menu字段
[圖片上傳失敗...(image-2220fe-1517989244362)]
可以看到主題作者注釋掉了一部分按鈕只保留了兩個最基本的涛目，這里需要注意前面的Key并不是代表的是按鈕名字秸谢，因為該主題是支持多語言，所以這個key只是個標(biāo)識霹肝，具體的按鈕名字要去該路徑下查找
[圖片上傳失敗...(image-a8242e-1517989244362)]
其中每一個文件對應(yīng)了不同的語言估蹄，我們以漢語為例，進入zh-Hans.yml中修改這些字段
[圖片上傳失敗...(image-82bc96-1517989244362)]
其中key就是之前我們在主題配置文件中的key沫换，而后面的value則是簡體中文狀態(tài)下按鈕的名字臭蚁。修改完成后我們保存執(zhí)行那三步就可以看到我們新添加的按鈕了。
添加頁面
添加按鈕后我們需要點擊按鈕顯示統(tǒng)一的頁面讯赏。這時候我們需要添加頁面刊棕。以tag頁面為例，hexo中添加頁面的命令是hexo new page XXXXX 后面XXX則是要添加頁面的名稱待逞，我們這里寫tags甥角。為了測試新建的tag頁面我們對之前的頁面添加個tag。去 source/_post中找一篇文章我們在開頭添加如下字段,多標(biāo)簽以此類推
[圖片上傳失敗...(image-a80002-1517989244362)]
然后編輯我們剛才生成的tag頁面(source/tags/index.md)指定其type為tags
[圖片上傳失敗...(image-1ac6fa-1517989244362)]
然后保存執(zhí)行那三步就會有如下效果
[圖片上傳失敗...(image-9e1eea-1517989244362)]
點擊對應(yīng)的tag即可跳轉(zhuǎn)到改tag所對應(yīng)的文章识樱。其他頁面同理嗤无。
三：添加閱讀更多button
我們在首頁的時候其實就是我們的文章列表，但是這時候有個問題怜庸，如果我們某一篇或者某幾篇文章很長当犯，那首頁是不是更長呢？其實在首頁我們可以只顯示文章部分內(nèi)容割疾，通過點擊閱讀更多按鈕來進入文章詳情嚎卫。這個時候就需要截斷文章。我們在文章的合適地方采用``來截斷,用默認文章來看
[圖片上傳失敗...(image-d25afc-1517989244362)]
然后執(zhí)行那三步就會如下效果
[圖片上傳失敗...(image-4086d9-1517989244362)]
點擊閱讀更多宏榕。
四：更改主題背景
首先找到如下路徑 themes\next\source\css_custom\custom.styl 會發(fā)現(xiàn)里面是空的拓诸，這個文件是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)該就可以看出括號里面的圖片路徑就是我們的背景圖片奠支，我們只需把圖片放入 themes\next\source\images 中即可，記住圖片名字要寫對抚芦，要有后綴倍谜。同理括號里面我們可以直接放一個圖片的鏈接比如 https://tpc.googlesyndication.com/simgad/6893153702744595670 做完這些操作保存，然后執(zhí)行那三步即可看到效果叉抡，不過可能瀏覽器有緩存尔崔，可以清理下緩存再刷新看看。
五：修改博客背景透明度
既然再上一步中修改了背景圖片褥民，如果被NExt本身的白色擋住確實不好看季春，我們可以嘗試把本身的白色背景變成透明的，這樣會美觀很多轴捎，同樣還是修改剛才的文件 themes\next\source\css_custom\custom.styl 在上一步的基礎(chǔ)上我們可以添加如下代碼
//改變背景色和透明度
.main-inner {
background: #fff;
opacity: 0.9;
}
其中第一個屬性為顏色值鹤盒，第二個屬性就是我們的透明度啦蚕脏。適當(dāng)修改，不然會適得其反連字都看不清啦侦锯。做完上兩步就是我的這個博客的效果驼鞭。
六：修改作者頭像為圓形，
我們默認是方形的頭像尺碰，想修改為圓形的話同樣是上兩步的那個路徑下添加如下代碼
.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)]
七：添加背景動畫
背景動畫使用Js來處理挣棕，會JS的同學(xué)可以自己寫喜歡的動畫，我這邊就用了網(wǎng)上比較通用的動畫亲桥。找到以下路徑 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的路徑洛心，有興趣的可以自定義效果。
八：添加評論頁面
HEXO的評論頁面官方推薦了disqus题篷，無奈已經(jīng)被墻词身，即使開發(fā)時候自己有克服的方法但是也不能保證所有看你博客的人都有克服的方法。所有我們打算采用其他的的一些第三方來實現(xiàn)番枚，首先先對市面上的幾個產(chǎn)品做下對比：
比較：
- disqus
比較大牌的評論系統(tǒng)法严，服務(wù)穩(wěn)定，唯一的缺點是國內(nèi)無法使用葫笼。暫不考慮
多說
國內(nèi)比較出名的評論系統(tǒng)深啤，已經(jīng)關(guān)閉服務(wù)暫不考慮。gitment
一款基于github issue的評論系統(tǒng)路星，風(fēng)格很像github溯街，只是目前還不是太穩(wěn)定，且界面無法自定洋丐，可能會于博客有些不協(xié)調(diào)呈昔。而且評論需要github賬號-
livere
中文名字叫來必力，是一款韓國的評論系統(tǒng)垫挨，在不帶有任何民族情感的前提下來看確實棒子的東西還是不錯的韩肝，也是我目前在使用的一款，我主要用它的原因有幾點支持很多種格式的評論導(dǎo)入九榔，你可以很方便的吧之前在其他平臺上的評論數(shù)據(jù)導(dǎo)入進來，支持多種json格式涡相。
簡介的UI提供多種主題哲泊。
國外的東西不受國內(nèi)的限制缸血。
集成：
先去livere的官網(wǎng)注冊m拟枚，具體過程我就不講了搞莺，一步一步安她的來就行舷手，之后他會給你一個安裝代碼举反，像這樣：
[圖片上傳失敗...(image-795328-1517989244362)]
里面主要的信息就是data-uid侨核。
NEXT主題本身是已經(jīng)集成了livere評論的次洼，只不過被注釋掉了敢伸。找到主題配置文件 _config.yml 找到如下代碼
[圖片上傳失敗...(image-293656-1517989244362)]
打開注釋填入你在livere中注冊后它給你的UID即可。然后 保存 -> 三步即可喳魏。
多終端操作
背景
大家都知道HEXO是靜態(tài)博客棉浸，所有的頁面都是靜態(tài)的通過本地文件渲染然后再部署上去，這就帶來一個多終端部署的問題刺彩，比如公司電腦配置好了迷郑，想回家在進行寫作，發(fā)現(xiàn)家里什么都沒有還需要重新配置環(huán)境创倔，不過這倒是次要嗡害，關(guān)鍵是如果不能保證兩個終端的內(nèi)容完全一樣就會造成服務(wù)器上的數(shù)據(jù)會被最后一次部署覆蓋，導(dǎo)致前幾次的都被覆蓋掉畦攘。
解決
其實大家應(yīng)該也看出HEXO整體的一套流程下來就是git的工作流程霸妹，不管你用github還是bitbucket都是遵循gitflow的，而gitflow就是一種多終端多人協(xié)同工作的解決方案知押。所以我們可以用它來解決多終端同步的問題叹螟。
流程
我們先來了解下hexo的整體流程。我們正常的為文件夾結(jié)構(gòu)如圖：
[圖片上傳失敗...(image-b1f92e-1517989244362)]
第一步：hexo g
source文件夾下存放著我們的文章朗徊，tag首妖、歸檔之類的信息，也就是我們的博客的內(nèi)容爷恳。當(dāng)我們在終端執(zhí)行 hexo g 的時候會被source中的文件按照某種規(guī)則方式渲染成靜態(tài)的頁面文件放到public中：
[圖片上傳失敗...(image-e20d2c-1517989244362)]
第二步：hexo d
然后我們執(zhí)行 hexo d 這一步暫時我們可以認為就是對public中的文件進行push到我們的git倉庫的過程有缆。所以在我們的倉庫中 XXXXXX.bitbucket.io 大家看到的文件只有public中的文件。
附加：hexo clean
其實這一步是和gitflow沒有關(guān)系的温亲，但是既然講到流程我這邊也在說下棚壁，之前說過這步是用來清理緩存的，其實他的作用是運行在第一步之前栈虚，將整個public文件刪除袖外，然后我們再執(zhí)行 hexo g 重新渲染進public，之后再 hexo d 進行部署魂务，這樣就避免之前的內(nèi)容對我們造成影響曼验。
具體操作
通過上一步流程我們知道如果git服務(wù)器上只有public是不夠的，我們需要有我們整個博客文件夾下的所有文件才能進行多終端操作粘姜。所有這邊有兩個方法：
新建另一個倉庫我們暫時命名為MyProject鬓照，把我們所有的文件傳到這個Git倉庫上，當(dāng)我們換另一臺電腦時候我們直接拉這個新倉庫的代碼然后進行寫作 -> 三步走最后在將所有文件推到MyProject以后所有的git操作都在這個倉庫中進行孤紧。
git給我們提供了多分支操作豺裆，我們可以做xxxx.github.io這個倉庫中創(chuàng)建一個新的分支暫時命名為hexo分支，這個分支的作用和上一個方法里MyProject的作用以及里面的文件一模一樣号显，只不過我們這個方法就省的我們再創(chuàng)建一個倉庫了臭猜。以后所有的git操作都去這個分支進行躺酒，本地的文件一直保持在這個分支就行，不過有一點需要注意的就是蔑歌，即使所有的操作都在hexo分支下進行也必須保證master分支為主分支(default branch)羹应，不然你就打不開你的博客了。
以上兩種都是屬于基本的git操作丐膝，本文不再贅述量愧。不過有一點這里要強調(diào)下，還記一開始我跟大家說的主題的是推薦大家直接去主題所在的repo下載zip然后解壓拖進博客目錄里面嗎帅矗？如果你不是拖拽進來的而是clone下來的話在這一步你會涉及到git的 add submodule操作偎肃。其實操作不難，具體的命令網(wǎng)上也是大把浑此。不過如果你像我一樣使用bitbucket的話可能發(fā)現(xiàn)無法進行submodule操作累颂，不知道這個是bitbucket的BUG還是什么其他原因，同樣的命令使用github托管博客的時候是沒有問題的凛俱，而bitbucket就不行紊馏，當(dāng)你使用另一臺電腦的進行拉去的時候執(zhí)行 git submodule init 操作的時候他會提示找不到。至今未解決蒲犬，如果哪位大神有什么方法及時聯(lián)系我朱监。
綁定個人域名
<font color=red>注意：bitbucket 從2015年開始關(guān)閉了個人博客自定義域名的功能，也就是說如果你是按照上面操作把個人博客部署在bitbucket中的話就無法使用自己的域名原叮，關(guān)于這一點bitbucket文檔已經(jīng)有明顯的說明</font>
[圖片上傳失敗...(image-984603-1517989244362)]
準(zhǔn)備工作
在github上創(chuàng)建倉庫赫编，倉庫的名字為 username.github.io。然后修改站點配置文件中部署地址（repo對應(yīng)的字段）奋隶，將原本的bitbucket的倉庫地址改為github的地址
[圖片上傳失敗...(image-64560c-1517989244362)]
之后進行保存然后三步走擂送，部署成功后你的博客就從bitbucket上遷移到github中了，這樣一來唯欣，你整體的博客倉庫還是在bitbucket中的私有庫中嘹吨，但是public文件夾中的公開文件已經(jīng)被你部署到github的倉庫中。該保密的信息仍然保密境氢，同時也不影響你綁定自己的域名蟀拷，一舉兩得。正常情況下按照上面步驟完成后的博客地址是 xxx.github.io萍聊，下面就開始綁定自己的域名匹厘。
域名購買
這個渠道有很多，我就不再一一贅述脐区，我這邊以阿里云的萬網(wǎng)域名購買為例,找到合適自己的域名
[圖片上傳失敗...(image-c64667-1517989244362)]
域名解析
購買域名并且按照他的步驟實名認證之后，需要把域名解析到我們的博客中她按，在阿里云的控制臺找到域名右側(cè)對應(yīng)的解析按鈕牛隅。點擊然后添加解析
[圖片上傳失敗...(image-c4323a-1517989244362)]
[圖片上傳失敗...(image-cd952d-1517989244362)]
然后按照如下填寫添加解析炕柔，記得把記錄值替換成你自己的博客地址
[圖片上傳失敗...(image-d1911f-1517989244362)]
之后記得啟用該記錄，不過如果你像我一樣是阿里云購買并且配置的話是不需要啟用的媒佣，默認幫你啟用匕累。
倉庫配置
然后回到你的github倉庫，進入你的倉庫設(shè)置頁面默伍，找到如下字段欢嘿，在紅框處添加你的域名，然后保存即可
[圖片上傳失敗...(image-d18d39-1517989244362)]
博客配置
回到你的博客目錄也糊，在source目錄下創(chuàng)建一個<font color=red>不帶任何后綴的</font>文件炼蹦，命名為 CNAME，里面填寫你的域名狸剃，我是這樣掐隐，只添加你的域名不要添加其他東西。然后保存 執(zhí)行三步之后就可以通過你的域名訪問你的博客啦钞馁，如果不能訪問可能是因為運營商DNS緩存問題虑省。等幾分鐘就可以了。
[圖片上傳失敗...(image-3722c6-1517989244362)]
實現(xiàn)https協(xié)議
按照以上步驟完成后可以通過域名訪問僧凰，但是有個問題就是如果你用谷歌瀏覽器或者Safari探颈，他就會提示你網(wǎng)站不被信任，只有你點擊仍要繼續(xù)才會展示你的博客训措，并且地址欄里面還是有個紅色的×伪节，雖說不影響使用和閱讀，但是還是感覺別扭隙弛，這次我們來講如何將自己的博客協(xié)議改為Https架馋。這里有幾種方法：
購買證書
使用免費CA證書。騰訊云阿里云都有提供全闷。不過有時間限制
使用CDN進行反向代理
如果使用上兩步的話基本上證書的服務(wù)商都會告訴你如何配置叉寂，他們的文檔講的一定比我的詳細，不過主要原因是我們使用的github Page是不支持上傳證書的总珠，所以這里主要說下第三步屏鳍，通過CDN配置反向代理，這里就需要用到一個國外的CDN服務(wù)提供商Cloudflare:
[圖片上傳失敗...(image-d2b256-1517989244362)]
原理
Cloudflare 提供DNS解析服務(wù)局服，而且速度很快钓瞭，在阿里云半個小時才能生效的解析在它這里瞬間就生效，它提供了免費的https服務(wù)(但不是應(yīng)用SSL證書)淫奔。實現(xiàn)模式就是山涡，用戶到CDN服務(wù)器的連接為https，而CDN服務(wù)器到GithubPage服務(wù)器的連接為http，就是在CDN服務(wù)器那里加上反向代理鸭丛。
[圖片上傳失敗...(image-8a229d-1517989244362)]
用戶看到的小鎖其實是用戶連接到Cloudflare的證書竞穷，而由Cloudflare到github是沒有https的，不過對于我們靜態(tài)博客已經(jīng)夠了鳞溉。
配置
第一步：
還是先去官網(wǎng)注冊瘾带，然后添加你的域名，注意添加的是你購買的域名熟菲。
第二步：
進入DNS解析界面填入如下解析看政，因為我們使用clouldflare做DNS解析所以一會我們需要把我們購買域名的那個地方的解析刪掉。
[圖片上傳失敗...(image-ea9f1a-1517989244362)]
其中前兩個是使你的域名指向github的服務(wù)器地址抄罕，github文檔中給的就是這個兩個地址允蚣，最后那個CNAME記錄指向的是你的github倉庫域名username.github.io。一定要嚴格按照這個來配置贞绵。
第三步：
記錄下cloudflare給你的DNS解析服務(wù)器厉萝，就在上一步那個頁面下邊，用這個記錄去把你域名購買處（我的是阿里云）的DNS解析服務(wù)器替換掉榨崩，同時刪掉阿里云里面的DNS解析記錄谴垫，因為我們以后就靠clouleflare來解析DNS啦。
[圖片上傳失敗...(image-be875a-1517989244362)]
[圖片上傳失敗...(image-d9e9e3-1517989244362)]
[圖片上傳失敗...(image-b0c9a3-1517989244362)]
第四步：
回到clouldflare 上面選擇crypto選項然后下面選擇full或者是Flexible
[圖片上傳失敗...(image-54f46f-1517989244362)]
選項中幾個的區(qū)別如下圖
[圖片上傳失敗...(image-c690c2-1517989244362)]
最后那個是需要證書支持的母蛛。然后滾動到下面打開always use HTTPS開關(guān)
[圖片上傳失敗...(image-6105d2-1517989244362)]
第五步：
以上步驟配置好之后基本就完成了翩剪，但是如果直接有人在地址欄里面輸入http://XXXXX 進入你的博客的話你這邊還是會出現(xiàn)非Https的效果，所以我們這里要做一個強制跳轉(zhuǎn)彩郊。
[圖片上傳失敗...(image-596cc4-1517989244362)]
這樣就萬無一失了前弯。
坑點：
我之前按照以上步驟操作完成后發(fā)現(xiàn)首頁雖然是https了也不顯示紅叉了，但是也沒有顯示綠色的小鎖秫逝，而是一個嘆號恕出，但是有些博文頁面可以正常顯示https綠鎖。后來發(fā)現(xiàn)是因為當(dāng)前頁面中有非https的鏈接導(dǎo)致违帆，比如圖片圖床不是https的浙巫，或者評論插件不支持https，不過我博客中使用的來必力評論是支持https刷后，只是我當(dāng)時的圖床無都是http所以只能是顯示嘆號了的畴，后來把所有圖片圖床換成https的就好啦。
最后
整篇文章只有開始一小部分在講解如何搭建博客尝胆，后續(xù)的基本都是交給大家如何優(yōu)化丧裁，調(diào)整一些細節(jié)問題如UI、用戶體驗之類的含衔，當(dāng)然我們能做的遠遠不止這些煎娇，如果有什么問題歡迎與我探討二庵。下面的留言我都會看的。此外當(dāng)本人對HEXO有新的看法或者玩法的話該文章會不斷的更新逊桦，希望大家關(guān)注我的小站眨猎，感謝。
