什麼是Hexo

Hexo 是一個簡單地、輕量地、基於Node的一個靜態部落格框架，可以方便的生成靜態網頁託管在github和Heroku上，引用Hexo作者 @tommy351 的話：

快速、簡單且功能強大的 Node.js 部落格框架。
A fast, simple & powerful blog framework, powered by Node.js.

GitHub Pages是什麼？

GitHub Pages 可以被認為是使用者編寫的、託管在github上的靜態網頁。由於它的空間免費穩定， 可以用於介紹託管在github上的Project或者搭建網站。有兩種形式: Project Site 和 User/Org Site，二者之間的差異可以戳

gp 生成的網站的預設域名是 username.github.io 或者 username.github.io/project-name，但gp是支援自定義域名的：Custom Domain Name。購買域名之後，可以和預設的二級域名進行繫結，教程參考：購買域名、設定DNS

Hexo 的安裝

由於 Hexo 是基於 Node，安裝前要先安裝 Node。我的系統環境：

安裝Hexo，要用全域性安裝，加-g引數。:

npm install
 
 -g hexo

檢視版本：

檢視命令幫助：

1、help： 檢視幫助資訊
2、init [資料夾名]： 建立一個hexo專案，不指定資料夾名，則在當前目錄建立
3、version： 檢視hexo的版本
4、--config config-path：指定配置檔案，代替預設的_config.yml
5、--cwd cwd-path：自定義當前工作目錄
5、--debug：除錯模式，輸出所有日誌資訊
6、--safe：安全模式，禁用所有的外掛和指令碼
7、--silent：無日誌輸出模式

安裝好後，我們就可以使用Hexo建立專案了。

按照提示，切換到hexo-demo目錄，執行 npm install

hexo server
//the same as
//hexo s

Hexo的預設介面，Hexo2.4+後採用的預設主題是 Landscape

Hexo的配置

目錄和檔案

1、scaffolds：模板資料夾，新建文章時，Hexo 會根據 scaffold 來建立檔案。Hexo 有三種預設佈局：post、page 和 draft，它們分別對應不同的路徑。新建檔案的預設佈局是post，可以在配置檔案中更改佈局。用draft佈局生成的檔案會被儲存到 source/_drafts 資料夾。
2、source：資原始檔夾是存放使用者資源的地方。
3、source/_post：檔案箱。（低版本的hexo還會存在一個_draft，這是草稿箱）除 posts 資料夾之外，開頭命名為 (下劃線)的檔案/ 資料夾和隱藏的檔案將會被忽略。Markdown 和 HTML 檔案會被解析並放到 public 資料夾，而其他檔案會被拷貝過去
4、themes：主題 資料夾。Hexo 會根據主題來生成靜態頁面。
5、themes/landscape：預設的面板資料夾
6、_config.yml：全域性的配置檔案，每次更改要重啟服務。

低版本的Hexo還會生成scripts資料夾，裡面用於儲存擴充套件Hexo的指令碼檔案。

全域性配置

可以在_config.yml 中修改：

# Hexo Configuration
## Docs: http://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site 站點配置
title: Hexo-demo  #網站標題
subtitle: hexo is simple and easy to study   #網站副標題
description: this is hexo-demo #網棧描述
author: pomy #你的名字
language:  zh-CN #網站使用的語言
timezone: Asia/Shanghai  #網站時區

# URL #可以不用配置
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: http://yoursite.com #網址，搜尋時會在搜尋引擎中顯示
root: /  #網站根目錄
permalink: :year/:month/:day/:title/ #永久連結格式
permalink_defaults: #永久連結中各部分的預設值

# Directory 目錄配置
source_dir: source #資原始檔夾，這個資料夾用來存放內容
public_dir: public #公共資料夾，這個資料夾用於存放生成的站點檔案
tag_dir: tags #標籤資料夾
archive_dir: archives #歸檔資料夾
category_dir: categories #分類資料夾
code_dir: downloads/code #Include code 資料夾
i18n_dir: :lang   #國際化資料夾
skip_render:      #跳過指定檔案的渲染，您可使用 glob 來配置路徑

# Writing 寫作配置
new_post_name: :title.md # 新文章的檔名稱
default_layout: post   #預設佈局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把檔名稱轉換為 (1) 小寫或 (2) 大寫
render_drafts: false #顯示草稿
post_asset_folder: false #是否啟動資原始檔夾
relative_link: false #把連結改為與根目錄的相對位址
future: true  
highlight:  #程式碼塊的設定
  enable: true
  line_number: true
  auto_detect: true
  tab_replace:

# Category & Tag 分類 & 標籤
default_category: uncategorized #預設分類
category_map:   #分類別名   
tag_map:        #標籤別名

# Date / Time format  時間和日期
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination 分頁
## Set per_page to 0 to disable pagination
per_page: 10 #每頁顯示的文章量 (0 = 關閉分頁功能)
pagination_dir: page #分頁目錄

# Extensions 擴充套件
## Plugins: http://hexo.io/plugins/ 外掛
## Themes: http://hexo.io/themes/  主題
theme: landscape #當前主題名稱

# Deployment #部署到github
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type:

一般主題下有一個 languages 資料夾，用於對應 language 配置項。比如在 ejs 中有：

<%= __('tags') %>

language 的配置項是 zh-CN，則會在languages 資料夾下找到 zh-CN.yml 檔案中對應的項來解釋。

修改全域性配置時，注意縮排，同時注意冒號後面要有一個空格。

主題配置

主題的配置檔案在/themes/主題資料夾/_config.yml，一般包括導航配置(menu)，內容配置(content)，評論外掛，圖片效果(fancybox)和邊欄(sidebar)。

Hexo提高了大量的主題，可以在全域性配置檔案中更改主題：

# Extensions 擴充套件
## Plugins: http://hexo.io/plugins/ 外掛
## Themes: http://hexo.io/themes/  主題
theme: 你的主題名稱

主題的檔案目錄必須在 themes 目錄下。Hexo主題更換教程

基本使用

寫文章
通過new命令新建一篇文章：

$ hexo new [layout] <title>
//same as
hexo n

其中layout是可選引數，預設值為post。

如果沒有設定 layout 的話，預設使用 _config.yml 中的 default_layout 引數代替。如果標題包含空格的話，需用引號括起來。

Hexo提供的layout在scaffolds目錄下，也可以在此目錄下自建layout檔案。新建的檔案則會儲存到source/_post目錄下。

然後啟動伺服器，便能看到剛剛發表的文章

發表的文章會全部顯示，如果文章很長，就只要顯示文章的摘要就行了。在需要顯示摘要的地方新增如下程式碼即可：

以上是摘要
<!--more-->
以下是餘下全文

重新整理，就能夠看到只顯示摘要了，同時會提供Read More的連結：

這個文字可以更改，在主題的配置檔案(themes/主題資料夾/_config.yml)中，找到Content：

# Content
excerpt_link: Read More  #可以更改成想要顯示的文字
fancybox: true

此外，可以修改文章的引數，開啟scaffolds/post.md，增加類別和描述：

再新建一篇文章，就能看到增加了文章引數：

tags和categories有多個，則用陣列形式。

部署
在部署之前，需要通過命令把所有的文章都做靜態化處理，就是生成對應的html, javascript, css，使得所有的文章都是由靜態檔案組成的：

hexo generate
//same as
hexo g

在本地目錄下，會生成一個public的目錄，裡面包括了所有靜態化的檔案。

生成靜態檔案之後，如果要釋出到github，還需要配置deploy指令。在全域性的配置檔案中找到deploy：

# Deployment
## Docs: http://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/dwqs/dwqs.github.io.git
  branch: master

然後還要安裝hexo-deployer-git：

npm install hexo-deployer-git -S

最後利用hexo指令釋出到github：

hexo d
//same as
hexo deploy

在github上便能看到剛剛部署的靜態web網站：

如果部署的是個人頁，新建的倉庫必須的 your-user-name.github.io。

總結

Hexo常用命令：

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

參考文章：