版權聲明：本文為博主原創(chuàng)文章骗绕，未經(jīng)博主允許不得轉(zhuǎn)載。
閑聊
在大三的時候贮泞，一直就想搭建屬于自己的一個博客楞慈，但由于各種原因幔烛，最終都不了了之，恰好最近比較有空囊蓝，于是就自己參照網(wǎng)上的教程饿悬，搭建了屬于自己的博客。
至于為什么要搭建自己的博客了聚霜？
哈哈狡恬，大概是為了裝逼吧，同時自己搭建博客的話蝎宇，樣式的選擇也比較自由弟劲，可以自己選擇，不需要受限于各大平臺姥芥。
大概可以分為以下幾個步驟
搭建環(huán)境準備（包括node.js和git環(huán)境兔乞，gitHub賬戶的配置）
安裝Hexo
配置Hexo
怎樣將Hexo與github page 聯(lián)系起來
怎樣發(fā)布文章
主題 推薦
主題Net的簡單配置
添加sitemap和feed插件
添加404 公益頁面
大概可以分為以下三步
-Node.js的安裝和準備
-Git的安裝和準備
- gitHub賬戶的配置
下載node.js安裝文件：
根據(jù)自己的Windows版本選擇相應的安裝文件，要是不知道凉唐，就安裝32-bit的吧- -庸追。 如圖所示：
保持默認設置即可，一路Next台囱，安裝很快就結(jié)束了淡溯。 然后我們檢查一下是不是要求的組件都安裝好了，同時按下Win和R玄坦，打開運行窗口：
Windows的運行界面
在新打開的窗口中輸入cmd血筑，敲擊回車，打開命令行界面煎楣。（下文將直接用打開命令行來表示以上操作豺总，記住哦~） 在打開的命令行界面中，輸入
node-vnpm-v
1
2
1
2
如果結(jié)果如下圖所示择懂，則說明安裝正確喻喳，可以進行下一步了，如果不正確困曙，則需要回頭檢查自己的安裝過程表伦。
下載git安裝文件：
然后就進入了Git的安裝界面，如圖：
Git安裝界面
和Node.js一樣慷丽，大部分設置都只需要保持默認蹦哼，但是出于我們操作方便考慮，建議PATH選項按照下圖選擇：
Git PATH設置
這是對上圖的解釋要糊，不需要了解請直接跳過 Git的默認設置下纲熏，出于安全考慮，只有在Git Bash中才能進行Git的相關操作。按照上圖進行的選擇局劲，將會使得Git安裝程序在系統(tǒng)PATH中加入Git的相關路徑勺拣，使得你可以在CMD界面下調(diào)用Git，不用打開Git Bash了鱼填。
一樣的药有，我們來檢查一下Git是不是安裝正確了，打開命令行苹丸，輸入：
git--version
1
1
如果結(jié)果如下圖所示愤惰，則說明安裝正確，可以進行下一步了谈跛，如果不正確羊苟，則需要回頭檢查自己的安裝過程。
關于 git的下載即安裝感憾，可以參考我的這一篇博客：Git下載及配置環(huán)境變量
如果已經(jīng)擁有賬號蜡励，請?zhí)^此步~
Github注冊
打開https://github.com/，在下圖的框中阻桅，分別輸入自己的用戶名凉倚，郵箱，密碼嫂沉。
然后前往自己剛才填寫的郵箱稽寒，點開Github發(fā)送給你的注冊確認信，確認注冊趟章，結(jié)束注冊流程杏糙。
一定要確認注冊，否則無法使用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功能绷耍，點擊界面右側(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博客的相關環(huán)境配置已經(jīng)完成基公，下面開始講解Hexo的相關配置
在自己認為合適的地方創(chuàng)建一個文件夾幅慌，這里我以E：/hexo 為例子講解，首先在E盤目錄下創(chuàng)建Hexo文件夾轰豆，并在命令行的窗口進入到該目錄
在命令行中輸入：
npm install hexo-cli-g
1
1
然后你將會看到:
可能你會看到一個WARN胰伍，但是不用擔心，這不會影響你的正常使用酸休。 然后輸入
npminstallhexo--save
1
1
然后你會看到命令行窗口刷了一大堆白字骂租，下面我們來看一看Hexo是不是已經(jīng)安裝好了。 在命令行中輸入：
hexo-v
1
1
如果你看到了如圖文字斑司，則說明已經(jīng)安裝成功了渗饮。
初始化Hexo
接著上面的操作，輸入：
hexo init
1
1
然后輸入：
npminstall
1
1
之后npm將會自動安裝你需要的組件宿刮，只需要等待npm操作即可互站。
首次體驗Hexo
繼續(xù)操作，同樣是在命令行中僵缺，輸入：
hexo g
1
1
然后輸入：
hexo s
1
1
然后會提示：
INFO? Hexo is running athttp://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
如果你之前已經(jīng)配置好git個人信息倍谜，請?zhí)^這一個 步驟劣欢，直接來到
1嘀倒、設置Git的user name和email：(如果是第一次的話)
git config --globaluser.name"xujun"git config --globaluser.email"gdutxiaoxu@163.com"
1
2
1
2
2剩檀、生成密鑰
ssh-keygen-trsa-C"gdutxiaoxu@163.com"
1
1
同樣在_config.yml文件中限佩，找到Deployment树姨，然后按照如下修改：
deploy:type: git? repo: git@github.com:yourname/yourname.github.io.gitbranch: master
1
2
3
4
1
2
3
4
比如我的倉庫的地址是git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.git冤今，所以配置如下
deploy:type: git? repo: git@github.com:gdutxiaoxu/gdutxiaoxu.github.io.gitbranch: master
1
2
3
4
1
2
3
4
新建一篇博客，執(zhí)行下面的命令：
hexonewpost"article title"
1
1
這時候在我的 電腦的目錄下 F:\hexo\source\ _posts 將會看到? article title.md 文件
用MarDown編輯器打開就可以編輯文章了戏罢。文章編輯好之后屋谭，運行生成、部署命令：
hexo g// 生成hexo d// 部署
1
2
1
2
當然你也可以執(zhí)行下面的命令龟糕，相當于上面兩條命令的效果
hexo d -g#在部署前先生成
1
1
部署成功后訪問 你的地址桐磁，https://yourName.github.io（這里輸入我的地址：https://gdutxiao.github.io),將可以看到生成的文章。
踩坑提醒
1）注意需要提前安裝一個擴展：
npm install hexo-deployer-git--save
1
1
如果沒有執(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)雅衙吩，以及極致的性能互妓。
NexT
我的網(wǎng)站就是采用這個主題，簡潔美觀坤塞。
目前Github上Star最高的Hexo主題冯勉，支持幾種不同的風格。
作者提供了非常完善的配置說明摹芙。
在 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-sitegit clone https://github.com/iissnan/hexo-theme-next themes/next
1
2
1
2
2. 啟用主題
與所有 Hexo 主題啟用的模式一樣。 當 克隆/下載 完成后衣陶，打開 站點配置文件柄瑰， 找到 theme 字段闸氮，并將其值更改為 next。
啟用 NexT 主題
theme:next
1
1
到此教沾，NexT 主題安裝完成蒲跨。下一步我們將驗證主題是否正確啟用。在切換主題之后详囤、驗證之前财骨， 我們最好使用 hexo clean 來清除 Hexo 的緩存。
3. 驗證主題
首先啟動 Hexo 本地站點藏姐，并開啟調(diào)試模式（即加上 –debug），整個命令是 hexo s –debug该贾。 在服務啟動的過程羔杨，注意觀察命令行輸出是否有任何異常信息，如果你碰到問題杨蛋，這些信息將幫助他人更好的定位錯誤兜材。 當命令行輸出中提示出：
INFO? Hexo is running athttp://0.0.0.0:4000/. Press Ctrl+C to stop.
此時即可使用瀏覽器訪問http://localhost:4000，檢查站點是否正確運行逞力。
當你看到站點的外觀與下圖所示類似時即說明你已成功安裝 NexT 主題曙寡。這是 NexT 默認的 Scheme —— Muse
現(xiàn)在，你已經(jīng)成功安裝并啟用了 NexT 主題寇荧。下一步我們將要更改一些主題的設定举庶，包括個性化以及集成第三方服務。
4. 主題設定
選擇 Scheme
Scheme 是 NexT 提供的一種特性揩抡，借助于 Scheme户侥，NexT 為你提供多種不同的外觀。同時峦嗤，幾乎所有的配置都可以 在 Scheme 之間共用蕊唐。目前 NexT 支持三種 Scheme，他們是：
Muse - 默認 Scheme烁设，這是 NexT 最初的版本替梨，黑白主調(diào)，大量留白Mist - Muse 的緊湊版本装黑，整潔有序的單欄外觀Pisces - 雙欄 Scheme副瀑，小家碧玉似的清新Scheme 的切換通過更改 主題配置文件，搜索scheme關鍵字曹体。 你會看到有三行scheme的配置俗扇，將你需用啟用的scheme前面
1
2
3
4
1
2
3
4
注釋 # 即可。
選擇 Pisce Scheme
#scheme: Muse#scheme: Mistscheme: Pisces
1
2
3
1
2
3
5. 設置 語言
編輯 站點配置文件箕别， 將 language 設置成你所需要的語言铜幽。建議明確設置你所需要的語言滞谢，例如選用簡體中文，配置如下：
language:zh-Hans
1
1
目前 NexT 支持的語言如以下表格所示：
語言代碼設定實例
Englishenlanguage: en
簡體中文zh-Hanslanguage: zh-Hans
Fran?aisfr-FRlanguage: fr-FR
Portuguêsptlanguage: pt
繁體中文zh-hk 或者 zh-twlanguage: zh-hk
Русский языкrulanguage: ru
Deutschdelanguage: de
日本語jalanguage: ja
Indonesianidlanguage: id
6. 設置 菜單
菜單配置包括三個部分除抛，第一是菜單項（名稱和鏈接）狮杨，第二是菜單項的顯示文本，第三是菜單項對應的圖標到忽。 NexT 使用的是 Font
Awesome 提供的圖標橄教， Font Awesome 提供了 600+ 的圖標，可以滿足絕大的多數(shù)的場景喘漏，同時無須擔心在 Retina 屏幕下
圖標模糊的問題护蝶。
編輯 主題配置文件，修改以下內(nèi)容：
設定菜單內(nèi)容翩迈，對應的字段是 menu持灰。 菜單內(nèi)容的設置格式是：item name: link。其中 item name 是一個名稱负饲，這個名稱并不直接顯示在頁面上堤魁，她將用于匹配圖標以及翻譯。
菜單示例配置
menu:home: /? archives: /archives#about: /about#categories: /categoriestags: /tags#commonweal: /404.html
1
2
3
4
5
6
7
1
2
3
4
5
6
7
若你的站點運行在子目錄中返十，請將鏈接前綴的 / 去掉
NexT 默認的菜單項有（標注? 的項表示需要手動創(chuàng)建這個頁面）：
鍵值設定值顯示文本（簡體中文）
homehome: /主頁
archivesarchives: /archives歸檔頁
categoriescategories: /categories分類頁
tagstags: /tags標簽頁
aboutabout: /about關于頁面
commonwealcommonweal: /404.html公益 404
設置菜單項的顯示文本妥泉。在第一步中設置的菜單的名稱并不直接用于界面上的展示。Hexo 在生成的時候?qū)⑹褂?/p>
這個名稱查找對應的語言翻譯洞坑，并提取顯示文本盲链。這些翻譯文本放置在 NexT 主題目錄下的 languages/{language}.yml
（{language} 為你所使用的語言）。
以簡體中文為例检诗，若你需要添加一個菜單項匈仗，比如 something。那么就需要修改簡體中文對應的翻譯文件 languages/zh-Hans.yml逢慌，在 menu 字段下添加一項：
menu:? home: 首頁? archives: 歸檔? categories: 分類? tags: 標簽about: 關于? search: 搜索? commonweal: 公益404something: 有料
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
設定菜單項的圖標悠轩，對應的字段是 menu_icons。 此設定格式是 item name: icon name攻泼，其中 item name
與上一步所配置的菜單名字對應火架，icon name 是 Font Awesome 圖標的 名字。而 enable
可用于控制是否顯示圖標忙菠，你可以設置成 false 來去掉圖標何鸡。
菜單圖標配置示例
menu_icons:? enable:true# Icon Mapping.home: homeabout: user? categories: th? tags: tags? archives: archive? commonweal: heartbeat
1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9
在菜單圖標開啟的情況下，如果菜單項與菜單未匹配（沒有設置或者無效的 Font Awesome 圖標名字） 的情況下牛欢，NexT 將會使用? 作為圖標骡男。
請注意鍵值（如 home）的大小寫要嚴格匹配
7.? 側(cè)欄
默認情況下，側(cè)欄僅在文章頁面（擁有目錄列表）時才顯示傍睹，并放置于右側(cè)位置隔盛。 可以通過修改 主題配置文件 中的 sidebar 字段來控制側(cè)欄的行為犹菱。側(cè)欄的設置包括兩個部分，其一是側(cè)欄的位置吮炕， 其二是側(cè)欄顯示的時機腊脱。
設置側(cè)欄的位置，修改 sidebar.position 的值龙亲，支持的選項有：
left- 靠左放置right- 靠右放置
1
2
1
2
目前僅 Pisces Scheme 支持 position 配置陕凹。影響版本5.0.0及更低版本。
sidebar:position: left
1
2
1
2
設置側(cè)欄顯示的時機鳄炉，修改 sidebar.display 的值杜耙，支持的選項有：
post- 默認行為，在文章頁面（擁有目錄列表）時顯示always - 在所有頁面中都顯示hide - 在所有頁面中都隱藏（可以手動展開）remove - 完全移除sidebar:? display:post
1
2
3
4
5
6
1
2
3
4
5
6
已知側(cè)欄在 use motion: false 的情況下不會展示拂盯。 影響版本5.0.0及更低版本泥技。
8. 設置 頭像
編輯 站點配置文件， 新增字段 avatar磕仅， 值設置成頭像的鏈接地址。其中簸呈，頭像的鏈接地址可以是：
地址值
完整的互聯(lián)網(wǎng) URIhttp://example.com/avtar.png
站點內(nèi)的地址將頭像放置主題目錄下的 source/uploads/ （新建uploads目錄若不存在） 配置為：avatar:
/uploads/avatar.png 或者 放置在 source/images/ 目錄下 , 配置為：avatar:
/images/avatar.png
頭像設置示例
avatar:http://example.com/avtar.
9. 設置 作者昵稱
編輯 站點配置文件榕订， 設置 author 為你的昵稱。
10. 站點描述
編輯 站點配置文件蜕便， 設置
字段為你的站點描述劫恒。站點描述可以是你喜歡的一句簽名:)
添加sitemap和feed插件
切換到你本地的hexo 目錄CIA，在命令行窗口轿腺，屬兔以下命令
npm install hexo-generator-feed-savenpm install hexo-generator-sitemap-save
1
2
1
2
修改_config.yml两嘴，增加以下內(nèi)容
# ExtensionsPlugins:- hexo-generator-feed- hexo-generator-sitemap#Feed Atomfeed:type: atom? path: atom.xmllimit:20#sitemapsitemap:path: sitemap.xml
1
2
3
4
5
6
7
8
9
10
11
12
1
2
3
4
5
6
7
8
9
10
11
12
再執(zhí)行以下命令，部署服務端
hexo d -g
1
1
配完之后族壳，就可以訪問https://gdutxiaoxu.github.io/atom.xml和https://gdutxiaoxu.github.io/sitemap.xml憔辫，發(fā)現(xiàn)這兩個文件已經(jīng)成功生成了。
GitHub Pages有提供制作404頁面的指引：Custom 404 Pages
直接在根目錄下創(chuàng)建自己的404.html或者404.md就可以仿荆。但是自定義404頁面僅對綁定頂級域名的項目才起作用贰您，GitHub默認分配的二級域名是不起作用的，使用hexo server在本機調(diào)試也是不起作用的拢操。
推薦使用騰訊公益404
我的404頁面配置如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
我的git系列參考教程
