引子
昨天晚上無意間在網(wǎng)上看到一篇利用gitPages建立自己博客的文章缀蹄，還免費(fèi)！本人立刻跟打雞血似的了膘婶，今天鼓搗一整天缺前，終于有一個(gè)雛形了，當(dāng)然還有好多功能沒有加悬襟，例如評(píng)論衅码、統(tǒng)計(jì)之類的，一步一步來吧脊岳。這篇文章主要寫一下今天自己建博客遇到的一點(diǎn)問題逝段，希望能對(duì)看到這篇文章的人提供一點(diǎn)幫助筛璧。本文只求能將基本流程用比較淺顯的語言講出來，更深入和更細(xì)節(jié)的問題請(qǐng)自己探索 惹恃。
必備工具
硬件
電腦、網(wǎng)絡(luò)什么的不用說了棺牧，這里以mac為例說明巫糙。
軟件
下邊將會(huì)提到：
- Homebrew:這是一個(gè)Mac環(huán)境下的軟件管理工具。它會(huì)將套件安裝到獨(dú)立目錄颊乘，并將文件軟鏈接至 /usr/local 参淹，也就是說裝了它之后，就可以通過命令行來安裝軟件了乏悄；
- Node.js:簡(jiǎn)單的說浙值，就是運(yùn)行在服務(wù)端的JavaScript，有了它檩小，服務(wù)器就能對(duì)我們的請(qǐng)求作出相應(yīng)了开呐，也就是說它是用來配置站點(diǎn)服務(wù)器的，具體關(guān)于Node.js的介紹可以看這篇文章规求；
- Hexo:一款基于Node.js的靜態(tài)博客框架筐付。它決定了我們的博客文章是怎么顯示出來，也就是它定義了我們博客的樣子阻肿，網(wǎng)上有很多基于hexo的主題瓦戚，都很漂亮，可以根據(jù)自己的喜好來設(shè)置丛塌；
- Git和GitHub：Git是版本控制軟件较解，它是一個(gè)工具，GitHub是一個(gè)項(xiàng)目托管平臺(tái)赴邻，以Git進(jìn)行版本控制為基礎(chǔ)印衔。關(guān)于Git，可以參考這個(gè)教程乍楚，干貨多多当编。
建立博客的流程
想要建立一個(gè)自己的博客，其實(shí)就相當(dāng)于要蓋一座屬于自己的展覽館徒溪，我們的博客文章就相當(dāng)于展覽館的展出品忿偷，hexo相當(dāng)于裝修工人，Node.js相當(dāng)于展覽館的工作人員臊泌，服務(wù)器就相當(dāng)于是展覽館（包括展覽館的后勤系統(tǒng)）鲤桥，而GitHub就相當(dāng)于展覽館所在的城市。
首先我們得決定把展覽館建在哪個(gè)地方渠概，北京茶凳？上海嫂拴？還是家里蹲？這就相當(dāng)于我們是選擇阿里云的服務(wù)器贮喧、騰訊云的服務(wù)器還是Git的服務(wù)器筒狠。前邊兩個(gè)都需要出租金的，而最后一個(gè)箱沦，我們只要注冊(cè)一個(gè)賬號(hào)辩恼，就能在它這蓋房子了（好慷慨，不過它能提供的功能也比前兩者少很多谓形，房子只能蓋小一點(diǎn)）灶伊。選好地兒之后，然后準(zhǔn)備建筑材料寒跳，我們就可以蓋自己的展覽館啦聘萨。
等基礎(chǔ)設(shè)施都蓋好之后，我們還要雇傭工作人員來維持場(chǎng)館正常運(yùn)轉(zhuǎn)童太，還要進(jìn)行室內(nèi)的裝修等等米辐，哎，好麻煩啊康愤。幸運(yùn)的是儡循，這一切都由hexo幫我們做好了。我們只需要進(jìn)行一些基本的參數(shù)設(shè)置（博客的名稱征冷、作者择膝、簡(jiǎn)介等），選擇不同的裝修風(fēng)格（hexo主題）就行了检激。
然后我們就需要把在家寫好的書肴捉、畫好的畫（博客文章）運(yùn)到展覽館啦（文件的上傳），接下來叔收，我們只需要在網(wǎng)上和朋友們推薦自己的這個(gè)展覽館齿穗，告訴他們展覽館的地址（域名），鼓勵(lì)他們都來參觀（訪問）饺律，然后就大功告成啦窃页，盡情享受他們的贊嘆吧。這就是博客建立的大致流程（中間省略好多細(xì)節(jié)复濒，其實(shí)每一個(gè)流程單挑出來都是一門大學(xué)問脖卖，所以根據(jù)自己的興趣或者哪一塊不太明白可以自己在網(wǎng)上搜索）。接下來巧颈，我就根據(jù)這幾個(gè)流程來講一下博客的建立：
準(zhǔn)備工作（軟件的安裝）
安裝homebrew和Node.js
先安裝homebrew畦木，并確定其安裝正確，然后安裝Node.js砸泛，步驟比較簡(jiǎn)單，具體可以參考這篇文章的前半部分。
我遇到的坑
在這里廊敌，我之前遇到的一個(gè)坑是：安裝完Node.js之后，在終端輸入命令總是提示沒命令無效反症，后來發(fā)現(xiàn)是因?yàn)槲募A搞錯(cuò)了。安裝Node.js的時(shí)候，需要注意它安裝在什么地方，因?yàn)橐院髨?zhí)行npm之類的指令時(shí)妒蛇，需在其安裝目錄下執(zhí)行才有效。打開終端后楷拳，默認(rèn)是以下格式：localhost:~ mac$，$前是本地賬戶的名字吏奸，而賬戶名字前就是當(dāng)前文件夾欢揖。終端默認(rèn)是在本地用戶的根目錄下。當(dāng)進(jìn)入某一個(gè)文件夾后（cd命令奋蔚，可以先ls查看當(dāng)前目錄下的文檔）她混，之后終端命令會(huì)類似于這樣：localhost:hexo mac$，也就是進(jìn)入了hexo的文件夾泊碑。當(dāng)執(zhí)行npm或者其他指令的時(shí)候坤按，需要確保當(dāng)前文件夾是Node.js的安裝路徑才能執(zhí)行。具體的命令可以參考Mac常用的終端命令馒过。
注冊(cè)賬號(hào)（選地址蓋房子）
注冊(cè)賬號(hào)的事情對(duì)于我們應(yīng)該都不難吧臭脓，長這么大，注冊(cè)的各種網(wǎng)站自己有時(shí)候都數(shù)不過來腹忽。流程呢来累，也更是輕車熟路。
GitHub官網(wǎng)注冊(cè)一個(gè)賬號(hào)窘奏，然后創(chuàng)建一個(gè)新的倉庫（repository）嘹锁，倉庫的名字一定要類似于：userName.github.io，userName一定要和你創(chuàng)建的Git賬戶名字相一致着裹，而且后綴名字如果是.com訪問的時(shí)候會(huì)出問題领猾，接下來要下載Git軟件，因?yàn)楹罄m(xù)進(jìn)行文件的上傳需要用到骇扇。Git下載完之后摔竿，因?yàn)橐瓦h(yuǎn)程的GitHub服務(wù)器連接，所以還需要進(jìn)行相關(guān)的配置匠题，ssh驗(yàn)證等拯坟，具體的步驟可以參考上邊提到的那個(gè)教程，或者是這篇文章韭山，或者是這篇文章郁季。這一步需要一點(diǎn)耐心冷溃。
Hexo的安裝和配置（裝修場(chǎng)館）
好了，費(fèi)勁一番周折后梦裂，終于可以把我們的展覽館蓋起來了似枕。接下來該進(jìn)行最重要也是最有趣的步驟了。
Hexo的安裝
當(dāng)然年柠，在這之前凿歼，還需要進(jìn)行hexo的安裝，不過冗恨，在經(jīng)歷了之前那么多安裝步驟之后答憔，這一步應(yīng)該早已不在話下了。在終端輸入$ sudo npm install hexo-cli -g即可掀抹。
Hexo的配置
Hexo的初始化
接下來就該裝修我們的場(chǎng)館了虐拓。首先，先初始化hexo傲武，以后寫博客的時(shí)候蓉驹，一般就是本地調(diào)試，然后直接上傳至服務(wù)器這樣一個(gè)過程揪利。終端中輸入：$ hexo init userName.github.io态兴，hexo會(huì)以init后邊的名字新建一個(gè)文件夾并進(jìn)行初始化的工作。注意：同樣疟位，因?yàn)橛猩线呎f的坑瞻润，所以這里，我們首先要通過cd命令進(jìn)入到剛才hexo的初始化文件夾里甜刻，才能夠進(jìn)行下邊的步驟敢订。
安裝主題
主題安裝的方法基本都一樣：網(wǎng)上找主題->git命令克隆復(fù)制到本地->配置->上傳服務(wù)器->生效。
- 首先罢吃，git命令：
$ git clone https:github.com/iissnan/hexo-theme-next themes/next楚午，獲取主題并復(fù)制到本地； - 配置尿招。配置文件有兩個(gè)矾柜，名字都是_config.yml，一個(gè)在hexo根目錄下（站點(diǎn)配置文件）就谜，一個(gè)在主題名字的根目錄下（主題配置文件）怪蔑。它們都可以通過自帶的文本編輯器打開并進(jìn)行修改，注釋也都比較詳細(xì)丧荐，比較容易閱讀缆瓣；
- 站點(diǎn)配置文件：主要設(shè)置博客的名稱、作者虹统、時(shí)間戳等基本信息弓坞，詳細(xì)請(qǐng)看具體的站點(diǎn)配置文件說明隧甚。一般我們需要修改的有：title、author渡冻、language(漢語：zh-Hans)戚扳、theme(要使用的主題名字)、deploy(部署)下的類型（type:本例寫git)和倉庫（repo:https://github.com/userName.github.io.git）族吻；
- 主題的配置文件：一般在主題的github就有詳細(xì)的文檔進(jìn)行介紹帽借。本例next主題的配置文件請(qǐng)看next主題配置。另外關(guān)于主題的文件夾層次結(jié)構(gòu)超歌，請(qǐng)看官網(wǎng)介紹：主題文件夾介紹砍艾。
到了這一步，我們就可以測(cè)試一下輸出了巍举。在終端中輸入$ hexo s辐董，正常的情況下會(huì)出現(xiàn)：INFO Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.，這表明配置已經(jīng)正確禀综，hexo開始運(yùn)行了，接下來我們只需在瀏覽器中輸入http://localhost:4000/苔严，不出意外就可以看到Hello world的頁面了定枷。
編寫博客
關(guān)于Markdown
配置成功之后，我們就該正式開始我們的工作了届氢，畢竟前邊所有的折騰都只是為了這一步－－編寫自己的博客文章欠窒！現(xiàn)在Markdown貌似挺火，用起來也算簡(jiǎn)單方便退子。所以我們可以通過本地Markdown編輯器岖妄，編輯我們的博客文章，內(nèi)容格式可以參考hexo目錄下的scaffolds文件夾中的模版寂祥，至于具體的Markdown語法可以參考這里：簡(jiǎn)書荐虐，常用的命令都有提到。多說一句丸凭，我比較推薦使用本地編輯器福扬，快捷鍵用起來非常方便啊，Mac下我用的是MacDown惜犀。
本地調(diào)試
編寫完博客之后铛碑，將文檔保存在hexo/source/_post文件夾中即可，是不是看到了剛才的Hello world文件虽界？然后打開終端汽烦，輸入$ hexo clean && hexo s，打開本地調(diào)試莉御，是不是看見我們寫的文章了呢撇吞？終于完成一大半工作啦俗冻！注：clean命令是清除緩存。
上傳文件
本地調(diào)試好格式之后梢夯，接下來我們只需要把本地的文件上傳至gitHub服務(wù)器即可言疗。這里我們先通過：$ npm install hexo-deployer-git --save安裝自動(dòng)部署發(fā)布工具，然后輸入$ hexo clean && hexo g && hexo d颂砸，等待系統(tǒng)上傳完成即可噪奄。注：hexo g表示generate，生成靜態(tài)文件人乓；hexo d表示deploy勤篮，部署文件。
設(shè)置域名（場(chǎng)館地址設(shè)置）
正常訪問
上一步上傳文件完成后色罚，正常情況下碰缔，在userName.github.io倉庫下就可以看到剛剛上傳的文件了。然后在瀏覽器中輸入：https://userName.github.io戳护，看金抡！是不是就可以訪問到我們剛剛寫的博客了？就是這么神奇腌且！
好了梗肝，創(chuàng)建自己的博客到此結(jié)束...別急！你以為故事就這么結(jié)束了铺董？巫击！我申請(qǐng)的49塊錢的域名還沒用上呢？精续！赤裸裸的資源浪費(fèi)鞍用獭！必須繼續(xù)重付，把域名給用上扒昙丁！
為了錢不白花确垫，多出來的一小節(jié)
首先你得先有一個(gè)域名這個(gè)自然不用說了吧愕把，可以在網(wǎng)上搜，然后買一個(gè)森爽，不是很貴（上邊我都把域名的價(jià)格給暴露了...）恨豁。然后繼續(xù)：
配置CNAME
在hexo文件夾下的source中新建一個(gè)文本文檔， 里邊輸入剛才我們買到的域名的二級(jí)域名爬迟。舉例來說橘蜜，我申請(qǐng)的是dalianer.com，就填寫blog.dalianer.com。但開頭不要添加http(s)://计福，然后保存為CNAME跌捆，一定要是大寫，否則會(huì)出問題象颖，后綴名也去掉佩厚。另外，一個(gè)CNAME文件只能填寫一個(gè)域名说订，這一步的目的是告知GitHub抄瓦，我們要使用另一個(gè)域名來發(fā)布我們的博客，然后gitHub會(huì)將這個(gè)域名當(dāng)作我們倉庫的主域名陶冷，如果訪問userName.github.io钙姊，會(huì)自動(dòng)跳轉(zhuǎn)至我們?cè)O(shè)置的域名。插曲：這里邊說一下我遇到的一個(gè)坑：當(dāng)時(shí)我在gitHub的倉庫中直接新建CNAME文件埂伦，然后正常保存煞额，可在終端部署完hexo之后，本地文件都成功上傳至服務(wù)器沾谜，但是剛才新建的CNAME文件卻沒了膊毁！后來找到這個(gè)方法，好使基跑！
配置解析服務(wù)器
剛才我們只是告訴gitHub我們要映射域名婚温，gitHub會(huì)將我們的倉庫名映射到自定義域名上，但是在我們直接訪問自己域名的時(shí)候涩僻，還不會(huì)自動(dòng)跳轉(zhuǎn)至gitHub上。感覺上一步有點(diǎn)類似于只是將我們倉庫的地址重新起了個(gè)名字一樣栈顷，這一步才是真正的重定向：
注意：在這里還有一個(gè)大坑：我們一般申請(qǐng)的是頂級(jí)域名逆日，也就是domain.com/.cn之類，如果我們?cè)贑NAME文件中填入這個(gè)頂級(jí)域名萄凤，接下來我們的解析設(shè)置也會(huì)因此改變室抽，需要解析跳轉(zhuǎn)到gitHub的服務(wù)器地址，但是在網(wǎng)上搜了一圈靡努，沒找到現(xiàn)在gitHub對(duì)外的ip地址（之前的文章寫的都有）坪圾，說人話也就是：現(xiàn)在直接填寫申請(qǐng)到的頂級(jí)域名，不能使用惑朦！xxx.com只能重定向至192.168.xxx.xx之類的地址兽泄，但是gitHub這個(gè)地址現(xiàn)在我們拿不到，所以最好使用二級(jí)域名漾月，之后將解析重定向至userName.github.io即可病梢。
總結(jié)
經(jīng)過這么多的折騰，我們現(xiàn)在終于創(chuàng)建出屬于自己的博客了，并且能通過自己的域名進(jìn)行訪問蜓陌。雖然原理并不復(fù)雜觅彰，但是里邊的細(xì)節(jié)比較多，步驟比較瑣碎钮热，需要一點(diǎn)耐心填抬，不過當(dāng)最后看到博客頁面跳出來的時(shí)候，你一定會(huì)和我的感覺一樣：一切都不是事兒隧期！
