使用Hexo + Github建立個人部落格

Hexo 是一個輕量級的網誌架構，這種靜態網誌簡單又快速，可以部署到 GitHub Pages 等，寫文章可以用本地編輯器生成，例如 Sublime Text、Atom 等，文章格式則是用 Markdown 標記語言寫作。

注意：本篇文章面向 Mac 用戶。

1. 安裝需求

Hexo 的文件頁面已經說明的很清楚，在安裝前需要確認是否有：

Git
Node.js

Mac 用戶可以用 Homebrew 套件管理工具下載安裝。

1.1 安裝 Git

安裝完 Homebrew ，在終端機執行下列指令：

$ brew install git

可以順便查看目前版本：

$ git --version

1.2 安裝 Node.js

Hexo 官網建議透過 nvm 安裝 Node.js ，我們可以用 Homebrew 先安裝 nvm 。

1.2.1 安裝 nvm

$ brew install nvm

為了能在 shell 使用 nvm 指令，需要輸入：

$ echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

重新載入 .bash_profile 設定：

$ source .bash_profile

1.2.2 透過 nvm 安裝 Node.js

查看有哪些版本可以安裝：

$ nvm ls-remote

根據官網建議的穩定版本，假設是 v4.4.3 LTS ，我們輸入下列指令：

$ nvm install v4.4.3

這樣 Node.js 就安裝完了。

可以順便測試一下 Node.js ：

$ node -v

以及測試 npm ：

$ npm -v

2. 安装 Hexo

執行下列指令安装 Hexo ：

$ npm install -g hexo-cli

進入想要存放網誌的文件夾，例如根目錄有個 blog 文件夾：

$ cd ~/blog

執行下列指令， Hexo 會建立在其文件夾：

$ hexo init
$ npm install

這樣就安裝完了，關於裡面的文件夾及配置可以看官網的說明文件。

3. 部署至 Github

3.1 創建 GitHub Pages

註冊 Github 完後，創建跟帳號同名的 repo :

username.github.io

創建完後，在其 repo 頁面點擊：

Settings > GitHub Pages > Launch automatic page generator

這樣就生成 GitHub Pages 了。

3.2 設定 Hexo

在 Hexo 文件夾中找到 \_config.yml 檔案，打開後找到 Deployment ，修改成：

deploy:
type: git
repo: [email protected]:<username>/<username>.github.io.git
branch: master

打開終端機，安裝 Git 插件：

$ npm install hexo-deployer-git --save

3.3 部署網誌

關於指令，可查看 Hexo 官網的指令文件。記得執行任何 Hexo 指令，都必須在該網誌的文件夾內執行，例如你的網誌建立在 blog 文件夾內，則必須先進入該文件夾：

$ cd ~/blog

進入後，先產生靜態檔案：

$ hexo g

如果想預覽網誌，可以啟動伺服器：

$ hexo s

它會提示：

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

在瀏覽器中進入 http://0.0.0.0:4000/ 即可預覽你的網誌。

接著執行：

$ hexo d

網誌就部署到 Github 了，打開 username.github.io ，很快就看到成果。

4. 如何部署免密碼

Hexo 每次部署時需要輸入密碼，對於懶人來說太麻煩了，我們可以透過 SSH Key ，免去這道程序。

4.1 創建 SSH Key

執行下列指令：

$ mkdir ~/.ssh
$ cd ~/.ssh

輸入並更改成你的 Email ：

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

它會提示：

Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/you/.ssh/id_rsa): [Press enter] #按 enter 就好

然後會提示：

Enter passphrase (empty for no passphrase): #不需要密碼，按 enter
Enter same passphrase again: #不需要密碼，按 enter

下列指令會複製 id_rsa.pub 内容：

$ pbcopy < ~/.ssh/id_rsa.pub

4.2 新增 SSH Key 至 Github 中

進入 Github 設定頁後點擊「Add an SSH Key」，將剛才複製的 id_rsa.pub 内容貼到 Key 框中，在 Title 框中隨便輸入一個名字。

測試：

$ ssh -T [email protected]

出現：

The authenticity of host 'github.com (207.97.227.239)' can't be established.
RSA key fingerprint is 16:27:ac:a5:76:28:2d:36:63:1b:56:4d:eb:df:a6:48.
Are you sure you want to continue connecting (yes/no)?

輸入 yes ，出現以下提示則成功：

Hi username! You’ve successfully authenticated, but GitHub does not
provide shell access.

設定你的資訊：

$ git config --global user.name "yourusername" #GitHub 帳號
$ git config --global user.email "[email protected]" #你的 Email

這樣就完成了，以後輸入 hexo d 就可以一鍵部署。

5. 佈景主題

關於網誌的主題可以到 Themes · hexojs/hexo Wiki · GitHub 尋找，也可以看網友推薦哪款主題，或者自己 Google 。

5.1 如何換主題

找到喜歡的主題後，例如 NexT ，依照它的頁面說明，輸入下列指令：

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

安裝完後，到站點配置文件 \_config.yml ，找到 theme ，將其值改為 next ：

theme: next

這樣主題就啟動成功了。

5.2 修改主題

5.2.1 Favicon

將網頁 ico 檔放在 ../themes/next/source 打開主題配置文件 \_config.yml 找到 favicon ，填上 /favicon.ico ：

favicon: /favicon.ico

5.2.2 Avatar

將頭像圖放在 ../themes/next/source/images

打開配置文件 \_config.yml ，填上：

avatar: /images/avatar.jpg

5.2.3 Google Analytics

註冊 Google Analytics

修改配置文件 \_config.yml ，新增你的 ID：

google_analytics: UA-xxxxxxxx-x

5.2.4 RSS

安裝插件：

$ npm install hexo-generator-feed --save

修改配置文件 \_config.yml ：

plugin:
    - hexo-generator-feed

# Feed Atom
feed:
type: atom
path: atom.xml
limit: 20

5.2.5 建立標籤頁面

新建頁面：

hexo n page "tags"

然後 \_posts 文件夾旁邊就會多出一個 tags 文件夾，打開其中的 index.md ，新增 type: “tags”

---
title: tags
date: 2016-04-09 20:19:13
type: "tags"
comments: false
---

要關掉評論系統，就設置 comments: false

修改主題配置文件 \_config.yml ，在 menu 中添加 tags ：

menu:
    home: /
    categories: /categories
    #about: /about
    archives: /archives
    tags: /tags

5.2.6 建立分類頁面

新建頁面：

$ hexo n page categories

打開 categories 文件夾中的 index.md ，新增 type: “categories”

---
title: tags
date: 2016-04-09 20:19:13
type: "categories"
comments: false
---

要關掉評論系統，就設置 comments: false

修改主題配置文件 \_config.yml ，把 categories 前頭的＃字號註釋去掉：

menu:
    home: /
    categories: /categories
    #about: /about
    archives: /archives
    tags: /tags

5.2.7 修改文章模板

就是每次建立新文章的模板，打開 scaffolds/post.md ，例如新增 flickr :

---
title: {{ title }}
date: {{ date }}
tags:
categories:
---

{% flickr id o %}

5.2.8 網誌開站時間

打開主題配置文件 \_config.yml ，可以在 since 填上你網誌的開站年份：

# Specify the date when the site was setup
since: 2016

5.2.9 字體

編輯 source/css/\_variables/custom.styl ，添加：

$font-size-base = 16px; // 字體大小
$font-family-headings = Georgia, sans // 標題字體
$font-family-base = "Microsoft YaHei", Verdana, sans-serif // 字體

如果上面方法沒用，可以試試編輯：字體： /themes/next/source/css/_variables/custom.styl 字體大小： /themes/next/source/css/_variables/base.styl

字體大小可以找找 base.styl 裡面的：

// Font size
$font-size-base = 16px
$font-size-small          = $font-size-base - 2px
$font-size-smaller = $font-size-base - 4px
$font-size-large = $font-size-base + 4px

// Headings font size
$font-size-headings-base  = 24px
$font-size-headings-step = 2px

// Code & Code Blocks
$code-font-family = $font-family-monospace
$code-font-size = 16px
$code-background = $gainsboro
$code-foreground = $black-light
$code-border-radius = 4px

5.2.10 圓形頭像

可以把正方形頭像修改成會旋轉的圓形頭像。

進入： next\source\css_common_section\sidebar.styl

添加註釋裡面的代碼：

.site-author-image {
display: block;
margin: 0 auto;
max-width: 96px;
height: auto;
border: 2px solid #333;
padding: 2px;

/_ start _/
border-radius: 50%
webkit-transition: 1.4s all;
moz-transition: 1.4s all;
ms-transition: 1.4s all;
transition: 1.4s all;
/_ end _/
}

/_ start/
.site-author-image:hover {
background-color: #55DAE1 ;
webkit-transform: rotate(360deg) scale(1.1);
moz-transform: rotate(360deg) scale(1.1);
ms-transform: rotate(360deg) scale(1.1);
transform: rotate(360deg) scale(1.1);
}
/_ end \*/

6. 常用指令

建立新文章：

$ hexo n [layout] <title>

一開始我們是沒有設定 layout ，所以預設是 post ，這很方便，因為建立新文章的指令就變成只要：

$ hexo n "台南三天兩夜心得"

寫完文章後，需要產生靜態檔案：

$ hexo g

然後可以啟動伺服器，在瀏覽器預覽文章：

$ hexo s

預覽完覺得文章可以了，就部署上 Github ：

$ hexo d

如果要更快一點輸入指令，可以把指令組合起來：

$ hexo g -d #產生後部署

建立草稿：

$ hexo n draft <title>

發佈草稿：

$ hexo publish [layout] <filename>

清除快取檔案、靜態檔案：

$ hexo clean

這指令有時很重要，例如遇到一些問題，網頁沒刷新之類的，清除一下就好了。

7. Markdown

Markdown 是一種輕量級的標記語言，不用記住 HTML 的繁雜語法就可以管理書寫文件，並且可以透過工具輸出成 HTML ，也可以用來當作平常筆記的簡單格式，建議大家書寫網誌時可以使用 Markdown 。

關於 Markdown 標記語言的書寫，可以參考： Markdown | GitBook 中文解說。

目前 Markdown 工具有很多種，這裡大略簡單講個幾種。

7.1 Web 端

StackEdit：也有 Chrome 應用程式可以使用，跟許多知名的 Blog 平台、雲端硬碟緊密結合，如果你想用 Markdown 書寫，又不想自行架站的話，我想 StackEdit 是目前最好的方案。

7.2 桌面端

Mou：應該可以算是中文支持度最好的 Markdown 編輯器，由中國人罗晨開發，支援 Mac 系統。
MacDown：台灣人出品，免費、開源的 Markdown 編輯器，支援 Mac 系統，跟 Mou 有過一些江湖事 XD。
Miu：一款模仿 Mou 的 Windows 平台 Markdown 編輯器。
Sublime Text 3：安裝一些插件後，可以在瀏覽器預覽，但不是像其他編輯器一樣雙視窗預覽。
Atom：Github 出品，本身內建支援雙視窗即時預覽 Crtl+Shift+M ，有空我在寫文章介紹一下。
Haroopad：韓國出品，跨平台，雖然中文只有簡體中文介面，不過相當美觀清爽，功能俱全。

7.3 移動端

尚未研究 XD

8. 問題解決

有時候會遇到一些莫名其妙的問題，我在此記錄一下。

8.1 hexo d 停止

有次 hexo d 等太久，跑去 Google 查到這個問題。刪掉 .deploy_git 檔案，重新產生部署：

$ rm -rf .deploy_git
$ hexo d -g

8.2 hexo g 出錯

這個問題應該是 Mac 用戶會碰到，就是 hexo g 出錯，顯示什麼 .DS_Store 文件，其實刪掉就可以了。看它是說在哪個文件夾，就進入把 .DS_Store 刪掉：

$ rm -rf .DS_Store

也可以用 Atom 之類的編輯器，打開目錄樹，直接把 .DS_Store 刪掉。

1. 安裝需求#

1.1 安裝 Git#

1.2 安裝 Node.js#

1.2.1 安裝 nvm#

1.2.2 透過 nvm 安裝 Node.js#

2. 安装 Hexo#

3. 部署至 Github#

3.1 創建 GitHub Pages#

3.2 設定 Hexo#

3.3 部署網誌#

4. 如何部署免密碼#

4.1 創建 SSH Key#

4.2 新增 SSH Key 至 Github 中#

5. 佈景主題#

5.1 如何換主題#

5.2 修改主題#

5.2.1 Favicon#

5.2.2 Avatar#

5.2.3 Google Analytics#

5.2.4 RSS#

5.2.5 建立標籤頁面#

5.2.6 建立分類頁面#

5.2.7 修改文章模板#

5.2.8 網誌開站時間#

5.2.9 字體#

5.2.10 圓形頭像#

6. 常用指令#

7. Markdown#

7.1 Web 端#

7.2 桌面端#

7.3 移動端#

8. 問題解決#

8.1 hexo d 停止#

8.2 hexo g 出錯#

9. 參考資料#