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

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

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

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

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

大概可以分為以下幾個步驟

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

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

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

下載Node.js安裝文件：

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

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

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

如圖所示：

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

Windows的運行界面

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

node -vnpm -v

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

配置Git環(huán)境

下載Git安裝文件：

GIt官網下載地址：

Git-2.6.3-64-bit.exe

然后就進入了Git的安裝界面，如圖：

Git安裝界面

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

Git PATH設置

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

git --version

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

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

github賬戶的注冊和配置

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

Github注冊

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

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

一定要確認注冊，否則無法使用gh-pages！

創(chuàng)建代碼庫

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

新建代碼庫

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

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

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

代碼庫設置

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

接下來開啟gh-pages功能，點擊界面右側的Settings，你將會打開這個庫的setting頁面，向下拖動，直到看見GitHub Pages，如圖：

Github pages

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

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

安裝Hexo

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

在命令行中輸入：

npm install hexo-cli -g

然后你將會看到:

可能你會看到一個WARN，但是不用擔心，這不會影響你的正常使用。 然后輸入

npm install hexo --save

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

hexo -v

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

hexo的相關配置初始化Hexo

接著上面的操作，輸入：

hexo init

然后輸入：

npm install

之后npm將會自動安裝你需要的組件，只需要等待npm操作即可。

首次體驗Hexo

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

hexo g

然后輸入：

hexo s

然后會提示：

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

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

到目前為止，Hexo在本地的配置已經全都結束了。

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

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

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

配置Git個人信息

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

1、設置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"

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

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

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

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

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

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

踩坑提醒

1）注意需要提前安裝一個擴展：

npm install hexo-deployer-git --save

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

deloyer not found:git

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

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

則是因為沒有設置好public key所致。
在本機生成public key,不懂的可以參考我的這一篇博客Git ssh 配置及使用

主題推薦

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

Yilia

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

Yilia地址

NexT

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

Net主題的配置

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

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

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

1. 安裝 NexT

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

下載主題

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

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

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

2. 啟用主題

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

啟用 NexT 主題

theme: next

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

3. 驗證主題

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

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

此時即可使用瀏覽器訪問 http://localhost:4000 ，檢查站點是否正確運行。

當你看到站點的外觀與下圖所示類似時即說明你已成功安裝 NexT 主題。這是 NexT 默認的 Scheme —— Muse

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

4. 主題設定

選擇 Scheme

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

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

注釋 # 即可。

選擇 Pisce Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces

5. 設置 語言

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

language: zh-Hans

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