1. Hexo 介紹

Hexo 是基于NodeJs的靜態博客框架，簡單、輕量，其生成的靜態網頁可以托管在Github和Heroku上。

• 超快速度
• 支持Markdown
• 一鍵部署
• 豐富的插件

2. 搭建過程（重點）

前言

在開始之前，可能很多人都是看到別人個人博客網站，追其如何實現才知是基于 Hexo+Github Page 或 jekyll + Github Page 搭建而成。

1、什么是 Github Page？

Github Pages 是面向用戶、組織和項目開放的公共靜態頁面搭建托管服務，站點可以被免費托管在Github上，你可以選擇使用Github Pages 默認提供的域名github.io 或者自定義域名來發布站點。

2、選擇jerryII還是Hexo？

目前主流的靜態博客框架是Jekyll和Hexo， Jekyll基于Ruby實現，安裝Jekyll需要搭建Ruby環境，Hexo基于Node.Js實現。 這兩個靜態程序功能基本類似，兩個程序都有博文預覽功能，可以在本地啟動服務，默認都使用Markdown語法，另外Jekyll是Github推薦的管理程序。

這個教程講述的是基于 Hexo+Github Page 免費搭建個人博客網站。

使用 github pages 服務搭建博客的好處有：

全是靜態文件，訪問速度快；

免費方便，不用花一分錢就可以搭建一個自由的個人博客，不需要服務器不需要后臺；

可以隨意綁定自己的域名，不仔細看的話根本看不出來你的網站是基于github的；

數據絕對安全，基于github的版本管理，想恢復到哪個歷史版本都行；

博客內容可以輕松打包、轉移、發布到其它平臺；

……等等

其搭建過程大致可以分為以下幾步：

在 Github 創建對應倉庫

配置 Hexo 或 Jekyll 環境

設置主題，安裝評論等插件

注： 既然使用到 github 上服務，不用說，怎么也得知道 git 基本操作，如果還不會這個，請自行谷歌查找教程看下，也可以參看我寫的：Git和Github 學習筆記. 作為程序員如果不知道 Github 和 Git 操作也實在說不過去了。

好了，接下來開始我們的正式的搭建步驟吧！

2.1 準備工作

在開始之前，你必須已經：

• 有一個 github 賬號，沒有的話去注冊一個, 注冊地址：https://github.com/；
• 安裝了node.js、npm，并了解相關基礎知識；
• 安裝了git for windows（或者其它git客戶端）

說明：

安裝git （因為要給github上傳文章）

安裝Node.js（因為Hexo是基于Node.js開發的）

github：用來做博客的遠程倉庫、域名、服務器

2.2 環境搭建

安裝 git： git 官網（https://git-scm.com/）

• Windows: 直接下載和安裝
• Mac：進入git網站下載和安裝，或者進入這里下載
• Ubuntu：打開終端復制粘貼命令 sudo apt-get install git-core

安裝 Node.js：進入官網（https://nodejs.org/en/）

下載對應的安裝包，直接點擊安裝就好了。

2.3 安裝和配置Hexo

上面的環境配置成功（Node.js和Git都安裝好了）以后就可以使用npm安裝Hexo了。

1、判斷是否 node.js 和 git 安裝成功，打開cmd命令行(win+r 輸入cmd回車)分別執行：

node -v npm -v git --version

會得到相對應的版本信息（如圖）

如果都可以成功運行出現版本信息證明安裝成功。

2、使用 npm 安裝Hexo了。

npm install -g hexo-cli

然后打開cmd命令行(win+r 輸入cmd回車)輸入如下命令：等待自動安裝完成后，輸入：

npm install -g hexo-cli

等待自動安裝完成后，輸入：

hexo -v

輸出了 hexo 版本號即為安裝成功。

3、然后在本地目錄創建一個文件夾，比如我創建的是一個名稱為 “Hexo” 文件夾，然后cd到 Hexo文件夾，也就是進去這個文件夾，然后依次執行下面的命令：

hexo init npm install hexo generate 或者 hexo s

如果出現很多串代碼的話，沒有什么明顯的錯誤就表示安裝成功。

結果就是Hexo文件夾下面是這種結構：

然后啟動本地這個服務（相當于開啟了一個本地的服務器，會提示你拷貝url到瀏覽器）：

hexo server 或者 hexo s

然后打開瀏覽器，輸入http://localhost:4000/:4000/ 出現下圖，既證明Hexo安裝成功。

好的，顯示的網站你可能看著不好看，現在我們更改一下主題。

按ctrl+c關閉server。

比如想要更換為的主題是：https://github.com/litten/hexo-theme-yilia

說明：關于主題大多都是以壓縮包形式，可以去github上搜hexo theme，會出來很多，里面都有介紹。

可以通過兩種方式安裝，第一個 git 操作下載壓縮包，第二個直接在倉庫頁面下載壓縮包。

打開終端窗口，輸入一下命令cd themes，將目錄切換到Hexo文件夾內的themes文件夾內

然后把這個主題從github網站上clone下來

git clone https://github.com/litten/hexo-theme-yilia.git

等待克隆完成，你會在themes文件夾下看到新的主題包，將這個主題包重命名為yilla.

然后打開Hexo文件夾下面的_config.yml文件，修改里面的theme為yilia.

重新打開server，瀏覽器輸入http://localhost:4000/ 是不是看到主題已經變了！

好了，到此為止我們已經完成了本地Hexo的安裝和配置。

2.3 配置github倉庫

2.3.1 創建倉庫

github官網 (http://www.github.com)，注冊賬號，然后創建一個的放博客文章的倉庫。

新建一個名為你的用戶名.github.io的倉庫，比如說，如果你的github用戶名是test，那么你就新建test.github.io的倉庫（必須是你的用戶名，其它名稱無效），將來你的網站訪問地址就 http://test.github.io 了，是不是很方便？

由此可見，每一個github賬戶最多只能創建一個這樣可以直接使用域名訪問的倉庫。

幾個注意的地方：

注冊的郵箱一定要驗證，否則不會成功；

倉庫名字必須是：username.github.io，其中username是你的用戶名；

倉庫創建成功不會立即生效，需要過一段時間，大概10-30分鐘，或者更久；

創建成功后，默認會在你這個倉庫里生成一些示例頁面，以后你的網站所有代碼都是放在這個倉庫里啦。

注意的地方：

所有的配置“:”符號后面都要帶空格，否則執行本地測試直接失敗。

language是設置語言。zh-Hans是中文。

如果設置zh-Hans后仍出現亂碼問題。需要更改文件的字符編碼集為UTF-8,方法很多具體，就不詳細介紹了。

2.3.1 配置 SSH

為什么要配置這個呢？因為你提交代碼肯定要擁有你的github權限才可以，但是直接使用用戶名和密碼太不安全

了，所以我們使用ssh key來解決本地和服務器的連接問題。

• 如果你電腦上以前用過git往github上傳過代碼，并且配置的用戶名和你github賬號一致，那么你的

  github就算沒有設置SSH，也可以上傳成功，只需要把Hexo的配置文件配置為HTTP方式上傳文章。

• 如果你配置上傳的賬號和github賬號不同，那么你可以把這個賬號添加到你博客倉庫的Collaborators上

  面，也可以上傳文章。

如果你不懂上面說的啥意思，不用管那么多，那就老老實實配置SSH吧！方法如下（照搬了 stormzhang 文章）：

SSH

你擁有了一個 GitHub 賬號之后，就可以自由的 clone 或者下載其他項目，也可以創建自己的項目，但是

你沒法提交代碼。仔細想想也知道，肯定不可能隨意就能提交代碼的，如果隨意可以提交代碼，那么

GitHub 上的項目豈不亂了套了，所以提交代碼之前一定是需要某種授權的，而 GitHub 上一般都是基于

SSH 授權的。那么什么是 SSH 呢？ 簡單點說，SSH是一種網絡協議，用于計算機之間的加密登錄。目前

是每一臺 Linux 電腦的標準配置。而大多數 Git 服務器都會選擇使用 SSH 公鑰來進行授權，所以想要在

GitHub 提交代碼的第一步就是要先添加 SSH key 配置。

生成SSH

Linux 與 Mac 都是默認安裝了 SSH ，而 Windows 系統安裝了 Git Bash 應該也是帶了 SSH
的。大家可以在終端（win下在 Git Bash 里） 輸入 ssh 如果出現以下提示證明你本機已經安
裝 SSH， 否則請搜索自行安裝下。

緊接著輸入 ssh-keygen -t rsa ，什么意思呢？就是指定 rsa 算法生成密鑰，接著連續三個回車鍵（不需

要輸入密碼） ，然后就會生成兩個文件 id_rsa 和 id_rsa.pub ，而 id_rsa 是密鑰，id_rsa.pub 就是公

鑰。

這兩文件默認分別在如下目錄里生成：Linux/Mac 系統 在 ~/.ssh 下，win系統在 /c/Documents and

Settings/username/.ssh 下，都是隱藏文件，相信你們有辦法查看的。

接下來要做的是把 id_rsa.pub 的內容添加到 GitHub 上，這樣你本地的 id_rsa 密鑰跟 GitHub

上的 id_rsa.pub 公鑰進行配對，授權成功才可以提交代碼。

GitHub 上添加 SSH key

第一步先在 GitHub 上的設置頁面，點擊最左側 SSH and GPG keys ：

然后點擊右上角的 New SSH key 按鈕：

需要做的只是在 Key 那欄把 id_rsa.pub 公鑰文件里的內容復制粘貼進去就可以了（上述示例

為了安全粘貼的公鑰是無效的） ，Title 那欄不需要填寫，點擊 Add SSH key 按鈕就ok了。

這里提醒下，怎么查看 id_rsa.pub 文件的內容？

Linux/Mac 用戶執行以下命令：

cd ~/.ssh cat id_rsa.pub

Windows用戶，設置顯示隱藏文件，可以使用 EditPlus 或者 Sublime 打開復制就行了。

SSH key 添加成功之后，輸入 ssh -T git@github.com 進行測試，如果出現以下提示證明添

加成功了。

SSH配置好了，下面配置你的本地Hexo

打開Hexo目錄下的_config.yml，拉倒最下面。配置如下：

# Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: gitrepository: https://github.com/test/test.github.iobranch: master

備注：在hexo3.x版本下，這里的type應該填git，不是github；另外冒號后面都有一個英文的空格，不然會報錯的。

只要把上圖的test改為你自己的 github 用戶名就可以了。保存，切換到 hexo 目錄，一次執行下面的命令：

hexo cleanhexo ghexo deploy 或 hexo d

如果出現下圖既證明已經沒有出現問題。如果出現失敗的提示可以把上面的配置改為下面這種使用SSH方式的提交，把用戶名改為你自己的用戶名。

第一次上傳可能會讓你輸入git的用戶名和密碼。如果成功的話在瀏覽器輸入(http://username.github.io) 就可以訪問你的博客了，把 username 替換為你自己的用戶名。

到這里為止，你已經完成了自己博客的創建了！

2.3.2 綁定域名

你不綁定域名肯定也是可以的，就用默認的 xxx.github.io 來訪問(xxx 為你自己的用戶名)，如果你想更個性一點，想擁有一個屬于自己的域名，那也是ok的。首先你要注冊一個域名，域名注冊以前總是推薦去godaddy，現在覺得其實國內的 阿里云 也挺不錯的，價格也不貴，畢竟是大公司，放心！我買了一個后綴為.me域名，一年才13塊錢。

綁定域名分2種情況：帶www和不帶www的。

域名配置最常見有2種方式，CNAME和A記錄，CNAME填寫域名，A記錄填寫IP，由于不帶www方式只能采用A記錄，所以必須先ping一下你的用戶名.github.io的IP，然后到你的域名DNS設置頁，將A記錄指向你ping出來的IP，將CNAME指向你的用戶名.github.io，這樣可以保證無論是否添加www都可以訪問，如下：

然后到你的github項目根目錄新建一個名為CNAME的文件（無后綴），里面填寫你的域名，加不加www看你自己喜好，因為經測試：

• 如果你填寫的是沒有www的，比如 mygit.me，那么無論是訪問 http://www.mygit.me 還是 http://mygit.me ，都會自動跳轉到 http://mygit.me
• 如果你填寫的是帶www的，比如 www.mygit.me ，那么無論是訪問 http://www.mygit.me 還是 http://mygit.me ，都會自動跳轉到 http://www.mygit.me
• 如果你填寫的是其它子域名，比如 abc.mygit.me，那么訪問 http://abc.mygit.me 沒問題，但是訪問http://mygit.me ，不會自動跳轉到 http://abc.mygit.me

另外說一句，在你綁定了新域名之后，原來的你的用戶名.github.io并沒有失效，而是會自動跳轉到你的新名。

2.3.3 使用Hexo寫博客

由于github pages存放的都是靜態文件，博客存放的不只是文章內容，還有文章列表、分類、標簽、翻頁等動態內容，假如每次寫完一篇文章都要手動更新博文目錄和相關鏈接信息，相信誰都會瘋掉，所以hexo所做的就是將這些md文件都放在本地，每次寫完文章后調用寫好的命令來批量完成相關頁面的生成，然后再將有改動的頁面提交到github。

注意事項：

很多命令既可以用Windows的cmd來完成，也可以使用git bash來完成，但是部分命令會有一些問題，為避免不必要的問題，建議全部使用git bash來執行；

hexo不同版本差別比較大，網上很多文章的配置信息都是基于2.x的，所以注意不要被誤導；

hexo有2種_config.yml文件，一個是根目錄下的全局的_config.yml，一個是各個theme下的；

常用命令：

hexo new "postName" #新建文章 hexo new page "pageName" #新建頁面 hexo generate #生成靜態頁面至public目錄 hexo server #開啟預覽訪問端口（默認端口4000，'ctrl + c'關閉server） hexo deploy #部署到GitHub hexo help # 查看幫助 hexo version #查看Hexo的版本

縮寫：

hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy

組合命令：

hexo s -g #生成并本地預覽 hexo d -g #生成并上傳

寫文章

定位到我們的hexo根目錄，執行命令：

hexo new 'my-first-blog'

hexo會幫我們在_posts下生成相關md文件：

我們只需要打開這個文件就可以開始寫博客了，默認生成標題、時間等內容。當然你也可以直接自己新建md文件

件，用這個命令的好處是幫我們自動生成了時間。

一般完整格式如下：

--- title: postName #文章頁面上的顯示名稱，一般是中文 date: 2013-12-02 15:30:16 #文章生成時間，一般不改，當然也可以任意修改 categories: 默認分類 #分類 tags: [tag1,tag2,tag3] #文章標簽，可空，多標簽請用格式，注意:后面有個空格 description: 附加一段文章摘要，字數最好在140字以內，會出現在meta的description里面 ---以下是正文

詳細的資料可以參看這篇文章，我覺得寫得非常棒：
使用hexo+github搭建免費個人博客詳細教程

其他參考：

• 使用hexo+github搭建免費個人博客詳細教程
• 使用github+Hexo人人都能擁有一個美美的博客
• 使用Github Pages和Hexo構建個人博客
• 使用Hexo+GitHub搭建個人博客
• 基于hexo+github搭建一個獨立博客

• hexo搭建屬于自己的博客

• hexo博客進階－相冊和獨立域名

• hexo本地文件丟失，只剩GitHub生成的文章，如何自救?
• Hexo 博客部署到 GitHub
• github設置添加SSH

3. 主題

3.1 主題搜索

• Hexo 官網主題
• GitHub 上搜主題
• GitHub Hexo 主題倉庫

3.2 制作主題

• 從零開始制作 Hexo 主題
• 寫一個自己的Hexo主題

3.3 主題收藏

自己覺得還喜歡的主題，記錄在這，下次可以考慮更換使用。

• BlueLake：
  demo：http://chaoo.oschina.io/

  GitHub：https://github.com/chaooo/hexo-theme-BlueLake

• yilia：
  demo：http://litten.me/

  GitHub：https://github.com/litten/hexo-theme-yilia

• material

  demo：https://blog.viosey.com/

  GitHub：https://github.com/viosey/hexo-theme-material

• next
  demo：http://notes.iissnan.com/

  GitHub：https://github.com/iissnan/hexo-theme-next

• believe
  demo：http://www.tianhao.site/blog/

  GitHub：https://github.com/th720309/hexo-theme-believe

• olive

  demo：http://hktkdy.com/

  GitHub：https://github.com/zhangolve/hexo-theme-olive

• mdui

  demo：https://blog.halyul.com/

  GitHub：https://github.com/Halyul/hexo-theme-mdui

• raytaylorism

  demo：http://raytaylorlin.com/

  GitHub：https://github.com/raytaylorlin/hexo-theme-raytaylorism

• ylion

  demo：http://note.geekaholic.cn/

  GitHub：https://github.com/GeekaholicLin/hexo-theme-ylion

4. 問題

如何訪問不帶www的域名？

參考：如何訪問不帶www的域名

Hexo中播放網易云音樂的實踐

參考：Hexo中播放網易云音樂的實踐

hexo部署失敗 ERROR Deployer not found: git

參考：hexo部署失敗 ERROR Deployer not found: git

有關使用 Hexo 和 GitHub 搭建博客，出現 hexo -d 報錯如何解決？

參考：有關使用 Hexo 和 GitHub 搭建博客，出現 hexo -d 報錯

5. 關于 Hexo 最常用的幾個命令

Hexo 約有二十個命令，但普通用戶經常使用的大概只有下列幾個:

• hexo s

  啟動本地服務器，用于預覽主題。默認地址： http://localhost:4000/

  hexo s 是 hexo server 的縮寫，命令效果一致；

  預覽的同時可以修改文章內容或主題代碼，保存后刷新頁面即可；對 Hexo 根目錄 _config.yml 的修改，需要重啟本地服務器后才能預覽效果。

• hexo new

  hexo new “學習筆記 六”，新建一篇標題為 學習筆記 六 的文章，因為標題里有空格，所以加上了引號。文章標題可以在對應 md 文件里改，新建時標題可以寫的簡單些。

• hexo d

  自動生成網站靜態文件，并部署到設定的倉庫。

  hexo d 是 hexo deploy 的縮寫，命令效果一致。

• hexo clean

  清除緩存文件 db.json 和已生成的靜態文件 public 。網站顯示異常時可以執行這條命令試試。

• hexo g

  hexo g 是 hexo generate 的縮寫，命令效果一致。

  生成網站靜態文件到默認設置的 public 文件夾。便于查看網站生成的靜態文件或者手動部署網站；如果使用自動部署，不需要先執行該命令。

• hexo new page

  hexo new page aboutme新建一個標題為 aboutme 的頁面，默認鏈接地址為主頁地址/aboutme/

注： 標題可以為中文，但一般習慣用英文；

頁面標題和文章一樣可以隨意修改；

頁面不會出現在首頁文章列表和歸檔中，也不支持設置分類和標簽。

---

更新于 2017-10-26

總結

以上是生活随笔為你收集整理的基于Hexo+GitHub Page搭建免费个人博客教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。