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

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

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

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

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

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

這是對(duì)上圖的解釋，不需要了解請(qǐng)直接跳過 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賬戶的注冊(cè)和配置

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

Github注冊(cè)

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

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

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

創(chuàng)建代碼庫(kù)

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

新建代碼庫(kù)

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

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

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

代碼庫(kù)設(shè)置

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

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

Github pages

點(diǎn)擊Automatic page generator，Github將會(huì)自動(dòng)替你創(chuàng)建出一個(gè)gh-pages的頁(yè)面。 如果你的配置沒有問題，那么大約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è)人信息，請(qǐng)?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

比如我的倉(cāng)庫(kù)的地址是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+制作的主題。
崇尚簡(jiǎn)約優(yōu)雅，以及極致的性能。

Yilia地址

NexT

我的網(wǎng)站就是采用這個(gè)主題，簡(jiǎn)潔美觀。
目前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 安裝主題的方式非常簡(jiǎn)單，只需要將主題文件拷貝至站點(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è)置 語(yǔ)言

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

language: zh-Hans

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

6. 設(shè)置 菜單

菜單配置包括三個(gè)部分，第一是菜單項(xiàng)（名稱和鏈接），第二是菜單項(xiàng)的顯示文本，第三是菜單項(xiàng)對(duì)應(yīng)的圖標(biāo)。 NexT 使用的是 Font Awesome 提供的圖標(biāo)， Font Awesome 提供了 600+ 的圖標(biāo)，可以滿足絕大的多數(shù)的場(chǎng)景，同時(shí)無(wú)須擔(dān)心在 Retina 屏幕下 圖標(biāo)模糊的問題。

編輯 主題配置文件，修改以下內(nèi)容：

設(shè)定菜單內(nèi)容，對(duì)應(yīng)的字段是 menu。 菜單內(nèi)容的設(shè)置格式是：item name: link。其中 item name 是一個(gè)名稱，這個(gè)名稱并不直接顯示在頁(yè)面上，她將用于匹配圖標(biāo)以及翻譯。

菜單示例配置

menu:
 home: /
 archives: /archives
 #about: /about
 #categories: /categories
 tags: /tags
 #commonweal: /404.html

若你的站點(diǎn)運(yùn)行在子目錄中，請(qǐng)將鏈接前綴的 / 去掉

NexT 默認(rèn)的菜單項(xiàng)有（標(biāo)注 的項(xiàng)表示需要手動(dòng)創(chuàng)建這個(gè)頁(yè)面）：

設(shè)置菜單項(xiàng)的顯示文本。在第一步中設(shè)置的菜單的名稱并不直接用于界面上的展示。Hexo 在生成的時(shí)候?qū)⑹褂?這個(gè)名稱查找對(duì)應(yīng)的語(yǔ)言翻譯，并提取顯示文本。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml （{language} 為你所使用的語(yǔ)言）。

以簡(jiǎn)體中文為例，若你需要添加一個(gè)菜單項(xiàng)，比如 something。那么就需要修改簡(jiǎn)體中文對(duì)應(yīng)的翻譯文件 languages/zh-Hans.yml，在 menu 字段下添加一項(xiàng)：

menu:
 home: 首頁(yè)
 archives: 歸檔
 categories: 分類
 tags: 標(biāo)簽
 about: 關(guān)于
 search: 搜索
 commonweal: 公益404
 something: 有料

設(shè)定菜單項(xiàng)的圖標(biāo)，對(duì)應(yīng)的字段是 menu_icons。 此設(shè)定格式是 item name: icon name，其中 item name 與上一步所配置的菜單名字對(duì)應(yīng)，icon name 是 Font Awesome 圖標(biāo)的 名字。而 enable 可用于控制是否顯示圖標(biāo)，你可以設(shè)置成 false 來去掉圖標(biāo)。

菜單圖標(biāo)配置示例

menu_icons:
 enable: true
 # Icon Mapping.
 home: home
 about: user
 categories: th
 tags: tags
 archives: archive
 commonweal: heartbeat

在菜單圖標(biāo)開啟的情況下，如果菜單項(xiàng)與菜單未匹配（沒有設(shè)置或者無(wú)效的 Font Awesome 圖標(biāo)名字） 的情況下，NexT 將會(huì)使用 作為圖標(biāo)。

請(qǐng)注意鍵值（如 home）的大小寫要嚴(yán)格匹配

7. 側(cè)欄

默認(rèn)情況下，側(cè)欄僅在文章頁(yè)面（擁有目錄列表）時(shí)才顯示，并放置于右側(cè)位置。 可以通過修改 主題配置文件 中的 sidebar 字段來控制側(cè)欄的行為。側(cè)欄的設(shè)置包括兩個(gè)部分，其一是側(cè)欄的位置， 其二是側(cè)欄顯示的時(shí)機(jī)。

設(shè)置側(cè)欄的位置，修改 sidebar.position 的值，支持的選項(xiàng)有：

left - 靠左放置
right - 靠右放置

目前僅 Pisces Scheme 支持 position 配置。影響版本5.0.0及更低版本。

sidebar:
position: left

設(shè)置側(cè)欄顯示的時(shí)機(jī)，修改 sidebar.display 的值，支持的選項(xiàng)有：

post - 默認(rèn)行為，在文章頁(yè)面（擁有目錄列表）時(shí)顯示
always - 在所有頁(yè)面中都顯示
hide - 在所有頁(yè)面中都隱藏（可以手動(dòng)展開）
remove - 完全移除
sidebar:
display: post

已知側(cè)欄在 use motion: false 的情況下不會(huì)展示。 影響版本5.0.0及更低版本。

8. 設(shè)置 頭像

編輯 站點(diǎn)配置文件， 新增字段 avatar， 值設(shè)置成頭像的鏈接地址。其中，頭像的鏈接地址可以是：

頭像設(shè)置示例

avatar: http://example.com/avtar.

9. 設(shè)置 作者昵稱

編輯 站點(diǎn)配置文件， 設(shè)置 author 為你的昵稱。

10. 站點(diǎn)描述

編輯 站點(diǎn)配置文件， 設(shè)置

字段為你的站點(diǎn)描述。站點(diǎn)描述可以是你喜歡的一句簽名:)

net主題的官方文檔地址

添加插件

添加sitemap和feed插件

切換到你本地的hexo 目錄CIA，在命令行窗口，屬兔以下命令

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

修改_config.yml，增加以下內(nèi)容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
type: atom
path: atom.xml
limit: 20
#sitemap
sitemap:
path: sitemap.xml

再執(zhí)行以下命令，部署服務(wù)端

hexo d -g

配完之后，就可以訪問 https://gdutxiaoxu.github.io/atom.xml 和 https://gdutxiaoxu.github.io/sitemap.xml ，發(fā)現(xiàn)這兩個(gè)文件已經(jīng)成功生成了。

添加404 頁(yè)面

GitHub Pages有提供制作404頁(yè)面的指引：Custom 404 Pages 
直接在根目錄下創(chuàng)建自己的404.html或者404.md就可以。但是自定義404頁(yè)面僅對(duì)綁定頂級(jí)域名的項(xiàng)目才起作用，GitHub默認(rèn)分配的二級(jí)域名是不起作用的，使用hexo server在本機(jī)調(diào)試也是不起作用的。

推薦使用騰訊公益404

我的404頁(yè)面配置如下

<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 <meta name="robots" content="all" />
 <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="https://www.qq.com/404/search_children.js"
  charset="utf-8" homePageUrl="gdutxiaoxu.github.io"
  homePageName="回到我的主頁(yè)">
</script>

</body>
</html>

參考博客

Hexo主頁(yè)

史上最詳細(xì)的Hexo博客搭建圖文教程

我的git系列參考教程

Git下載及配置環(huán)境變量
Git 命令行教程及實(shí)例教程
Git ssh 配置及使用
git ssh 配置多個(gè)賬戶
轉(zhuǎn)載請(qǐng)注明原博客地址：手把手教你用Hexo+Github 搭建屬于自己的博客