這一陣子,牛牛興趣項目的重心都在建構 Cow Say 這個部落格。


部落格平台 Blogging Platform

如果目標是想專注寫寫文章的同學們,不妨多試試幾個部落格平台,尋找一個能與你心靈契合💙的寫作空間。

這篇文章「How to Choose the Best Blogging Platform in 2019 (Compared)」提供了2019評價前十的平台供各位選擇。 其中我用了 Medium,風格簡約、乾淨俐落,而且那個鼓掌的功能我還挺中意,還可以接收每周閱聽報告,藉此你可以知道這一周內,你的哪篇文章收到了多少瀏覽量。

適合想要專注於寫作的你🖋️。


部落格引擎 Blogging Engine

這篇文章「Best JavaScript open source blog engines for developers and writers.」羅列了幾個經典的 JS 部落格引擎,其中 Hexo 便是我最後採用來建構本站的引擎。

Gatsby

Gatsby 是基於 React 的靜態網站生成器。

除了上文中提及的那些部落格引擎外,Gatsby 作為後起之秀並未收入於該文內。 追逐潮流式開發的同學們對 React 這響亮的名字肯定不陌生,然而因為牛牛實在太菜了🥦,以致於尚無心力去追逐 React,所以 Gatsby 並不在牛牛的選擇之中。

Veripress

這邊我還想要再提到另一個部落格引擎,Veripress。 這個引擎是由牛牛在開發酷 Q 機器人🤖的時候認識的小夥伴開發的 ( 商業互吹警報 🚨)。

我花了點時間,為 Veripress 搬移了一套主題,veripress-theme-suka (Demo)。

原主題是由 Sukka 大神寫給 Hexo 的主題,透過這次搬移也讓我吸收了不少靜態網站專注的知識點💡,主要在於 SEO 和 OpenGraph 的部分,並藉此多認識了不少實用的前端小掛件,包含代碼高光、評論系統...等等。

ありがたい。

A blog engine for hackers.

言歸正傳,Veripress 是基於 Python Flask 撰寫而成的引擎,比較不同的是,伺服器在 API 模式下會將部落格文章、分類等資訊以 JSON 的方式提供。

Veripress 架構沒有 Hexo 顯得複雜,畢竟 Hexo 已經發展一定的時間,有一定數量的社群力量支持。 這個體會,我從 Hexo 將主題搬移至 Veripress 尤其深刻。

Hexo 的功能可透過腳本與插件擴充(下面還會更詳細的說明這些特性),而到了 Veripress 主要都是藉由主題模板(也就是 Jinja2)去實現。 至於怎麼將 NodeJS 模塊的同等功能以 Jinja2 實現,我大量依賴的是 Jinja2 中的 from xxx import yyymacroset 等語句。 這些具功能性的模板都在這個目錄下,基本上部落格引擎的工作不外乎就是字串再組裝,所以如果有基本的邏輯語句(ifelseandor)就可以實現大部分的需求,但畢竟模板本身就不適合用來做複雜的處理,搬移的過程也有不少坑坑洞洞。

我們別盡說些缺點,反正該發的 issue 我一個都沒少😏。

Veripress 中,有一個想法我覺得還蠻令人回味,我曾在修改 Hexo 主題時一度想要借用。Veripress 中的定制模板,讓作者們可以在選擇一個主題後,只針對部分模板進行客製化。

例如,牛牛安裝了一個草原風🌿的主題,然而 SEO 裡的描述卻不是牛牛想呈現的,於是牛牛只需要在 custom 目錄下寫一個新的 head.html 覆蓋原主題內的 head.html 即可。

在 Hexo 中似乎並不流行這種對模板的再加工(儘管技術上可行),基本上想要修改這個部分,就直接修改主題模板的檔案。 可能的原因,我猜想是因為在 Hexo 裡面,主題安裝後是跟著網站進去版本控制的,而在 Veripress,主題自身就是一個 Repo。


使用 Hexo 生成靜態檔案

主題模板

很久以前就看過基於 hexo-theme-apollo 修改的主題部落格,這個萌而簡單的風格我喜歡。 由於 hexo-theme-apollo 的模板是由 Jade 撰寫,然而 Jade 早已不再維護,現在更名為 Pug,於是我決定著手重構,以 hexo-theme-apollo 的樣式為底,並以 Nunjucks 進行模板重寫。

會選擇 Nunjucks 的理由,其實跟前面那段搬移主題至 Veripress 的經驗有關,因為 Nunjucks 的語法就是模仿 Jinja2,雖然並不完全兼容,但上手時間對我而言更加有利。

cowsay-blog/hexo-theme-cowsay

主題的原始碼開放在 Cow Say 的 Github 上,不過還需要一點時間整理。

評論掛件

從 hexo-theme-cowsay 評論掛件的目錄下,就可以看出我也踩了幾個評論掛件的坑。

有的評論掛件如 disqusjs 不需要自行部屬後端,有的像是 wildfire 就需要自行創建一個 Google Firebase 或是 Wilddog 後端資料庫。在選擇上,其實我並不在意是否需要部屬,所以端看 UI 樣式決定的。

Disqus 是 hexo-theme-apollo 的默認評論掛件,然而 UI 上我覺得搭配這個主題略顯浮誇,因此又嘗試了其他掛件。 其他還有像是 CommentBoxCommento,CommentBox 感覺就比較老氣,而 Commento 官網做得很潮很漂亮,但實際看了 UI 其實我內心感到些許差強人意。

於是我選擇了野火 wildfire,野火是基於 Vue 開發的,可作為一個 Vue 組件於程式碼中運用,或者使用 wildfire.auto.js 這個檔案獨立運作。野火需要部屬一個後端資料庫 ( Firebase/ WildDog 二擇一),我選擇的是部屬在 Firebase 上,野火的官網都提供了很詳盡的說明如何進行部屬。

自製 Hexo 插件

目前自己仍在整理幾個自行開發維護的 Hexo 插件,如果日後整理好,大概會在各發一篇文介紹一下。

這邊就先依序唱名帶過。

hexo-nanoid

cowsay-blog/hexo-nanoid

這個插件目前基本上已經完成了。

它會給每篇文章產生一個 ID,可當作該文章的永久連結。 就像本文的 URL 這樣。

hexo-renderer-nunjucks-extra

cowsay-blog/hexo-renderer-nunjucks-extra

改寫自 hexo-renderer-nunjucks,因為這個項目看起來已經有點時間沒有維護了,而且沒辦法定制 Nunjucks 的 Filter (同 Jinja2 裡面的 Filter),所以決定自己維護一個。

不過項目名稱實在有點長,還在猶豫是否以這個名字發布🤔。

hexo-webpack

cowsay-blog/hexo-webpack

本來用的是 hexo-renderer-webpack4,但後來想要支持慣例的 webpack.config.js,使用 webpack.config.js 有個好處是 Webpack 插件也可以支持,若是把 Webpack 配置寫到了 _config.yml 那就無法加入插件了。

同時,來自主題的 *.js (/themes/<主題名>/source/*.js) 與來自網站目錄下的 *.js (/source/*.js) 應該用不同的 webpack.config.js 去配置,因為 Webpack 打包後的輸出路徑只有 webpack.config.js 的作者自己知道,來自主題的 *.js 就要用來自主題的 webpack.config.js 來打包。

因為這兩個理由,於是又自己寫了個插件。

然而尚未完工,立入禁止 🚧

hexo-fontmin

cowsay-blog/hexo-fontmin

字體檔案壓縮工具。

原本我的標題:「Cow Say 哞。沒事多吃草。」這個用了瀨戶字體,一個字體檔 12MB,藉由這個插件壓縮後,剩下 6KB。

還有一些想法還沒有實現,目前是讓使用者自行配置一個字集,然後依據這個字集將原字體檔抽出子集合來。 現在在考慮使用 JSDom 搭配 computedStyle 去找出使用到這個字體的可能字符,將這些字當作字集從原字體檔中抽出。

實驗中 ⚗️

其他 Hexo 插件

發現些不錯的第三方插件。

hexo-renderer-markdown-it

hexojs/hexo-renderer-markdown-it

Hexo 預設使用 hexo-renderer-marked 來渲染 Markdown,而我替換成這個渲染器,主要是因為 markdown-it 自己也擁有一個不錯的插件系統可以擴充 Markdown 的渲染,而且支持了一些 PHP Markdown Extra 的東西,像是備註 (Footnote) 、縮寫 (Abbreviations) 、上標 (Superscript) 、下標 (Subscript) 等等。

hexo-renderer-scss

mamboer/hexo-renderer-scss

將 SCSS 渲染為 CSS,同時提供了一些 Hexo 相關的全域變數, Hexo 的配置內容可以直接進到樣式表了!


次回預告

接下來應該會整理一下開發 Hexo 插件的種種經驗。 敬請期待。