手把手教你用Hexo+Github搭建屬于自己的博客(詳細(xì)圖文)

在大三的時(shí)候，一直就想搭建屬于自己的一個(gè)博客，但由于各種原因，最終都不了了之，恰好最近比較有空，于是就自己參照網(wǎng)上的教程，搭建了屬于自己的博客。

至于為什么要搭建自己的博客了？

哈哈，大概是為了裝逼吧，同時(shí)自己搭建博客的話，樣式的選擇也比較自由，可以自己選擇，不需要受限于各大平臺(tái)。

轉(zhuǎn)載請注明原博客地址：手把手教你用Hexo+Github 搭建屬于自己的博客

大概可以分為以下幾個(gè)步驟

搭建環(huán)境準(zhǔn)備（包括node.js和git環(huán)境，gitHub賬戶的配置）
安裝Hexo
配置Hexo
怎樣將Hexo與github page 聯(lián)系起來
怎樣發(fā)布文章
主題 推薦
主題Net的簡單配置
添加sitemap和feed插件
添加404 公益頁面
搭建環(huán)境準(zhǔn)備

大概可以分為以下三步
- Node.js 的安裝和準(zhǔn)備
- git的安裝和準(zhǔn)備
- gitHub賬戶的配置

配置Node.js環(huán)境

下載Node.js安裝文件：

• Windows Installer 32-bit
• Windows Installer 64-bit

根據(jù)自己的Windows版本選擇相應(yīng)的安裝文件，要是不知道，就安裝32-bit的吧- -。

可以通過我的電腦 > 右鍵 > 屬性

如圖所示：

保持默認(rèn)設(shè)置即可，一路Next，安裝很快就結(jié)束了。 然后我們檢查一下是不是要求的組件都安裝好了，同時(shí)按下Win和R，打開運(yùn)行窗口：

Windows的運(yùn)行界面

在新打開的窗口中輸入cmd，敲擊回車，打開命令行界面。（下文將直接用打開命令行來表示以上操作，記住哦~） 在打開的命令行界面中，輸入

node -vnpm -v

如果結(jié)果如下圖所示，則說明安裝正確，可以進(jìn)行下一步了，如果不正確，則需要回頭檢查自己的安裝過程。

配置Git環(huán)境

下載Git安裝文件：

GIt官網(wǎng)下載地址：

Git-2.6.3-64-bit.exe

然后就進(jìn)入了Git的安裝界面，如圖：

Git安裝界面

和Node.js一樣，大部分設(shè)置都只需要保持默認(rèn)，但是出于我們操作方便考慮，建議PATH選項(xiàng)按照下圖選擇：

Git PATH設(shè)置

這是對上圖的解釋，不需要了解請直接跳過 Git的默認(rèn)設(shè)置下，出于安全考慮，只有在Git Bash中才能進(jìn)行Git的相關(guān)操作。按照上圖進(jìn)行的選擇，將會(huì)使得Git安裝程序在系統(tǒng)PATH中加入Git的相關(guān)路徑，使得你可以在CMD界面下調(diào)用Git，不用打開Git Bash了。
一樣的，我們來檢查一下Git是不是安裝正確了，打開命令行，輸入：

git --version

如果結(jié)果如下圖所示，則說明安裝正確，可以進(jìn)行下一步了，如果不正確，則需要回頭檢查自己的安裝過程。

關(guān)于 git的下載即安裝，可以參考我的這一篇博客： Git下載及配置環(huán)境變量

github賬戶的注冊和配置

如果已經(jīng)擁有賬號，請?zhí)^此步~

Github注冊

打開https://github.com/，在下圖的框中，分別輸入自己的用戶名，郵箱，密碼。

然后前往自己剛才填寫的郵箱，點(diǎn)開Github發(fā)送給你的注冊確認(rèn)信，確認(rèn)注冊，結(jié)束注冊流程。

一定要確認(rèn)注冊，否則無法使用gh-pages！

創(chuàng)建代碼庫

登陸之后，點(diǎn)擊頁面右上角的加號，選擇New repository：

新建代碼庫

進(jìn)入代碼庫創(chuàng)建頁面：

在Repository name下填寫yourname.github.io，Description (optional)下填寫一些簡單的描述（不寫也沒有關(guān)系），如圖所示：

注意：比如我的github名稱是gdutxiaoxu ,這里你就填 gdutxiaoxu.github.io,如果你的名字是xujun，那你就填 xujun.github.io

代碼庫設(shè)置

正確創(chuàng)建之后，你將會(huì)看到如下界面：

接下來開啟gh-pages功能，點(diǎn)擊界面右側(cè)的Settings，你將會(huì)打開這個(gè)庫的setting頁面，向下拖動(dòng)，直到看見GitHub Pages，如圖：

Github pages

點(diǎn)擊Automatic page generator，Github將會(huì)自動(dòng)替你創(chuàng)建出一個(gè)gh-pages的頁面。 如果你的配置沒有問題，那么大約15分鐘之后，yourname.github.io這個(gè)網(wǎng)址就可以正常訪問了~ 如果yourname.github.io已經(jīng)可以正常訪問了，那么Github一側(cè)的配置已經(jīng)全部結(jié)束了。

到此搭建hexo博客的相關(guān)環(huán)境配置已經(jīng)完成，下面開始講解Hexo的相關(guān)配置

安裝Hexo

在自己認(rèn)為合適的地方創(chuàng)建一個(gè)文件夾，這里我以E：/hexo 為例子講解，首先在E盤目錄下創(chuàng)建Hexo文件夾，并在命令行的窗口進(jìn)入到該目錄

在命令行中輸入：

npm install hexo-cli -g

然后你將會(huì)看到:

可能你會(huì)看到一個(gè)WARN，但是不用擔(dān)心，這不會(huì)影響你的正常使用。 然后輸入

npm install hexo --save

然后你會(huì)看到命令行窗口刷了一大堆白字，下面我們來看一看Hexo是不是已經(jīng)安裝好了。 在命令行中輸入：

hexo -v

如果你看到了如圖文字，則說明已經(jīng)安裝成功了。

hexo的相關(guān)配置初始化Hexo

接著上面的操作，輸入：

hexo init

然后輸入：

npm install

之后npm將會(huì)自動(dòng)安裝你需要的組件，只需要等待npm操作即可。

首次體驗(yàn)Hexo

繼續(xù)操作，同樣是在命令行中，輸入：

hexo g

然后輸入：

hexo s

然后會(huì)提示：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

在瀏覽器中打開http://localhost:4000/，你將會(huì)看到：

到目前為止，Hexo在本地的配置已經(jīng)全都結(jié)束了。

下面會(huì)講解怎樣將Hexo與github page 聯(lián)系起來

怎樣將Hexo與github page 聯(lián)系起來

大概分為以下幾步
- 配置git個(gè)人信息
- 配置Deployment

配置Git個(gè)人信息

如果你之前已經(jīng)配置好git個(gè)人信息，請?zhí)^這一個(gè) 步驟，直接來到

1、設(shè)置Git的user name和email：(如果是第一次的話)

git config --global user.name "xujun"
git config --global user.email "gdutxiaoxu@163.com"

2、生成密鑰

ssh-keygen -t rsa -C "gdutxiaoxu@163.com"

配置Deployment

同樣在_config.yml文件中，找到Deployment，然后按照如下修改：

deploy:
 type: git
 repo: git@github.com:yourname/yourname.github.io.git
 branch: master

比如我的倉庫的地址是git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git，所以配置如下

deploy:
 type: git
 repo: git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git
 branch: master

寫博客、發(fā)布文章

新建一篇博客，執(zhí)行下面的命令：

hexo new post "article title"

這時(shí)候在我的 電腦的目錄下 F:\hexo\source\ _posts 將會(huì)看到 article title.md 文件

用MarDown編輯器打開就可以編輯文章了。文章編輯好之后，運(yùn)行生成、部署命令：

hexo g // 生成
hexo d // 部署

當(dāng)然你也可以執(zhí)行下面的命令，相當(dāng)于上面兩條命令的效果

hexo d -g #在部署前先生成

部署成功后訪問 你的地址，https://yourName.github.io（這里輸入我的地址： https://gdutxiao.github.io ),將可以看到生成的文章。

踩坑提醒

1）注意需要提前安裝一個(gè)擴(kuò)展：

npm install hexo-deployer-git --save

如果沒有執(zhí)行者行命令，將會(huì)提醒

deloyer not found:git

2）如果出現(xiàn)下面這樣的錯(cuò)誤，

Permission denied (publickey). 
fatal: Could not read from remote repository. 
Please make sure you have the correct access rights 
and the repository exists.

則是因?yàn)闆]有設(shè)置好public key所致。
在本機(jī)生成public key,不懂的可以參考我的這一篇博客Git ssh 配置及使用

主題推薦

每個(gè)不同的主題會(huì)需要不同的配置，主題配置文件在主題目錄下的_config.yml。有兩個(gè)比較好的主題推薦給大家。

Yilia

Yilia 是為 hexo 2.4+制作的主題。
崇尚簡約優(yōu)雅，以及極致的性能。

Yilia地址

NexT

我的網(wǎng)站就是采用這個(gè)主題，簡潔美觀。
目前Github上Star最高的Hexo主題，支持幾種不同的風(fēng)格。
作者提供了非常完善的配置說明。

Net主題的配置

在 Hexo 中有兩份主要的配置文件，其名稱都是 _config.yml。 其中，一份位于站點(diǎn)根目錄下，主要包含 Hexo 本身的配置；另一份位于主題目錄下，這份配置由主題作者提供，主要用于配置主題相關(guān)的選項(xiàng)。

為了描述方便，在以下說明中，將前者稱為 站點(diǎn)配置文件， 后者稱為 主題配置文件。

比如我的電腦下的 F:\hexo 目錄下的成為 站點(diǎn)配置文件，F(xiàn):\hexo\themes\next 目錄下的成為主題配置文件。

1. 安裝 NexT

Hexo 安裝主題的方式非常簡單，只需要將主題文件拷貝至站點(diǎn)目錄的 themes 目錄下， 然后修改下配置文件即可。具體到 NexT 來說，安裝步驟如下。

下載主題

如果你熟悉 Git， 建議你使用 克隆最新版本 的方式，之后的更新可以通過 git pull 來快速更新， 而不用再次下載壓縮包替換。

克隆最新版本
下載穩(wěn)定版本
在終端窗口下，定位到 Hexo 站點(diǎn)目錄下。使用 Git checkout 代碼：

cd your-hexo-site
git clone https://github.com/iissnan/hexo-theme-next themes/next

2. 啟用主題

與所有 Hexo 主題啟用的模式一樣。 當(dāng) 克隆/下載 完成后，打開 站點(diǎn)配置文件， 找到 theme 字段，并將其值更改為 next。

啟用 NexT 主題

theme: next

到此，NexT 主題安裝完成。下一步我們將驗(yàn)證主題是否正確啟用。在切換主題之后、驗(yàn)證之前， 我們最好使用 hexo clean 來清除 Hexo 的緩存。

3. 驗(yàn)證主題

首先啟動(dòng) Hexo 本地站點(diǎn)，并開啟調(diào)試模式（即加上 –debug），整個(gè)命令是 hexo s –debug。 在服務(wù)啟動(dòng)的過程，注意觀察命令行輸出是否有任何異常信息，如果你碰到問題，這些信息將幫助他人更好的定位錯(cuò)誤。 當(dāng)命令行輸出中提示出：

INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

此時(shí)即可使用瀏覽器訪問 http://localhost:4000 ，檢查站點(diǎn)是否正確運(yùn)行。

當(dāng)你看到站點(diǎn)的外觀與下圖所示類似時(shí)即說明你已成功安裝 NexT 主題。這是 NexT 默認(rèn)的 Scheme —— Muse

現(xiàn)在，你已經(jīng)成功安裝并啟用了 NexT 主題。下一步我們將要更改一些主題的設(shè)定，包括個(gè)性化以及集成第三方服務(wù)。

4. 主題設(shè)定

選擇 Scheme

Scheme 是 NexT 提供的一種特性，借助于 Scheme，NexT 為你提供多種不同的外觀。同時(shí)，幾乎所有的配置都可以 在 Scheme 之間共用。目前 NexT 支持三種 Scheme，他們是：

Muse - 默認(rèn) Scheme，這是 NexT 最初的版本，黑白主調(diào)，大量留白
Mist - Muse 的緊湊版本，整潔有序的單欄外觀
Pisces - 雙欄 Scheme，小家碧玉似的清新
Scheme 的切換通過更改 主題配置文件，搜索 scheme 關(guān)鍵字。 你會(huì)看到有三行 scheme 的配置，將你需用啟用的 scheme 前面

注釋 # 即可。

選擇 Pisce Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces

5. 設(shè)置 語言

編輯 站點(diǎn)配置文件， 將 language 設(shè)置成你所需要的語言。建議明確設(shè)置你所需要的語言，例如選用簡體中文，配置如下：

language: zh-Hans

目前 NexT 支持的語言如以下表格所示：