Hello Hexo

緣由

我一直有寫 blog 的習慣, 包含音樂, 技術, 生活三大類. 音樂類在 blogger 寫了很久了, 也很熟悉 blogger 的功能, 他也滿足我大部分的需求, 包含可以完全自定 HTML/CSS/JS 等. 但是對於資料的完整性, 也就是除了文章, 其他還有圖檔部分, 就不是能夠完整備份, 因為它整合了 Picassa. 但我不是很喜歡這樣的整合, 不好備份. 哪天 google 把 blogger 收起來我就哭了 orz…

Blogger 另外的問題就是 HTML Editor 不好排版, 常常產生 garbag code, 差不多和 word 同樣等級了.

自重開始使用 markdown 寫文章之後, 就一直在找類似的系統, 本來是用 logdown, 不過用了一年, 發現問題都沒有在維護, editor bug 也不少, 功能也無法完全滿足我的需求, 所以就開始想找其他的系統了.

本來是想試 Octopress, 後來同事推薦 Hexo, 抱著好奇心的角度試看看, 發現跟以前我曾經用 PHP 把 BBS 文章轉成 web 的概念有點像, 可以整合 github, 所以就決定先用這套了!

必要的需求

容易備份: 包含資料內容, 圖檔等.
有 Draft 功能
修改可以追蹤, 最好類似 source control 概念, 支援 github or bitbucket
可以調整 Date, 因為我要把其他地方的 migrate 過來。
支援 Tag, Category (Folder), 容易調整 (雙向)
支援 markdown
可以自定 Domain Name (github 可以)
文章的 Template
網站外觀的 Template, Layout, CSS, JS 自訂功能
支援中文 UTF8
支援手機版
其他社群支援: FB, Twitter

Installation

Install Node.js, just download the pkg file and install …
Install hexo: npm install -g hexo
Create a repository in github, name as your_id.github.io
Init hexo in local, the instruction is in Mac OS:

# init a blog
~$ hexo init {blog_folder}
~$ cd {blog_folder}
~$ npm install
~$ npm install hexo-renderer-ejs --save

# new a post with title
~$ hexo new "Hello Hexo"

# edit the post with markdown
~$ vi source/_post/Hello-Hexo.md

# generate html
~$ hexo generate

# test in local, browse http://localhost:4000
~$ hexo server

# version info
~$ hexo --version
hexo: 2.8.3
os: Darwin 14.0.0 darwin x64
http_parser: 1.0
node: 0.10.35
v8: 3.14.5.9
ares: 1.9.0-DEV
uv: 0.10.30
zlib: 1.2.8
modules: 11
openssl: 1.0.1j

Config Blog

Generating SSH keys
- 使用 Windows 的話，建議先安裝 Git SCM for Windows, 除了 git client, 他也整合了 cygwin 和一些常用的 linux command, 像是 ssh, sftp, ssh-keygen … etc.
Update the blog config: _config.yml, update Site, and Deployment sections:

# Site
title: Complete Think
subtitle: Code, Think, Mangement
description:
author: Rick Hwang
email: rick_kyhwang@hotmail.com

# Deployment
## Docs: http://Blog.io/docs/deployment.html
deploy:
  type: github
  repository: git@github.com:rickhw/rickhw.github.io.git

圖檔路徑問題

使用文章目錄 (相對路徑)

在文章裡使用圖檔有兩種方法，第一個是將 _config.yml 裏的 post_asset_folder 改成 true，這樣透過 hexo new 的文章，會在同一層目錄建立文章資料的目錄，目錄名稱同文章標題。在文章裡的寫法大概如下：

1 2	![圖檔說明](圖檔名稱.jpg)

不用特別指定圖檔路徑，直接指定檔名即可，然後產生的結果圖檔會放在和文章同一層目錄。這種方法優點就是單一篇文章引用的資料，都會放在一起，但是有兩個問題：

其一：缺點就是在編輯時，無法使用像是 Mou 這種 WYSWYG 的工具可以看到，只能透過 hexo server 先測試。

另一個問題，如果圖檔在首頁範圍，圖檔會無法看到。因為首頁索引頁是另外產生的，他並沒有針對圖檔處理路徑的問題，而文章的 header 也沒有對應的參數可以設定圖檔路徑。

首頁問題，在寫文章的時候，可以技巧性地用段落預覽標籤  來避免。但如果文章一開始就要放圖檔，就勢必會看不到。

使用絕對路徑

先在根目錄建立圖檔路徑：/source/images，圖檔都放這個目錄，然後文章用以下方式引用：

1	![圖檔說明](/images/圖檔名稱.jpg)

這樣可以解決單篇文章、首頁索引頁的問題。不過還是無法解決用 Mou 編輯時 Preview 的問題。例子可以看這篇協同合作系統建制與導入 - 以 Redmine 為例做參考。

除了可以解決上述問題，絕對路徑還有另一個好處，文章圖檔可以共用。我個人比較喜歡這個方法。

另外這個方法，設定檔 _config.yml 不需要特別設定。

其他問題

hexo 的 generator 不會主動針對文章 header 做檢查 (validator)，文章標題如果格式有問題，沒有在 local review，很容易就出問題。像是 title: 前要是多了一個空格，就會有問題。
上傳的文件似乎沒有 source？我經常在很多台電腦寫文章，或者記錄靈感，看了 .gitignore 也沒有把 source 放進去，所以有點麻煩。。。後來找到方法了，很簡單，寫個 script 自己備份：Shell Script for Hexo source folder backup
- 後來知道 hexo 的運作方式, public 的資料上傳到 github, 其他則當作 source code, 放到另一個 git repository 即可, 我最後放在 bitbucket.
搜尋功能仰賴 google，需要等 google 來爬過才行
需要更好的 md editor, Mou 算不錯，但是新版的不夠穩，常常會 hang 住沒反應。
~~沒有內建一些社群分享功能，要自己加~~ 這都可以自行修改 theme 即可.
~~沒有回覆功能，當然 hexo 是強調靜態形式，所以這個要求是太超過了點~~ 同上.
試過手機版沒問題
效率問題: hexo 在 generate 的效率並不高, 在 windows 每一個 html 要花費 1000ms, 在 mac 上則是 200ms 左右. 雖然不影響功能, 但影響心情 … 想自己用 java 刻一個 = =

Hello Hexo

緣由

必要的需求

Installation

Config Blog

圖檔路徑問題

使用文章目錄 (相對路徑)

使用絕對路徑

其他問題

延伸閱讀 (站內)

Reference

Comments

About

著作

演講

Facebook

AWS Certifications