前言

使用github pages服務(wù)搭建博客的好處有：

全是靜態(tài)文件，訪問(wèn)速度快；

免費(fèi)方便，不用花一分錢(qián)就可以搭建一個(gè)自由的個(gè)人博客，不需要服務(wù)器不需要后臺(tái)；

可以隨意綁定自己的域名，不仔細(xì)看的話根本看不出來(lái)你的網(wǎng)站是基于github的；

數(shù)據(jù)絕對(duì)安全，基于github的版本管理，想恢復(fù)到哪個(gè)歷史版本都行；

博客內(nèi)容可以輕松打包、轉(zhuǎn)移、發(fā)布到其它平臺(tái)；

等等；

1.1.?準(zhǔn)備工作

在開(kāi)始一切之前，你必須已經(jīng)：

• 有一個(gè)github賬號(hào)，沒(méi)有的話去注冊(cè)一個(gè)；
• 安裝了node.js、npm，并了解相關(guān)基礎(chǔ)知識(shí)；
• 安裝了git for windows（或者其它git客戶(hù)端）

本文所使用的環(huán)境：

• Windows8.1
• node.js@5.5.0
• git@1.9.2
• hexo@3.2.2

搭建github博客

2.1.?創(chuàng)建倉(cāng)庫(kù)

新建一個(gè)名為你的用戶(hù)名.github.io的倉(cāng)庫(kù)，比如說(shuō)，如果你的github用戶(hù)名是test，那么你就新建test.github.io的倉(cāng)庫(kù)（必須是你的用戶(hù)名，其它名稱(chēng)無(wú)效），將來(lái)你的網(wǎng)站訪問(wèn)地址就是?http://test.github.io?了，是不是很方便？

由此可見(jiàn)，每一個(gè)github賬戶(hù)最多只能創(chuàng)建一個(gè)這樣可以直接使用域名訪問(wèn)的倉(cāng)庫(kù)。

注意：

注冊(cè)的郵箱一定要驗(yàn)證，否則不會(huì)成功；

倉(cāng)庫(kù)名字必須是：username.github.io，其中username是你的用戶(hù)名；

倉(cāng)庫(kù)創(chuàng)建成功不會(huì)立即生效，需要過(guò)一段時(shí)間，大概10-30分鐘，或者更久，我的等了半個(gè)小時(shí)才生效；

創(chuàng)建成功后，默認(rèn)會(huì)在你這個(gè)倉(cāng)庫(kù)里生成一些示例頁(yè)面，以后你的網(wǎng)站所有代碼都是放在這個(gè)倉(cāng)庫(kù)里啦。

2.2.?綁定域名

當(dāng)然，你不綁定域名肯定也是可以的，就用默認(rèn)的?xxx.github.io?來(lái)訪問(wèn)，如果你想更個(gè)性一點(diǎn)，想擁有一個(gè)屬于自己的域名，那也是OK的。

首先你要注冊(cè)一個(gè)域名，域名注冊(cè)以前總是推薦去godaddy，現(xiàn)在覺(jué)得其實(shí)國(guó)內(nèi)的阿里云也挺不錯(cuò)的，價(jià)格也不貴，畢竟是大公司，放心！

綁定域名分2種情況：帶www和不帶www的。

域名配置最常見(jiàn)有2種方式，CNAME和A記錄，CNAME填寫(xiě)域名，A記錄填寫(xiě)IP，由于不帶www方式只能采用A記錄，所以必須先ping一下你的用戶(hù)名.github.io的IP，然后到你的域名DNS設(shè)置頁(yè)，將A記錄指向你ping出來(lái)的IP，將CNAME指向你的用戶(hù)名.github.io，這樣可以保證無(wú)論是否添加www都可以訪問(wèn)，如下：

然后到你的github項(xiàng)目根目錄新建一個(gè)名為CNAME的文件（無(wú)后綴），里面填寫(xiě)你的域名，加不加www看你自己喜好，因?yàn)榻?jīng)測(cè)試：

• 如果你填寫(xiě)的是沒(méi)有www的，比如 mygit.me，那么無(wú)論是訪問(wèn)?http://www.mygit.me?還是?http://mygit.me?，都會(huì)自動(dòng)跳轉(zhuǎn)到?http://mygit.me
• 如果你填寫(xiě)的是帶www的，比如 www.mygit.me ，那么無(wú)論是訪問(wèn)?http://www.mygit.me?還是?http://mygit.me?，都會(huì)自動(dòng)跳轉(zhuǎn)到?http://www.mygit.me
• 如果你填寫(xiě)的是其它子域名，比如 abc.mygit.me，那么訪問(wèn)?http://abc.mygit.me?沒(méi)問(wèn)題，但是訪問(wèn)?http://mygit.me?，不會(huì)自動(dòng)跳轉(zhuǎn)到?http://abc.mygit.me

另外說(shuō)一句，在你綁定了新域名之后，原來(lái)的你的用戶(hù)名.github.io并沒(méi)有失效，而是會(huì)自動(dòng)跳轉(zhuǎn)到你的新域名。

配置SSH key

為什么要配置這個(gè)呢？因?yàn)槟闾峤淮a肯定要擁有你的github權(quán)限才可以，但是直接使用用戶(hù)名和密碼太不安全了，所以我們使用ssh key來(lái)解決本地和服務(wù)器的連接問(wèn)題。

用git bash執(zhí)行如下命令：

$ cd ~/. ssh #檢查本機(jī)已存在的ssh密鑰

如果提示：No such file or directory 說(shuō)明你是第一次使用git。

ssh-keygen -t rsa -C "郵件地址"

然后連續(xù)3次回車(chē)，最終會(huì)生成一個(gè)文件在用戶(hù)目錄下，打開(kāi)用戶(hù)目錄，找到.ssh\id_rsa.pub文件，記事本打開(kāi)并復(fù)制里面的內(nèi)容，打開(kāi)你的github主頁(yè)，進(jìn)入個(gè)人設(shè)置 -> SSH and GPG keys -> New SSH key：

將剛復(fù)制的內(nèi)容粘貼到key那里，title隨便填，保存。

3.1.?測(cè)試是否成功

$ ssh -T git@github.com # 注意郵箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?，輸入yes，然后會(huì)看到：

Hi liuxianan! You’ve successfully authenticated, but GitHub does not provide shell access.

看到這個(gè)信息說(shuō)明SSH已配置成功！

此時(shí)你還需要配置：

$ git config --global user.name "liuxianan"// 你的github用戶(hù)名，非昵稱(chēng) $ git config --global user.email "xxx@qq.com"// 填寫(xiě)你的github注冊(cè)郵箱

具體這個(gè)配置是干嘛的我沒(méi)仔細(xì)深究。

使用hexo寫(xiě)博客

4.1.?hexo簡(jiǎn)介

Hexo是一個(gè)簡(jiǎn)單、快速、強(qiáng)大的基于 Github Pages 的博客發(fā)布工具，支持Markdown格式，有眾多優(yōu)秀插件和主題。

官網(wǎng)：?http://hexo.io
github:?https://github.com/hexojs/hexo

4.2.?原理

由于github pages存放的都是靜態(tài)文件，博客存放的不只是文章內(nèi)容，還有文章列表、分類(lèi)、標(biāo)簽、翻頁(yè)等動(dòng)態(tài)內(nèi)容，假如每次寫(xiě)完一篇文章都要手動(dòng)更新博文目錄和相關(guān)鏈接信息，相信誰(shuí)都會(huì)瘋掉，所以hexo所做的就是將這些md文件都放在本地，每次寫(xiě)完文章后調(diào)用寫(xiě)好的命令來(lái)批量完成相關(guān)頁(yè)面的生成，然后再將有改動(dòng)的頁(yè)面提交到github。

4.3.?注意事項(xiàng)

安裝之前先來(lái)說(shuō)幾個(gè)注意事項(xiàng)：

很多命令既可以用Windows的cmd來(lái)完成，也可以使用git bash來(lái)完成，但是部分命令會(huì)有一些問(wèn)題，為避免不必要的問(wèn)題，建議全部使用git bash來(lái)執(zhí)行；

hexo不同版本差別比較大，網(wǎng)上很多文章的配置信息都是基于2.x的，所以注意不要被誤導(dǎo)；

hexo有2種_config.yml文件，一個(gè)是根目錄下的全局的_config.yml，一個(gè)是各個(gè)theme下的；

4.4.?安裝

$ npm install -g hexo

4.5.?初始化

在電腦的某個(gè)地方新建一個(gè)名為hexo的文件夾（名字可以隨便取），比如我的是F:\Workspaces\hexo，由于這個(gè)文件夾將來(lái)就作為你存放代碼的地方，所以最好不要隨便放。

$ cd /f/Workspaces/hexo/ $ hexo init

hexo會(huì)自動(dòng)下載一些文件到這個(gè)目錄，包括node_modules，目錄結(jié)構(gòu)如下圖：

$ hexo g # 生成 $ hexo s # 啟動(dòng)服務(wù)

執(zhí)行以上命令之后，hexo就會(huì)在public文件夾生成相關(guān)html文件，這些文件將來(lái)都是要提交到github去的：

hexo s是開(kāi)啟本地預(yù)覽服務(wù)，打開(kāi)瀏覽器訪問(wèn)?http://localhost:4000?即可看到內(nèi)容，很多人會(huì)碰到瀏覽器一直在轉(zhuǎn)圈但是就是加載不出來(lái)的問(wèn)題，一般情況下是因?yàn)槎丝谡加玫木壒?#xff0c;因?yàn)?000這個(gè)端口太常見(jiàn)了，解決端口沖突問(wèn)題請(qǐng)參考這篇文章：

http://blog.liuxianan.com/windows-port-bind.html

4.6.?修改主題

既然默認(rèn)主題很丑，那我們別的不做，首先來(lái)替換一個(gè)好看點(diǎn)的主題。這是?官方主題。

個(gè)人比較喜歡的2個(gè)主題：hexo-theme-jekyll?和?hexo-theme-yilia。

首先下載這個(gè)主題：

$ cd /f/Workspaces/hexo/ $ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

下載后的主題都在這里：

修改_config.yml中的theme: landscape改為theme: yilia，然后重新執(zhí)行hexo g來(lái)重新生成。

如果出現(xiàn)一些莫名其妙的問(wèn)題，可以先執(zhí)行hexo clean來(lái)清理一下public的內(nèi)容，然后再來(lái)重新生成和發(fā)布。

4.7.?上傳之前

在上傳代碼到github之前，一定要記得先把你以前所有代碼下載下來(lái)（雖然github有版本管理，但備份一下總是好的），因?yàn)閺膆exo提交代碼時(shí)會(huì)把你以前的所有代碼都刪掉。

4.8.?上傳到github

如果你一切都配置好了，發(fā)布上傳很容易，一句hexo d就搞定，當(dāng)然關(guān)鍵還是你要把所有東西配置好。

首先，ssh key肯定要配置好。

其次，配置_config.yml中有關(guān)deploy的部分：

正確寫(xiě)法：

deploy:type: gitrepository: git@github.com:liuxianan/liuxianan.github.io.gitbranch: master

錯(cuò)誤寫(xiě)法：

deploy:type: githubrepository: https://github.com/liuxianan/liuxianan.github.io.gitbranch: master

后面一種寫(xiě)法是hexo2.x的寫(xiě)法，現(xiàn)在已經(jīng)不行了，無(wú)論是哪種寫(xiě)法，此時(shí)直接執(zhí)行hexo d的話一般會(huì)報(bào)如下錯(cuò)誤：

Deployer not found: github 或者 Deployer not found: git

原因是還需要安裝一個(gè)插件：

npm install hexo-deployer-git --save

其它命令不確定，部署這個(gè)命令一定要用git bash，否則會(huì)提示Permission denied (publickey).

打開(kāi)你的git bash，輸入hexo d就會(huì)將本次有改動(dòng)的代碼全部提交，沒(méi)有改動(dòng)的不會(huì)：

4.9.?保留CNAME、README.md等文件

提交之后網(wǎng)頁(yè)上一看，發(fā)現(xiàn)以前其它代碼都沒(méi)了，此時(shí)不要慌，一些非md文件可以把他們放到source文件夾下，這里的所有文件都會(huì)原樣復(fù)制（除了md文件）到public目錄的：

由于hexo默認(rèn)會(huì)把所有md文件都轉(zhuǎn)換成html，包括README.md，所有需要每次生成之后、上傳之前，手動(dòng)將README.md復(fù)制到public目錄，并刪除README.html。

4.10.?常用hexo命令

常見(jiàn)命令

hexo new "postName" #新建文章 hexo new page "pageName" #新建頁(yè)面 hexo generate #生成靜態(tài)頁(yè)面至public目錄 hexo server #開(kāi)啟預(yù)覽訪問(wèn)端口（默認(rèn)端口4000，'ctrl + c'關(guān)閉server） hexo deploy #部署到GitHub hexo help # 查看幫助 hexo version #查看Hexo的版本

縮寫(xiě)：

hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy

組合命令：

hexo s -g #生成并本地預(yù)覽 hexo d -g #生成并上傳

4.11.?_config.yml

這里面都是一些全局配置，每個(gè)參數(shù)的意思都比較簡(jiǎn)單明了，所以就不作詳細(xì)介紹了。

需要特別注意的地方是，冒號(hào)后面必須有一個(gè)空格，否則可能會(huì)出問(wèn)題。

4.12.?寫(xiě)博客

定位到我們的hexo根目錄，執(zhí)行命令：

hexo new 'my-first-blog'

hexo會(huì)幫我們?cè)赺posts下生成相關(guān)md文件：

我們只需要打開(kāi)這個(gè)文件就可以開(kāi)始寫(xiě)博客了，默認(rèn)生成如下內(nèi)容：

當(dāng)然你也可以直接自己新建md文件，用這個(gè)命令的好處是幫我們自動(dòng)生成了時(shí)間。

一般完整格式如下：

--- title: postName #文章頁(yè)面上的顯示名稱(chēng)，一般是中文 date: 2013-12-02 15:30:16 #文章生成時(shí)間，一般不改，當(dāng)然也可以任意修改 categories: 默認(rèn)分類(lèi) #分類(lèi) tags: [tag1,tag2,tag3] #文章標(biāo)簽，可空，多標(biāo)簽請(qǐng)用格式，注意:后面有個(gè)空格 description: 附加一段文章摘要，字?jǐn)?shù)最好在140字以?xún)?nèi)，會(huì)出現(xiàn)在meta的description里面 ---以下是正文

那么hexo new page 'postName'命令和hexo new 'postName'有什么區(qū)別呢？

hexo new page "my-second-blog"

生成如下：

最終部署時(shí)生成：hexo\public\my-second-blog\index.html，但是它不會(huì)作為文章出現(xiàn)在博文目錄。

4.12.1.?寫(xiě)博客工具

那么用什么工具寫(xiě)博客呢？這個(gè)我還沒(méi)去找，以前自己使用editor.md簡(jiǎn)單弄了個(gè)，大家有好用的hexo寫(xiě)博客工具可以推薦個(gè)。

4.12.2.?如何讓博文列表不顯示全部?jī)?nèi)容

默認(rèn)情況下，生成的博文目錄會(huì)顯示全部的文章內(nèi)容，如何設(shè)置文章摘要的長(zhǎng)度呢？

答案是在合適的位置加上<!--more-->即可，例如：

# 前言使用github pages服務(wù)搭建博客的好處有：1. 全是靜態(tài)文件，訪問(wèn)速度快； 2. 免費(fèi)方便，不用花一分錢(qián)就可以搭建一個(gè)自由的個(gè)人博客，不需要服務(wù)器不需要后臺(tái)； 3. 可以隨意綁定自己的域名，不仔細(xì)看的話根本看不出來(lái)你的網(wǎng)站是基于github的；<!--more-->4. 數(shù)據(jù)絕對(duì)安全，基于github的版本管理，想恢復(fù)到哪個(gè)歷史版本都行； 5. 博客內(nèi)容可以輕松打包、轉(zhuǎn)移、發(fā)布到其它平臺(tái)； 6. 等等；

最終效果：

本文僅限入門(mén)學(xué)習(xí)，關(guān)于hexo搭建個(gè)人博客的更高級(jí)玩法大家可以另找教程。

參考：

http://www.cnblogs.com/zhcncn/p/4097881.html

http://www.jianshu.com/p/05289a4bc8b2

總結(jié)

以上是生活随笔為你收集整理的免费个人博客：使用hexo+github搭建详细教程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。