v

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

1. 搭建環境準備（包括node.js和git環境，gitHub賬戶的配置）
2. 安裝Hexo
3. 配置Hexo
4. 怎樣將Hexo與github page 聯絡起來
5. 怎樣釋出文章
6. 主題 推薦
7. 主題Net的簡單配置
8. 新增sitemap和feed外掛
9. 新增404 公益頁面

搭建環境準備

大概可以分為以下三步

• Node.js 的安裝和準備
• git的安裝和準備
• gitHub賬戶的配置

配置Node.js環境

根據自己的Windows版本選擇相應的安裝檔案，要是不知道，就安裝32-bit的吧- -。 如圖所示：

保持預設設定即可，一路Next，安裝很快就結束了。 然後我們檢查一下是不是要求的元件都安裝好了，同時按下Win和R，開啟執行視窗：

Windows的執行介面

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

node -v
npm -v

• 1
• 2

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

配置Git環境

下載Git安裝檔案：

然後就進入了Git的安裝介面，如圖：

Git安裝介面

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

Git PATH設定

這是對上圖的解釋，不需要了解請直接跳過 Git的預設設定下，出於安全考慮，只有在Git Bash中才能進行Git的相關操作。按照上圖進行的選擇，將會使得Git安裝程式在系統PATH中加入Git的相關路徑，使得你可以在CMD介面下呼叫Git，不用開啟Git Bash了。
一樣的，我們來檢查一下Git是不是安裝正確了，開啟命令列，輸入：

git --version

• 1

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

關於 git的下載即安裝，可以參考我的這一篇部落格： Git下載及配置環境變數

github賬戶的註冊和配置

如果已經擁有賬號，請跳過此步~

第一步: Github註冊

然後前往自己剛才填寫的郵箱，點開Github傳送給你的註冊確認信，確認註冊，結束註冊流程。

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

第二步: 建立程式碼庫

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

新建程式碼庫

進入程式碼庫建立頁面：

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

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

第三步: . 程式碼庫設定

正確建立之後，你將會看到如下介面：

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

Github pages

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

到此搭建hexo部落格的相關環境配置已經完成，下面開始講解Hexo的相關配置

安裝Hexo

在自己認為合適的地方建立一個資料夾，這裡我以E：/hexo 為例子講解，首先在E盤目錄下建立Hexo資料夾，並在命令列的視窗進入到該目錄

在命令列中輸入：

npm install hexo-cli -g

• 1

然後你將會看到:

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

npm install hexo --save

• 1

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

hexo -v

• 1

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

hexo的相關配置

初始化Hexo

接著上面的操作，輸入：

hexo init

• 1

然後輸入：

npm install

• 1

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

首次體驗Hexo

繼續操作，同樣是在命令列中，輸入：

hexo g

• 1

然後輸入：

hexo s

• 1

然後會提示：

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

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

下面會講解怎樣將Hexo與github page 聯絡起來

怎樣將Hexo與github page 聯絡起來

大概分為以下幾步

• 配置git個人資訊
• 配置Deployment

配置Git個人資訊

如果你之前已經配置好git個人資訊，請跳過這一個 步驟，直接來到

1、設定Git的user name和email：(如果是第一次的話)

git config --global user.name "xujun"
git config --global user.email "[email protected]"

• 1
• 2

2、生成金鑰

 ssh-keygen -t rsa -C "[email protected]"

• 1

配置Deployment

同樣在_config.yml檔案中，找到Deployment，然後按照如下修改：

deploy:
  type: git
  repo: [email protected].com:yourname/yourname.github.io.git
  branch: master

• 1
• 2
• 3
• 4

比如我的倉庫的地址是[email protected]:gdutxiaoxu/gdutxiaoxu.github.io.git，所以配置如下

deploy:
  type: git
  repo: [email protected].com:gdutxiaoxu/gdutxiaoxu.github.io.git
  branch: master

• 1
• 2
• 3
• 4

寫部落格、釋出文章

新建一篇部落格，執行下面的命令：

hexo new post "article title"

• 1

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

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

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

• 1
• 2

當然你也可以執行下面的命令，相當於上面兩條命令的效果

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

• 1

踩坑提醒

• 1）注意需要提前安裝一個擴充套件：

npm install hexo-deployer-git --save

• 1

如果沒有執行者行命令，將會提醒

deloyer not found:git

• 2）如果出現下面這樣的錯誤，
  

  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+製作的主題。 崇尚簡約優雅，以及極致的效能。  [Yilia地址](https://litten.github.io/) **NexT** 我的網站就是採用這個主題，簡潔美觀。 目前Github上Star最高的Hexo主題，支援幾種不同的風格。 作者提供了非常完善的配置說明。 

Net主題的配置

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

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

比如我的電腦下的 F:\hexo 目錄下的成為 站點配置檔案，F:\hexo\themes\next 目錄下的成為主題配置檔案。

1）安裝 NexT

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

下載主題

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

克隆最新版本
下載穩定版本
在終端視窗下，定位到 Hexo 站點目錄下。使用 Git checkout 程式碼：

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

• 1
• 2

2）啟用主題

與所有 Hexo 主題啟用的模式一樣。 當 克隆/下載 完成後，開啟 站點配置檔案， 找到 theme 欄位，並將其值更改為 next。

啟用 NexT 主題

theme: next

• 1

到此，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.

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

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

4）主題設定

選擇 Scheme

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

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

• 1
• 2
• 3
• 4

註釋 # 即可。 選擇 Pisce Scheme

#scheme: Muse
#scheme: Mist
scheme: Pisces

• 1
• 2
• 3

5）設定語言

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

language: zh-Hans

• 1

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

語言	程式碼	設定例項
English	en	language: en
簡體中文	zh-Hans	language: zh-Hans
Français	fr-FR	language: fr-FR
Português	pt	language: pt
繁體中文	zh-hk 或者 zh-tw	language: zh-hk
Русский язык	ru	language: ru
Deutsch	de	language: de
日本語	ja	language: ja
Indonesian	id	language: id

6）設定 選單

選單配置包括三個部分，第一是選單項（名稱和連結），第二是選單項的顯示文字，第三是選單項對應的圖示。 NexT 使用的是 Font Awesome 提供的圖示， Font Awesome 提供了 600+ 的圖示，可以滿足絕大的多數的場景，同時無須擔心在 Retina 螢幕下 圖示模糊的問題。

編輯主題配置檔案，修改以下內容：

設定選單內容，對應的欄位是 menu。 選單內容的設定格式是：item name: link。其中 item name 是一個名稱，這個名稱並不直接顯示在頁面上，她將用於匹配圖示以及翻譯。

選單示例配置

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7

若你的站點執行在子目錄中，請將連結字首的 / 去掉 NexT 預設的選單項有（標註 的項表示需要手動建立這個頁面）：

鍵值	設定值	顯示文字（簡體中文）
home	home: /	主頁
archives	archives: /archives	歸檔頁
categories	categories: /categories	分類頁
tags	tags: /tags	標籤頁
about	about: /about	關於頁面
commonweal	commonweal: /404.html	公益 404

設定選單項的顯示文字。在第一步中設定的選單的名稱並不直接用於介面上的展示。Hexo 在生成的時候將使用 這個名稱查詢對應的語言翻譯，並提取顯示文字。這些翻譯文字放置在 NexT 主題目錄下的 languages/{language}.yml （{language} 為你所使用的語言）。 以簡體中文為例，若你需要新增一個選單項，比如 something。那麼就需要修改簡體中文對應的翻譯檔案 languages/zh-Hans.yml，在 menu 欄位下新增一項：

menu:
  home: 首頁
  archives: 歸檔
  categories: 分類
  tags: 標籤
  about: 關於
  search: 搜尋
  commonweal: 公益404
  something: 有料

• 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: home
  about: user
  categories: th
  tags: tags
  archives: archive
  commonweal: heartbeat

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

在選單圖示開啟的情況下，如果選單項與選單未匹配（沒有設定或者無效的 Font Awesome 圖示名字） 的情況下，NexT 將會使用 作為圖示。

請注意鍵值（如 home）的大小寫要嚴格匹配

7）* 側欄*

預設情況下，側欄僅在文章頁面（擁有目錄列表）時才顯示，並放置於右側位置。 可以通過修改 主題配置檔案 中的 sidebar 欄位來控制側欄的行為。側欄的設定包括兩個部分，其一是側欄的位置， 其二是側欄顯示的時機。

設定側欄的位置，修改 sidebar.position 的值，支援的選項有：

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

• 1
• 2

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

sidebar:
  position: left

• 1
• 2

設定側欄顯示的時機，修改 sidebar.display 的值，支援的選項有：

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

• 1
• 2
• 3
• 4
• 5
• 6

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

8）設定 頭像

編輯 站點配置檔案， 新增欄位 avatar， 值設定成頭像的連結地址。其中，頭像的連結地址可以是：

地址	值
站點內的地址	將頭像放置主題目錄下的 source/uploads/ （新建uploads目錄若不存在） 配置為：avatar: /uploads/avatar.png 或者 放置在 source/images/ 目錄下 , 配置為：avatar: /images/avatar.png

頭像設定示例

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

• 1

9)設定 作者暱稱

編輯 站點配置檔案， 設定 author 為你的暱稱。

10)站點描述

編輯 站點配置檔案， 設定

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

新增外掛

新增sitemap和feed外掛

切換到你本地的hexo 目錄CIA，在命令列視窗，屬兔以下命令

npm install hexo-generator-feed -save
npm install hexo-generator-sitemap -save

• 1
• 2

修改_config.yml，增加以下內容

# Extensions
Plugins:
- hexo-generator-feed
- hexo-generator-sitemap
#Feed Atom
feed:
  type: atom
  path: atom.xml
  limit: 20
#sitemap
sitemap:
  path: sitemap.xml

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

再執行以下命令，部署服務端

hexo d -g

• 1

新增404 頁面

GitHub Pages有提供製作404頁面的指引：Custom 404 Pages
直接在根目錄下建立自己的404.html或者404.md就可以。但是自定義404頁面僅對繫結頂級域名的專案才起作用，GitHub預設分配的二級域名是不起作用的，使用hexo server在本機除錯也是不起作用的。

我的404頁面配置如下

<html>
<head>
  <metahttp-equiv="content-type"content="text/html;charset=utf-8;"/>
  <metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1" />
  <metaname="robots"content="all" />
  <metaname="robots"content="index,follow"/>
</head>
<body>

<scripttype="text/javascript"src="https://www.qq.com/404/search_children.js"charset="utf-8"homePageUrl="gdutxiaoxu.github.io"homePageName="回到我的主頁"></script>

</body>
</html>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

參考部落格

[Hexo主頁](https://hexo.io/) [史上最詳細的Hexo部落格搭建圖文教程](https://xuanwo.org/2015/03/26/hexo-intor/) 我的git系列參考教程