前言
最近看到陽(yáng)春面的博客，感覺(jué)非常漂亮，正好最近也想自己搭個(gè)博客，記錄一下自己的學(xué)習(xí)經(jīng)歷和生活感悟，給自己留下點(diǎn)回憶，同時(shí)整理一下自己的思路，于是就想仿照著弄一個(gè)類似的靜態(tài)博客網(wǎng)站，正好最近有時(shí)間，而且內(nèi)心搭博客的念頭越來(lái)越?jīng)坝?，所以，說(shuō)干就干！
主要內(nèi)容
拉到陽(yáng)春面博客的最下方，發(fā)現(xiàn)他的靜態(tài)博客是Hexo驅(qū)動(dòng)，使用的NexT.Mist主題，而且我非常喜歡這個(gè)主題，所以我完全就是沖著陽(yáng)春面的博客效果去的，所以這片文章主要介紹：
1. 基于Hexo和github pages搭建靜態(tài)博客
2. Next主題配置及優(yōu)化
最終目標(biāo)是實(shí)現(xiàn)陽(yáng)春面博客那樣的效果！另外，因?yàn)槲矣玫碾娔X是Mac Pro，所以這篇文章所說(shuō)的方法都是在mac下才有用的，windows下基本步驟類似，可能只是依賴工具安裝方法不同。最后，我還沒(méi)有申請(qǐng)和綁定自己的域名，所以域名注冊(cè)和綁定都沒(méi)有介紹，我認(rèn)為，在自己真正開(kāi)始經(jīng)營(yíng)博客之前，沒(méi)有必要花錢(qián)注冊(cè)域名，所以這部分工作留在博客小有名氣，有一定流量之后再做！
基礎(chǔ)準(zhǔn)備
好，下面正式開(kāi)始搭建博客！首先要想使用Hexo和github pages搭建博客，需要以下環(huán)境：
- Github賬號(hào)一枚，并創(chuàng)建一個(gè)指定名字的repo
- Homebrew套件管理器，主要用來(lái)安裝git和node.js
- Git版本管理工具
- node.js
- 配置SSH key（可忽略）
- 安裝Hexo
- 同步Hexo博客到github
- NexT主題配置及優(yōu)化（如果你喜歡別的主題，請(qǐng)忽略）
這些東西都不熟悉沒(méi)關(guān)系，下面都會(huì)詳細(xì)介紹。
注冊(cè)Github賬號(hào)并創(chuàng)建repo
因?yàn)槲覀兊牟┛褪腔趃ithub pages的，也就是博客內(nèi)容都托管在github pages，所以需要有一個(gè)github賬號(hào)，并且創(chuàng)建一個(gè)公開(kāi)庫(kù)（repo），用來(lái)存放你的博客。Github賬號(hào)大家應(yīng)該都有了，俗話說(shuō)，沒(méi)有Github 賬號(hào)的程序員，不是好段子手，身為程序員，不加入這個(gè)全球最大的技術(shù)（搞基）社區(qū)怎么說(shuō)的過(guò)去呢。如果還沒(méi)有g(shù)ithub賬號(hào)，去這里申請(qǐng)一個(gè)就好了，申請(qǐng)步驟很簡(jiǎn)單，不再詳述，記住選免費(fèi)服務(wù)就可以。在github上創(chuàng)建public庫(kù)是免費(fèi)的，也就是傳說(shuō)中的創(chuàng)建開(kāi)源庫(kù)。創(chuàng)建private庫(kù)是要付費(fèi)的，我們使用github主要就是為了擁抱開(kāi)源，如果沒(méi)有特殊需求，創(chuàng)建public庫(kù)就可以，我們一會(huì)兒要?jiǎng)?chuàng)建的博客倉(cāng)庫(kù)就是public庫(kù)。
申請(qǐng)完賬號(hào)，登陸之后，就可以創(chuàng)建repo了，點(diǎn)擊New repository，會(huì)跳轉(zhuǎn)到這個(gè)界面:
需要注意的地方，我都在圖上做了標(biāo)注，這些標(biāo)注里最需要注意的就是新創(chuàng)建的庫(kù)的名字，必須是username.github.io，等你創(chuàng)建庫(kù)的時(shí)候，把username換成你的用戶名就可以，例如我的用戶名是madongqiang2201，那庫(kù)名就是madongqiang2201.github.io。信息填寫(xiě)完畢，點(diǎn)擊create repository就可以把庫(kù)創(chuàng)建出來(lái)。
要想進(jìn)一步深入了解github，可以閱讀這些資料：
stormzhang 從0開(kāi)始學(xué)習(xí)github系列
安裝Homebrew套件管理器
Homebrew并不是必須的，你也可以通過(guò)其他途徑安裝git和node.js，但是，個(gè)人認(rèn)為Homebrew相當(dāng)nice，而且在mac下管理安裝包特別方便，所以在這里強(qiáng)行安利一波，Homebrew需要你的mac安裝了Xcode，很多其他mac應(yīng)用也需要，所以建議先安裝一下，appstore里就有。裝完Xcode之后，剩下的步驟就特別簡(jiǎn)單了，打開(kāi)mac terminal終端，輸入以下命令
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
就可以自動(dòng)完成該工具的安裝，如果這條命令失效了，可能是Homebrew更新了安裝方式，可以去這里查看最新安裝命令以及Homebrew的簡(jiǎn)要介紹。Homebrew安裝完成之后，安裝git和node.js簡(jiǎn)直簡(jiǎn)單的不要不要的。
Homebrew一些常用命令可以閱讀以下資料，深度應(yīng)用請(qǐng)自行檢索：
安裝Git版本管理工具
Git是一個(gè)強(qiáng)大的版本管理工具，Github的版本管理就是基于Git的，現(xiàn)在svn基本過(guò)時(shí)了，使用Git進(jìn)行版本管理才是王道。安裝完Homebrew之后，安裝Git幾乎零成本，還是在terminal終端，輸入以下命令：
brew install git
然后等一段時(shí)間就ok了，Homebrew會(huì)自動(dòng)去幫你完成下載安裝。
Git使用教程，可以參考以下資料：
安裝node.js
Hexo是基于node.js的，所以要讓Hexo運(yùn)行，node.js環(huán)境是必不可少的。使用Homebrew安裝node.js也特別簡(jiǎn)單，在terminal終端輸入如下命令：
brew install node
然后等著Homebrew幫你完成下載安裝就可以了，舒爽到爆炸！安裝完node.js就可以使用常見(jiàn)的npm命令了。
配置SSH key
這一步可以忽略，配置SSH key與否，并不影響博客的搭建和使用，只是配置了之后，更新博客方便一點(diǎn)，不用每次都輸用戶名和密碼。
檢查本機(jī)上是否存在SSH key
打卡終端，輸入如下命令：
cd .ssh
ls -la
檢查終端輸出的文件列表中是否已經(jīng)存在id_rsa.pub 或 id_dsa.pub 文件，如果文件已經(jīng)存在，那么你可以跳過(guò)步驟2，直接進(jìn)入步驟3.
創(chuàng)建一個(gè)SSH key
在終端輸入以下命令：
$ ssh-keygen -t rsa -C "your_email@example.com"
回車(chē)，接著會(huì)提示你，讓你輸入文件名，直接回車(chē)會(huì)創(chuàng)建使用默認(rèn)文件名的文件（推薦使用默認(rèn)文件名）；然后會(huì)提示你輸入兩次密碼（輸入密碼之后沒(méi)有反饋，顯示還是空白，但是你確實(shí)已經(jīng)輸入了），當(dāng)然密碼也可以不輸，直接回車(chē)，如果這里沒(méi)有輸入密碼，以后提交博客更新的時(shí)候就不需要輸入密碼了。
添加SSH key到github
經(jīng)過(guò)第二步，如果你沒(méi)有指定文件名（也就是使用的默認(rèn)文件名），那么你的.ssh文件夾下，應(yīng)該有一個(gè)id_rsa.pub文件了，打開(kāi)該文件，復(fù)制里面的文本。然后登陸github，點(diǎn)擊右上角頭像右邊的三角圖標(biāo)，點(diǎn)擊Settings，然后在左邊菜單欄點(diǎn)擊SSH and GPG keys，點(diǎn)擊new ssh key，title 隨便填一個(gè)，在key 欄填入你復(fù)制的內(nèi)容，點(diǎn)擊add ssh key，就可以添加一個(gè)ssh key了，如下圖：
驗(yàn)證SSH key是否配置成功
在終端輸入以下命令：
ssh -T git@github.com
如果你創(chuàng)建的key沒(méi)有設(shè)密碼的話，直接一頓回車(chē)，到最后提示你
Hi yourusername! You've successfully authenticated, but GitHub does not provide shell access.
說(shuō)明你的ssh key添加成功了。如果過(guò)程中提示你perimission deny相關(guān)錯(cuò)誤，就在命令前加上sudo 然后執(zhí)行命令的時(shí)候輸入你的appleid密碼應(yīng)該就可以了。sudo用來(lái)說(shuō)明用管理員權(quán)限運(yùn)行。
以上簡(jiǎn)略介紹了怎么配置SHH key，如果想知道命令里面參數(shù)的含義，或者配置過(guò)程不順利的話，可以看這里的詳細(xì)教程。
安裝Hexo
經(jīng)過(guò)以上步驟的鋪墊，終于到了Hexo安裝了，前面我們安裝了node.js,裝完node之后，我們就可以使用npm命令了，而Hexo安裝就是使用npm，在終端輸入以下命令：
npm install -g hexo
然后等待一會(huì)兒，hexo會(huì)自動(dòng)完成下載安裝。Hexo安裝完成之后，在你喜歡的位置隨意創(chuàng)建一個(gè)文件夾，這個(gè)文件夾以后就是你存放本地博客的地方了，通過(guò)cd filepath(filepath替換成你創(chuàng)建的文件夾目錄)命令，進(jìn)入到你創(chuàng)建的文件夾目錄，然后執(zhí)行以下命令：
hexo init
npm install
這樣Hexo會(huì)在該文件夾創(chuàng)建本地博客所需的一切資源。這樣本地博客就搭建好了，輸入以下命令：
hexo g // 全拼是：hexo generate，可以簡(jiǎn)寫(xiě)成 hexo g
hexo s // 全拼是：hexo server，可以簡(jiǎn)寫(xiě)成 hexo s
這樣就開(kāi)啟了一個(gè)本地博客服務(wù)器，打開(kāi)瀏覽器，在地址欄輸入localhost:4000，就可以查看本地博客了，hexo默認(rèn)生成了一片hello world博客。注意，以上hexo開(kāi)頭的命令，執(zhí)行目錄必須是你創(chuàng)建的博客文件夾目錄。
同步Hexo博客到Github
現(xiàn)在你已經(jīng)可以在本機(jī)查看你的博客了，但是要想讓別人通過(guò)網(wǎng)絡(luò)可以查看你的博客，還需要一步，那就是將你的博客發(fā)布到github倉(cāng)庫(kù)。在terminal終端，將當(dāng)前目錄切換到你的本地博客目錄，執(zhí)行以下命令：
npm install hexo-deployer-git --save
安裝完成之后，打開(kāi)本地博客目錄的_config.yml文件，編輯其中的deploy節(jié)點(diǎn)：
deploy:
type: git
repo: git@github.com:yourusername/youusername.github.io.git
branch: master
將上面yourusername替換成你的github用戶名即可，你也可以去你開(kāi)始的時(shí)候創(chuàng)建的名為yourusername.github.io的倉(cāng)庫(kù)去直接復(fù)制完整的地址，如下圖：
當(dāng)前復(fù)制出來(lái)的值，就是通過(guò)SSH方式clone的地址，配置完成后，以后提交博客更新不用輸用戶名和密碼（如果你ssh key沒(méi)有設(shè)置密碼的話）；點(diǎn)擊上圖右上角
Use HTTPS，復(fù)制出來(lái)的clone地址也可以配置到repo，但是這樣，提交更新的時(shí)候，就需要輸入用戶名和密碼了。
保存配置之后，在本地博客目錄執(zhí)行以下命令：
hexo clean // clean本地項(xiàng)目，防止緩存
hexo g // 根據(jù)你編輯的md格式的博客，生成靜態(tài)網(wǎng)頁(yè)
hexo d // 將本地博客發(fā)布到github
然后，在瀏覽器地址欄輸入yourusername.github.io就可以訪問(wèn)你的博客了，別人也可以通過(guò)這個(gè)地址訪問(wèn)你的博客。
如果想了解Hexo常用命令可以點(diǎn)擊這里，Hexo常用命令沒(méi)幾個(gè)，常用的有創(chuàng)建新博客、clean、生成靜態(tài)文件、發(fā)布等，上述官方文檔有詳細(xì)介紹
NexT主題配置及優(yōu)化
NexT主題是一套簡(jiǎn)約的主題，設(shè)置完成之后，就像我的博客現(xiàn)在的樣子，NexT主題的詳細(xì)配置請(qǐng)看這里，這個(gè)是NexT主題作者維護(hù)的配置文檔，作者是國(guó)人，所以文檔是中文的，而且寫(xiě)的非常詳細(xì)，對(duì)照文檔，所有功能都能輕松實(shí)現(xiàn)。等你配置完成后，你的博客將擁有評(píng)論系統(tǒng)，訪問(wèn)次數(shù)統(tǒng)計(jì)，站內(nèi)搜索，代碼高亮，百度統(tǒng)計(jì)，社交分享（分享到微博，微信，qq等）等等強(qiáng)大的功能。官方文檔很詳細(xì)，我就不再贅述了。
其他遺漏的點(diǎn)
1.如何刪除一篇博文
當(dāng)然，我們辛辛苦苦寫(xiě)了博文，一般是不會(huì)刪除的，最多修改一下，但是我們搭建的過(guò)程中或者剛搭建好個(gè)人博客站點(diǎn)，可能一激動(dòng)就發(fā)了好多測(cè)試博文，如果想刪除這類文章，在Finder中，找到本地博客所在目錄，找到/source/_posts文件夾，里面放了所有我們寫(xiě)的博客，想刪除哪篇，直接在這里刪除，然后再重新發(fā)布到github，這篇博文就不見(jiàn)了
2.fork me on github
如果你訪問(wèn)我的個(gè)人博客，你會(huì)發(fā)現(xiàn)右上角有一個(gè)傾斜的fork me on github 圖標(biāo)，想要集成這個(gè)圖標(biāo)，只需要去這里挑選你喜歡的樣式，把樣式代碼復(fù)制過(guò)來(lái)，然后打開(kāi)你本地博客目錄下的themes/next/layout/layout.swig文件，然后把你復(fù)制過(guò)來(lái)的樣式代碼粘貼到如下位置：
<body itemscope itemtype="http://schema.org/WebPage"
// ...
<a ></a>
<header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
<div class="header-inner"> {%- include '_partials/header.swig' %} </div>
</header>
// ...
其中哪個(gè)超鏈接就是復(fù)制的樣式代碼，粘貼位置在body內(nèi)header標(biāo)簽之上。
3.給博文添加tag和分類
使用如下命令：
hexo new "blog title"
創(chuàng)建的新博文文件，打開(kāi)之后頂部會(huì)有一段自動(dòng)生成的文本，在其中加入tag和category標(biāo)簽即可指定tag和分類。
---
title: blog title
date: 2016-07-20 10:59:31
tag: hexo
category: hexo
---
4.手動(dòng)實(shí)現(xiàn)某條博文置頂
Next主題沒(méi)有博文置頂相關(guān)設(shè)置（或許這個(gè)功能Hexo應(yīng)該提供，但我分不清），但是我發(fā)現(xiàn)發(fā)布的博文是根據(jù)發(fā)布日期倒序排序的，即：越早發(fā)布的，排的越靠后！而發(fā)布日期，我們可以通過(guò)博文的頭部date字段指定：
---
title: blog title
date: 2016-07-20 10:59:31 // 指定發(fā)布日期
tag: hexo
category: hexo
---
所以我們可以給想要置頂?shù)牟┪模付ㄒ粋€(gè)將來(lái)的日期，這樣就可以讓這篇博文一直排在別的博文前面，達(dá)到手工置頂?shù)哪康?！但是要注意：?duì)于已經(jīng)發(fā)布的博文，發(fā)布日期和文件名稱（不是title字段的值，而是md文件名）是該文章訪問(wèn)url的組成部分，也就意味著，已經(jīng)發(fā)布的文章如果改了發(fā)布日期，針對(duì)這篇文章的鏈接就都不能用了，而且瀏覽統(tǒng)計(jì)等信息都會(huì)受到影響，所以手工置頂應(yīng)該慎重使用！
總結(jié)
Hexo博客至此搭建完畢，并且應(yīng)用了簡(jiǎn)約美麗的NexT.Mist主題，但是仍有一些不足之處，例如沒(méi)有通過(guò)正常渠道博文置頂功能；該主題的主頁(yè)過(guò)于簡(jiǎn)單，沒(méi)有邊欄，導(dǎo)致主頁(yè)展示的有效信息減少，不利于訪客瀏覽，也不利于推廣自己的其它渠道，這可能就是簡(jiǎn)約付出的代價(jià)，主題作者以后可能也會(huì)改進(jìn)吧！如果不喜歡這個(gè)主題，可以參看一下開(kāi)源實(shí)驗(yàn)室或者stormzhang的個(gè)人博客主題，我感覺(jué)這兩個(gè)都不錯(cuò)。但是最重要的還是博客要有內(nèi)容，沒(méi)有內(nèi)容，再好的個(gè)人站點(diǎn)也沒(méi)有意義！所以樣式先這樣吧，這段時(shí)間先寫(xiě)技術(shù)文章，如果以后自己開(kāi)始認(rèn)真經(jīng)營(yíng)博客了，再綁定域名和優(yōu)化樣式。最后，如果大家有什么問(wèn)題，歡迎留言討論！
