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

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

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

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

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

搭建環(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é)束了。 然后我們檢查一下是不是要求的組件都安裝好了，同時按下Win和R，打開運行窗口：

Windows的運行界面

在新打開的窗口中輸入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選項按照下圖選擇：

Git PATH設(shè)置

這是對上圖的解釋，不需要了解請直接跳過 Git的默認(rèn)設(shè)置下，出于安全考慮，只有在Git Bash中才能進(jìn)行Git的相關(guān)操作。按照上圖進(jìn)行的選擇，將會使得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/，在下圖的框中，分別輸入自己的用戶名，郵箱，密碼。

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

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

創(chuàng)建代碼庫

登陸之后，點擊頁面右上角的加號，選擇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)建之后，你將會看到如下界面：

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

Github pages

點擊Automatic page generator，Github將會自動替你創(chuàng)建出一個gh-pages的頁面。 如果你的配置沒有問題，那么大約15分鐘之后，yourname.github.io這個網(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)建一個文件夾，這里我以E：/hexo 為例子講解，首先在E盤目錄下創(chuàng)建Hexo文件夾，并在命令行的窗口進(jìn)入到該目錄

在命令行中輸入：

npm install hexo-cli -g

然后你將會看到:

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

npm install hexo --save

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

hexo -v

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

hexo的相關(guān)配置初始化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在本地的配置已經(jīng)全都結(jié)束了。

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

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

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

配置Git個人信息

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

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"

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

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

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

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

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

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

踩坑提醒

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

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.

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

主題推薦

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

Yilia

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

Yilia地址

NexT

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

Net主題的配置

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

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

比如我的電腦下的 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 主題啟用的模式一樣。 當(dāng) 克隆/下載 完成后，打開 站點配置文件， 找到 theme 字段，并將其值更改為 next。

啟用 NexT 主題

theme: next

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

3. 驗證主題

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

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

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

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

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

4. 主題設(shè)定

選擇 Scheme

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

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

注釋 # 即可。

選擇 Pisce Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces

5. 設(shè)置 語言

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

language: zh-Hans

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

6. 設(shè)置 菜單

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

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

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

菜單示例配置

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

若你的站點運行在子目錄中，請將鏈接前綴的 / 去掉

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

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

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

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

設(shè)定菜單項的圖標(biāo)，對應(yīng)的字段是 menu_icons。 此設(shè)定格式是 item name: icon name，其中 item name 與上一步所配置的菜單名字對應(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)開啟的情況下，如果菜單項與菜單未匹配（沒有設(shè)置或者無效的 Font Awesome 圖標(biāo)名字） 的情況下，NexT 將會使用 作為圖標(biāo)。

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

7. 側(cè)欄

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

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

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

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

sidebar:
position: left

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

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

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

8. 設(shè)置 頭像

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

頭像設(shè)置示例

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

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

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

10. 站點描述

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

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

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)這兩個文件已經(jīng)成功生成了。

添加404 頁面

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

推薦使用騰訊公益404

我的404頁面配置如下

<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="回到我的主頁">
</script>

</body>
</html>

參考博客

Hexo主頁

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

我的git系列參考教程

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

最新評論