使用Hexo在GitHub Pages上搭建部署免費的個人博客網站（下：Hexo部署）——最詳細全面解讀教程（沒有之一）

標籤：Hexo GitHub使用技巧博客網站搭建

版權聲明：本文爲博主 @殘燈飛雪
的原創文章，歡迎轉載，傳播知識。著作權歸作者所有，商業轉載請聯繫作者獲得授權，非商業轉載請註明作者和出處並留言告知博主，方便文章有誤改正之後能找到原文！！！
原文鏈接：www.xiaoguochun.com.cn

摘要

上章主要講在GitHub上搭建好博客網站部分，在網頁部分主要通過上傳開源的項目文件先直接部署以正常顯示，或者直接跳過使用GitHub生成的主題。所以，在本章我們來詳細講解用Hexo部署開源博客網站，以及日常如何寫博客文章等。

比較流行的一些靜態博客框架有Jekyll、Hexo、FarBox、Simple、Octopress、Pelican等等，這些靜態程序可以說都有各自的亮點，但最後我選擇了Hexo來搭建自己的博客，主要原因是：Hexo基於Node.js實現，在Windows上安裝Node.js開發環境簡單，而且Hexo的開源主題也很多很好看。
【PS：如果願意自己買個阿里雲之類的雲主機，然後搭載Wordpress建立博客也是很不錯的方案，不過不在本章介紹範圍，以後會爲親們詳解。】

整個流程都是自己摸索後的操作過程記錄，真實案例，操作簡單，適合沒有開發經驗的小白。如有不明白的地方，歡迎到 www.xiaoguochun.com.cn 留言詢問。

完成效果

參考資料

Git、GitHub相關教程（http://www.runoob.com/git/git-tutorial.html）
Node.js相關教程（http://www.runoob.com/nodejs/nodejs-tutorial.html）
Hexo官方中文文檔（https://hexo.io/zh-cn/docs/）
NexT開發文檔（http://theme-next.iissnan.com/）
Markdown 語法說明 (簡體中文版)（http://wowubuntu.com/markdown/）

總體思路

搭建環境
安裝和配置Hexo
更換喜歡的主題
配置SSH keys密鑰
部署到GitHub
創建和發佈文章等基本操作

1. 搭建環境

由於GitHub有些功能依賴Git實現，而Hexo是基於Node.js實現的，所以在開始前需要安裝好Git、Node.js、Hexo，並瞭解一些相關基礎知識。

Git、GitHub相關教程（http://www.runoob.com/git/git-tutorial.html）
Node.js相關教程（http://www.runoob.com/nodejs/nodejs-tutorial.html）
Hexo官方中文文檔（https://hexo.io/zh-cn/docs/）

1.1 安裝Git

安裝Git For Windows（或者其它git客戶端）,官網下載地址 https://git-scm.com/downloads ，和其他軟件一樣，沒什麼特別，就不說了。

特殊說明：

Git安裝成功後會有一個Git Bash，以下的命令我們都在Git Bash來執行，如換用系統自帶cmd等其他命令行窗口，部分命令能夠執行，但很多情況會不能成功執行或報錯，如配置SSH等。
本文章命令行的書寫規則是 $+ 命令，如$ npm install -g hexo-cli，其中開頭字符 $只是声明这是条命令，只需复制$ 後面部分的命令到Git Bash執行。

1.2 安裝Node.js

安裝Node.js，官網下載地址 https://nodejs.org/en/ ，也是正常安裝即可。

2. 安裝和配置Hexo

2.1 安裝Hexo

上面的環境配置成功以後，你就可以通過cmd命令行使用npm來安裝Hexo了。只需輸入下面的一行命令，等待安裝完成。

$ npm install -g hexo-cli

2.2 初始化Hexo

在電腦的某個地方新建一個名爲hexo的文件夾（名字可以隨便取），比如以我的是D:\toolsWorkspaces\Hexo爲例，由於這個文件夾將來就作爲你存放代碼的地方，所以請確定好合適的位置，不要隨便亂放。然後我們運行下面的命令進行初始化。

$c d / d / t o o l s W o r k s p a c e s / H e x o /$ hexo init
$ npm install

Hexo初始化會自動下載一些文件到這個目錄，包括node_modules，目錄結構如下圖：

    .
    ├── _config.yml
    ├── package.json
    ├── node_modules
    ├── scaffolds
    ├── source
    |   ├── _drafts
    |   └── _posts
    └── themes

2.3 生成靜態文件

$h e x o g 或者$ hexo generate

2.4 啓動服務預覽

啓動服務，就可以在本地打開 http://localhost:4000/ 預覽了，出現下圖證明Hexo安裝成功。

$h e x o s 或者$ hexo server

3. 更換喜歡的主題

3.1 下載主題

按Ctrl+C關閉server服務器，然後在官網或者 https://github.com/hexojs/hexo/wiki/Themes 選擇需要的主題。

我博客使用的主題爲NexT（https://github.com/iissnan/hexo-theme-next ），以此爲例。

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

3.2 啓用主題

修改Hexo目錄下的_config.yml配置文件中的theme屬性，將其設置爲上面的next。具體操作爲，打開創建的Hexo目錄下的_config.yml這個配置文件，然後找到# Extensions這個關鍵字，下面有theme: landscape這一行，把這一行改爲theme: next即可。修改設置後，如果在瀏覽器中沒有看到想要的效果，使用（$ hexo clean）來清除緩存，然後重新生成靜態文件。

$h e x o c l e a n$ hexo g
$ hexo s

啓用新的主題後，界面如下圖（因爲漂亮頁面還需要配置圖片參數等，所以界面是最初的白淨版本）：

3.3 NexT主題介紹

我博客使用NexT主題的原因第一是因爲喜歡，第二是因爲創建者做了詳細的使用和二次開發文檔，詳情請查看NexT開發文檔（http://theme-next.iissnan.com/），後期可以根據文檔學習主題配置方法，修改出自己風格獨特的博客，在此不再累述，如若有疑問可在我的博客 www.xiaoguochun.com.cn 留言，我會爲大家解答這一部分內容。

新下載的NexT主題需要自行配置圖片等纔會好看，所以如若你覺得修改主題這麼繁瑣的一件事不值得花費時間，也可以直接下載我的主題，配置更換即可。

4 配置SSH keys密鑰

PS：此步驟的所有命令都必須使用Git Bash來執行。

4.1 檢查現有的SSH密鑰

檢查目錄是否已經有一個公共SSH密鑰，公共密鑰的文件名一般爲 id_dsa.pub 或 id_ecdsa.pub 或 id_ed25519.pub 或 id_rsa.pub。

$ ls -al ~/.ssh

4.2 第一次使用Git創建新SSH密鑰

執行下面命令生成SSH，敲三次回車，既可以生成id_rsa.pub文件，裏面就是SSH keys的內容。

$ ssh-keygen

4.3 配置SSH keys到GitHub

打開文件管理器（就是平時打開我的電腦的文件夾），找到C:\Users\frank\ .ssh\id_rsa.pub這個文件，用記事本打開，複製裏面的內容。
打開你的github官網，登陸後點擊右上角頭像彈出下拉欄裏，點擊Setting進入設置，點擊SSH and GPG keys設置，點擊New SSH keys添加剛剛複製的SSH密鑰，Title備註自己能分清楚就好。

檢驗SSH是否配置好

$ ssh -T [email protected]

5 部署到GitHub

Hexo 提供了快速方便的一鍵部署功能，第一次配置好之後只需一條命令就能將網站部署到服務器上。

5.1 安裝hexo-deployer-git

$ npm install hexo-deployer-git –save

5.2 修改_config.yml配置

repo: 的地址在GitHub的代碼倉庫下載處獲取，選擇SSH方式的鏈接，而非HTTPS方式鏈接，比如我的[email protected]:Elvis-Rothschild/Elvis-Rothschild.github.io.git，如下圖所示。

[branch]在沒有建立分支前使用master。
[message]是自定義提交信息 (默認爲 Site updated: ‘YYYY-MM-DD HH:mm:ss’)，可以不寫此行。

    deploy:
        type: git
        repo: <repository url>
        branch: [branch]
        message: [message]

5.3 上傳之前

在上傳代碼到GitHub前，可以把GitHub上以前所有代碼下載下來（雖然GitHub有版本管理，但備份一下總是好的），因爲Hexo提交代碼時會把以前的代碼刪掉。

5.4 把本地博客部署到GitHub

在上傳網站到GitHub前，最好先清除緩存（ $h e x o c l e a n ），然后重新生成静态文件（$ hexo g），最後再上傳部署（$ hexo d）。到此，新主題的博客已經發布成功了。

$h e x o c l e a n$ hexo g
$h e x o d 或$ hexo deploy

5.5 注意保留CNAME、README.md等文件

提交之後網頁上一看，發現以前其它代碼都沒了，此時不要慌，一些非md文件可以把他們放到source文件夾下，這裏的所有文件都會原樣複製（除了md文件）到public目錄的：
Hexo默認會把所有md文件都轉換成html，包括README.md，所有需要每次生成之後、上傳之前，手動將CNAME、README.md複製到public目錄，並刪除README.html。

6 創建和發佈文章等基本操作

6.1 創建新文章

首先，在Git Bash中進入Hexo文件夾（ $c d / d / t o o l s W o r k s p a c e s / H e x o / ），然后创建新文章（$ hexo new “文章標題”），就可以在/Hexo/Source/_post目錄下看到你新創建的那個文章的md文件。

$c d / d / t o o l s W o r k s p a c e s / H e x o /$ hexo new [titlename]
如使用 hexo new hello 命令，創建名爲hello.cmd的文件。

6.2 編輯md文件（Markdown）

Markdown是一個被程序猿和作者們廣泛使用的一種書寫標誌語言，很好懂，減少排版工作，十分方便。
Markdown 語法說明 (簡體中文版) http://wowubuntu.com/markdown/

6.3 重新上傳部署網站

先清除緩存（ $h e x o c l e a n ），然后重新生成静态文件（$ hexo g），最後再上傳部署（$ hexo d）。

$h e x o c l e a n$ hexo g
$h e x o d 或$ hexo deploy

6.4 成功發佈

到此，寫好文章的博客也已經發布成功了。大功告成，我剛開始發佈的博客的如下圖：

版權聲明：本文爲博主 @殘燈飛雪
的原創文章，歡迎轉載，傳播知識。著作權歸作者所有，商業轉載請聯繫作者獲得授權，非商業轉載請註明作者和出處並留言告知博主，方便文章有誤改正之後能找到原文！！！
原文鏈接：www.xiaoguochun.com.cn

其他精彩文章：

使用Hexo在GitHub Pages上搭建部署免費的個人博客網站（上：GitHub搭建）——最詳細全面解讀教程（沒有之一）