Migrate to Hexo blog 順便作個小模組


我換到 Hexo 了,之前是使用 Octopress,當初會使用 Octopress 最大吸引我的就是使用 markdown 來寫 blog 文章,覺得比較快速方便,其次是可以丟到 github page 上還可以自訂網址! 這麼讚!馬上就跳過去了.

使用一段時間之後發現它產生文章真的有點慢…我文章就已經在不多了還很慢,而其中比較困擾我的是我修改了文章內容,本機預覽卻不會馬上出現,而是要重整個幾次才出現,當然後來也知道了解法.

之後是在發佈到 github page 時卻產生了一種不確定感,因為 deploy 失敗,要 fast-forward,後來有網路紅人作了 Logdown,使用 markdown 編輯器,也可自訂網址,超強! 還有很多 feature,使用上也是非常方便啊!!!

但我個人還是比較喜歡自已自訂些東西,所以後來發現 Hexo 使用 node.js 作的 blog framework,真不愧是目前火紅的 JS 從前端走到後端啊! 功能我覺得跟 Octopress 挺相似的,但最大優勢就是速度快啊~
而且覺得 Octopress 的安裝還是有一定的門檻在,相較 Hexo 簡單得多些…

以上碎念,來看怎麼裝 Hexo 吧!

先安裝 node.js

Node.js 可以說是個使用 Javascript 語言的伺服器後端,選作業系統安裝,此安裝會幫系統裝 node 及 npm (Node Packaged Modules node 的套件管理工具)。

接下來就可以裝 Hexo

在終端機輸入 npm install hexo -g 會把 hexo 下載並安裝

接著進到你想安裝 blog 的路徑,再輸入 hexo init blog && cd blog hexo 會把需要用到的檔丟到 blog 這個資料夾。
之後再執行 hexo server 就可在網址打 http://0.0.0.0:4000 預覽! 你可以編輯 _config.yml 來設定更多 blog 選項。
這有詳細的設定說明

執行 hexo generate 會在 public 資料夾下產生靜態檔,只要執行 hexo deploy 這些靜態檔就可以部屬到自已的網頁空間、 github 或 heroku 等等… Hexo 還有蠻多 plugins 看你有什麼需求再安裝吧!

而文章的 markdown 原始檔及圖片都會放在 source 資料夾下,當你執行 hexo new "New Post" 建立新文章時,也會放在這資料夾下,以上是簡單的介紹,詳細可以看官網說明 說明得蠻清楚的!

Hexo Flickr tag 模組開發

在得知 hexo 後,立馬就在我本機先裝了起來,從 octopress 轉移到 hexo 應該還蠻無痛的,但我不是,為什麼這麼說呢? 因為如果用了某個 tag 模組就 gg 了!

因為我的 md 文章裡有用到 {% flickr %} 來直接取得 flickr 的照片,由於 hexo 沒有這個 tag 模組,在 generate 時了噴好多錯誤,而我文章裡又用了不少,我又不想一個一個改成 {% img %},大致看了一下文件,決定來自已造輪子開發了。

一開始使用 plugin 的 tag 方法結果發現是直接轉換 html,沒法等待取得 flick api 資料,問了作者 @tommy351 才得知可用 Filter 方法,可以等處理完資料在 callback,結果對 node 很嫩的我搞了好久,才弄出來,後來測試發現只能用在一個文章,多篇就一樣會有還沒取完資料就跑 server 了,等於 flickr 標籤還沒被替換就生成 html 了,一度還想要放棄,還試過 async 還是有問題,後來發現 Filter 可設定 pre 或 post,在經過幾次空白標籤的洗禮後,總於使用 pre 解決了,之前一直使用 post …

而使用 hexo-tag-flickr 的最大好處呢就是,想貼上 flickr 照片時,只要把 flickr 網址中那串數字 copy 下來,貼到 markdown 文章裡的 flickr tag,就可以自動幫你產出照片了,不用還要去按分享取得這張照片的實際 url,當然應該只有像我把 blog 的圖丟到 flickr 的人比較有這樣的需求… 呵!

hexo-tag-plugin-flickr

如果有在使用 flickr 的人可以安裝一下 npm install hexo-tag-flickr --save,雖然有 bug 我可能不見得會修會修得比較慢,請鞭小力點 <(_ _)>。