前言

之前使用過好幾種筆記軟體: OneNote, Evernote, HackMD，也用過一些部落格: Pixnet, Blogger, Medium, 後來持續使用的是OneNote, HackMD 和 Blogger，但是使用比較長一段時間之後發現 OneNote 和 HackMD 也不太符合自己想要的，因為主要用途是要作為學習筆記，所以希望可以很方便的搜尋筆記內容、介面簡潔及方便客製化、對程式碼的支援度好、支援 Markdown 語法，OneNote 沒有內建支援 Markdown 語法(有付費的 plugin 可以使用)，而 HackMD 則是在搜尋筆記內容不太方便。
後來發現 Hexo 這個網誌框架，再搭配佈署到 GitHub page 或是 Bitbucket page，就可以很快速地建立自己的 Blog。它還有許多 Plugins 和主題可以使用，可以客製化自己的 Blog，接下來就稍微紀錄一下 Hexo 使用方式。

簡介

Hexo 是一個快速、簡單且強大的網誌框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，並且可以快速產生靜態檔案，再搭配 GitHub 或 Bitbucket 就可以快速地建立好自己的部落格。

安裝

在安裝Hexo之前，需要先安裝 Node.js 和 Git.

裝完 Node.js 和 Git 之後，接著安裝 Hexo.

1	$ npm install -g hexo-cli

建立Blog

安裝完 Hexo 之後，我們就可以來建立 Hexo 專案，並安裝所需要的 modules:

1
2
3

$ hexo init <folder_name>
$ cd <folder_name>
$ npm install

上面指令執行完之後，可以看到專案目錄的架構如下:

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

_config.yml: 網站的 config file, 詳細的配置可以參考官方文件: 配置.
package.json: 專案資訊，預設已安裝 EJS, Stylus 和 Markdown renderer.
scaffolds: 當建立新文章時，Hexo 會根據此資料夾來建立檔案。
source: 放置內容的地方，Markdown 和 HTML 檔案會被處理並放到 public 資料夾，而其他檔案會被拷貝過去。
themes: 主題資料夾，Hexo 會根據主題來產生靜態檔案。

開始使用 Hexo

基本設定都設定好之後，我們就可以開始使用 Hexo 來寫 Blog，主要流程: 建立文章 → 編輯文章內容 → 產生靜態檔案 → 佈署到 GitHub/Bitbucket.

建立文章

1	$ hexo new [<layout>] <title>

layout 有以下三種:

post: 公開文章, 路徑: source/_posts.
page: 頁面, 路徑: source/.
draft: 草稿, 路徑: source/_drafts.

如果沒有指定 layout，則會使用 _config.yml 中設定的 default_layout.

draft 之後要發佈為公開文章，可以使用publish指令:

1	$ hexo publish <layout> <title>

編寫內容

建立新的文章後，我們可以看到在檔案的最上方有類似這樣的內容:

---
title: 'Hello world.'
date: 2018-01-22 15:32:52
comments: true
categories: 
- Test
tags: 
- Test
- Hello
---

這是文章的資訊，各參數說明如下:

title: 文章標題
date: 文章建立日期
comments: 是否開啟評論功能 (須設定Disqus)
categories: 文章類別, 可以為階層式的類別
tags: 文章標籤

而文章是Markdown的格式，使用Markdown語法，語法可以參考: Markdown語法說明.

產生靜態檔案

寫完文章後，我們需要先產生靜態的檔案，因為 Blog 會是靜態的網站。
為了確保乾淨，可以先清除快取檔案(db.json)和靜態檔案(public)，再重新產生一份靜態檔案。

clean

清除快取檔案和已產生的靜態檔案。

1	$ hexo clean

generate

產生靜態檔案，選項:

-d, --deploy: 產生完靜態檔案後，直接佈署。
-w, --watch: 監看檔案變更。

$ hexo generate

# 縮寫:
# $ hexo g

啟動 Hexo Server

在佈署之前，我們可以先啟動伺服器，看一下目前 Blog 的樣子，預設的 URL 是 http://localhost:4000/.

選項:

-p, --port: 指定port.
-s, --static: 只使用靜態檔案。
-l, --log: log.

$ hexo server

# 縮寫:
# $ hexo s

佈署到 GitHub/Bitbucket

接著我們可以將目前的 blog 佈署到 GitHub/Bitbucket page, 在佈署之前，我們需要先進行以下動作:

建立 GitHub/Bitbucket repo.
如果是要放在 GitHub page (或Bitbucket page)，需要先建立一個username.github.io (或username.bitbucket.io)的repo, 其中username是你的 GitHub/Bitbucket 的帳號。
安裝 hexo-deployer-git.
1
$ npm install hexo-deployer-git --save

設定網站的_config.yml:

# Deployment
deploy:
  type: git
  repo: <repo URL>
  branch: master

接著我們就可以佈署到 GitHub/Bitbucket page.

$ hexo deploy

# 縮寫:
# $ hexo d

多台電腦編寫 Blog

如果需要在多台電腦編寫 Blog，可以再建立一個 repo，用來存放 Hexo 專案的原始內容，需要編輯時再從此 repo pull 最新的內容到新電腦編寫。

Customize

主題

Hexo 有許多主題，可以到 Hexo themes 選擇，再安裝所選擇的主題，並修改網站的_config.yml.
我選擇使用 NexT, 因為他的介面很簡潔，而且也有許多開源者貢獻。

使用 NexT

安裝:

1 2	$ cd <folder_name> $ git clone https://github.com/iissnan/hexo-theme-next themes/next

修改網站的_config.yml:

1 2	# Extensions theme: next

Plugins

除了主題之外，Hexo 也有許多 plugins 可以使用，推薦的 plugins:

theme-next-reading-progress: 閱讀進度
hexo-symbols-count-time: 統計文章次數及閱讀時間

其他功能

另外也可以增加其他功能，可以參考:

wshs0713's blog

[Hexo] Hexo 安裝及使用 (搭配GitHub/Bitbucket Page)

前言

簡介

安裝