最近想用GitHub搭建個(gè)人博客，于是下功夫搜索了一番。網(wǎng)上有很多的教程，最終決定用hexo來搭建，因?yàn)楹唵?、快速。本教程只是?duì)整個(gè)搭建的記錄，以及遇到的一些坑，高手可以直接跳過。
說明：本教程針對(duì)window環(huán)境
首先hexo是一款基于Node.js的靜態(tài)博客框架, 官網(wǎng)傳送門，所以你要了解一些node基礎(chǔ)；其次是結(jié)合github自然要有一個(gè)github賬號(hào)；最后hexo生成的代碼上傳需要用到git。
準(zhǔn)備工作
1、安裝node
2、安裝git
3、申請github賬號(hào)
上面步驟都很簡單，不具體說明了，不懂得趕緊去惡補(bǔ)。
安裝hexo
npm install hexo-cli -g
進(jìn)入放博客的文件夾，執(zhí)行下面命令：
hexo init blog ? ? ?// 該命令會(huì)創(chuàng)建一個(gè)blog的文件夾，里面就是相關(guān)配置文件。
cd blog ? ? ? ? ? ? ?// 進(jìn)入blog文件夾
npm install ? ? ? // 安裝package.json里配置的模塊
hexo server ? ? // 運(yùn)行本地服務(wù)，在網(wǎng)頁中查看效果。
安裝完后進(jìn)入文件夾，可以看到如下文件夾及文件：
node_modules ? // npm 的安裝模塊文件
scaffolds ? ? ? ? ? // 布局文件
source ? ? ? ? ? ? ?// 資源文件，文章都放在該文件下的_posts
themes ? ? ? ? ? ? // 主題文件
.gitignore ? ? ? ? // git上傳忽略文件配置
_config.yml ? ? // 核心配置文件
package.json ? ?// 描述npm安裝包的文件
新建文章：
hexo new [layout] title
layout 即scaffolds 中的文件
hexo new 'post' ?// 新建文章，如果沒有指定布局，默認(rèn)新建的是post布局， 新文章在source 下的_posts下
hexo new page 'node' // 在文件夾source下，的page下新建一個(gè)名為node的文章，如果沒有page文件夾會(huì)自動(dòng)新建一個(gè)。
當(dāng)然也可以手動(dòng)添加文件和文件夾。
github上傳配置
當(dāng)在本地寫好文章后就要傳到github上，下面做相關(guān)配置。
打開_config.yml文件，在最小面找到deploy字段，做如下配置：
deploy:
type: git
repo: git@github.com:youname/youname.github.io.git（將youname換成你的GitHub名字）
branch: master
然后執(zhí)行npm install hexo-deployer-git --save， 安裝相關(guān)模塊，不然上傳代碼時(shí)會(huì)報(bào)錯(cuò)。
配置Github
創(chuàng)建一個(gè)與你用戶名相同的倉庫，如： youname.github.io，youname 換成你的github用戶名
在本地git中生成鑰密，ssh-keygen -t rsa -C"youremail@example.com" 郵箱換成自己郵箱，然后一路回車，使用默認(rèn)值即可。如果一切順利的話，可以在用戶主目錄里找到.ssh目錄，里面有id_rsa和id_rsa.pub兩個(gè)文件。打開id_rsa.pub，復(fù)制里面的所有內(nèi)容，然后登陸GitHub，打開個(gè)人的settings，選中SSH and GPG keys 選項(xiàng)，然后，點(diǎn)NEW SSH Key，填上任意Title，在文本框里粘貼id_rsa.pub文件的內(nèi)容。
關(guān)于git的用法以及github相關(guān)配置不懂得可以移步廖雪峰老師的站點(diǎn)學(xué)習(xí)<傳送門>
生成文件上傳github
hexo generate ?//?生成靜態(tài)頁面文件夾public
hexo server? ? ? // 開啟本地服務(wù)查看效果（默認(rèn)端口4000）
hexo deploy? ? ?//?將.deploy目錄部署到GitHub
hexo clean ? ? ? // 刪除public文件夾
每次上傳文件前要先刪除public文件夾，在生成靜態(tài)頁面，最后上傳github，故執(zhí)行如下命令：
hexo clean
hexo generate
hexo deploy
打開你的github，查看youname.github.io文件上傳成功沒，如果成功了在網(wǎng)址中打開youname.github.io，查看博客。
注：在window環(huán)境下，執(zhí)行hexo deploy命令一定要在git bash里運(yùn)行，不能在cmd中運(yùn)行，不然報(bào)錯(cuò)，當(dāng)時(shí)為了這個(gè)問題坑了一把。
遇到的坑：
剛開始win10上沒有問題，重裝系統(tǒng)后，在win10下安裝hexo-cli后運(yùn)行相關(guān)命令報(bào)了個(gè)錯(cuò)，hexo不是內(nèi)部或外部命令。網(wǎng)上找了一通，發(fā)現(xiàn)hexo沒有配置全局變量。將該路徑加入到環(huán)境變量C:\Users\youname\AppData\Roaming\npm。其中youname換成你電腦的用戶名。這是發(fā)現(xiàn)hexo命令正常了。執(zhí)行hexo s時(shí)cmd中提示在4000端口查看效果，結(jié)果瀏覽器輸入4000端口沒有效果。網(wǎng)上又折騰了一番，結(jié)果發(fā)現(xiàn)4000端口被占用了。執(zhí)行hexo s -p 1234之后再1234端口打開就正常了。我的電腦上4000端口被福析閱讀器的一個(gè)安全程序占用了，叫做foxitprotect.exe的程序，把它殺死后就能在4000端口上正常顯示了。
小技巧：
每次重新上傳都要執(zhí)行者三個(gè)命令會(huì)很麻煩，可以偷個(gè)懶，打開package.json文件，在里面加入scripts字段：
"scripts": {
? ? "dev": "hexo clean && hexo g && hexo d"
}
然后在git bash 里執(zhí)行npm run dev即可一步執(zhí)行這些操作。
域名配置
到此博客基本搭建完成，如果你想要你的博客有個(gè)獨(dú)特的域名，其實(shí)配置非常簡單。
1、購買域名
2、配置解析
以萬網(wǎng)申請的域名為例，如圖：
3、在在public文件夾下新建名為CNAME的文件，
在里面填寫你的域名，執(zhí)行hexo d上傳代碼，輸入域名查看效果。
tips：每次執(zhí)行hexo clean 后public文件都被刪除了，CNAME文件也被刪除了，這樣每次都要重新創(chuàng)建這個(gè)文件會(huì)很麻煩。其實(shí)解決辦法很簡單，把配置文件CNAME放在source文件下，重新生成后，你發(fā)現(xiàn)在public文件中就有CNAME這個(gè)文件了。
結(jié)語
到此博客就搭建完成了，但是對(duì)于hexo還有一塊很重要的沒有講，那就是主題。hexo的強(qiáng)大體現(xiàn)在它豐富的主題。下期就講一下我非常喜歡的一款簡潔、漂亮的主題yilia。主題篇已完成[傳送門]
