引子

昨天晚上無意間在網(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ì)提到：

1. Homebrew:這是一個(gè)Mac環(huán)境下的軟件管理工具。它會(huì)將套件安裝到獨(dú)立目錄，并將文件軟鏈接至 /usr/local ，也就是說裝了它之后，就可以通過命令行來安裝軟件了；
2. Node.js:簡(jiǎn)單的說，就是運(yùn)行在服務(wù)端的JavaScript，有了它，服務(wù)器就能對(duì)我們的請(qǐng)求作出相應(yīng)了，也就是說它是用來配置站點(diǎn)服務(wù)器的，具體關(guān)于Node.js的介紹可以看這篇文章；
3. Hexo:一款基于Node.js的靜態(tài)博客框架。它決定了我們的博客文章是怎么顯示出來，也就是它定義了我們博客的樣子，網(wǎng)上有很多基于hexo的主題，都很漂亮，可以根據(jù)自己的喜好來設(shè)置；
4. 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)該都不難吧，長(zhǎ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ù)，把域名給用上?。?/p>

為了錢不白花，多出來的一小節(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è)名字一樣，這一步才是真正的重定向：

域名解析設(shè)置.png

注意：在這里還有一個(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ì)和我的感覺一樣：一切都不是事兒！