05 January 2014

時隔整整 8 年,這個小小部落格終於要搬啦。現時部落格已經不合潮流了,但偶而還是要有個地方可以發洩自己的想法和發現。新年到了,新年的 resolution 不能只是 1024x768,就好好建個新的窩吧

選定新家

新家要在哪 Host 呢 ? 老派的 tumblr/WordPress 嗎 ? 還是新勢力 medium?之前想申請 medium 體驗它的 UI,但遲遲不下來,後來就放棄了。那個剛篡紅的 ghost 如何 ? ghost 可以用 markdown 還蠻吸引我的。選擇很多,不過回頭過來想,這 8 年來有多少部落格平台消失沒落呢?

任何 Hosting Service 最終都會消失

大公司的免費服務說停就停,新創業的就更不用說了。唯一的方式是自己架站,自己保留文章,才是長久之計。原本的 Javaworld 的部落格,某方面也算是自己架站了 (站長就是同事,主機放在公司網路),所以才能撐個 8 年沒事。雖然自己架了,但部落格的系統卻很老舊,沒人想維護和更新,想換個 markdown 也困難重重。隨著時間而逐漸累積的技術債,無可避免。

所幸現在流行一種新方式:static site generator。平台依賴性極低,只要能 host 純檔案的網路服務就夠了,這可以避免未來技術債的麻煩,而且因為架構太簡單,日常維護的工作量等於零。剩下的就是保留好原稿,以及產生器的選擇。

Jbake

身為 Java 人,當然馬上 Google java static site generator,第一個映入眼廉的就是 Jbake。腦袋接著啟動評分器:

  • github 最後一次更新日是十天前,這個好
  • 專案貢獻人有 8 位,不是個人專案,不錯
  • 技術平台是 jetty、freemarker、jQuery、bootstrap,這都我吃飯的傢伙嘛,讚。

題外話,貢獻人數和更新頻率是我基本的評分法,相信大家也都是如此。如果看到一個專案這兩者分數都低的話,我會馬上換其他方案,如果沒有其他替代方案的話,我通常就選擇自己寫了。

ok, Jbake 試用一下,真是簡單啊,我只用了三個指令就搞定了: jbake -sjbake,還有另一個忘了,因為只做了一次。它可以吃 markdown 和純 html 檔,剛好滿足我的需求。未來寫文章原稿大概都是 markdown 了,而純 html 檔的功能只用在舊稿件上。

客製新網站 Style

Jbake 還停在 bootstrap 2,二話不說馬上升級,再晚點升又變技術債了。既然是自己的網站,能乾淨就乾淨,不要零零碎碎的邊條,或是新穎的動畫選單。重點還是內容要好讀,網站要飛快。bootstrap 3 原生的樣版就很簡潔,夠我用了。少點客製未來升級才不會痛。bootstrap 3 直接就是 mobile first 了,手機上看的清楚俐落,我很滿意。

對了,提醒一下,不要用 IE 來我的部落格。

轉換舊文章

接下來就是轉換舊站的文章,8 年下來也累積了 150 篇長短文,是日記,也是心血,不能說丟就丟。我的原稿都是簡單的 html 文,主要的麻煩在程式碼的呈現上,過去我用 SyntaxHighlighter ,而 Jbake 則是預設使用 google 的 prettify。 一開始用 SyntaxHighlighter 是蠻爽的,但久了就會發現它很慢,網頁會先閃一下才會套好樣版。因此這次就順水推舟,順便換了。

處理 html 原稿我是用 jsoup。這工具真是人間天堂,用過就再回不去了。最強的就是可以用 css selector 語法找 tag。我同事 (a Pythonista) 說專案名有 soup 都是好專案,似乎還真有點道理。

基本配備

一個部落格網站再陽春,也該要有的基本配備:

  • 一個 domain
  • 搜尋功能
  • Facebook open graph meta tag
  • RSS Feed
  • 留言功能

準備這些還真的像極了東市買駿馬,西市買鞍韀... 你懂我的意思的。domain 我本來想買 ingramchen.com ,不過這被別人綁架了,無奈只好買 ingramchen.io.io 的 domain 好貴啊,一年要美金 39 元是怎麼回事啊,搞不好這是我的部落格成本最大的部份。

搜尋功能就直接接 google 的站內搜尋,按步驟做完網站驗證,和調整那些細步設定。說實在的,那個設定網頁做的不怎樣。

RSS Feed Jbake 內建!喔!調幾個參數就好,爽。

接下來是為了網路爬蟲和分享文章做準備。網站的 meta tag 裡填好 Open Graph Protocol 那些 og: 開頭的資料大概就夠了。文體本文再包上 <article> 這個 HTML5 tag。這樣夠好爬了吧?好好吃吧!爬蟲們!

留言功能

最後一項基本配備是留言功能。這是 static site 部落格最大的罩門,因為沒有後台伺服器,只能外包。外包的缺點就是未來會消失,這真是遺憾了。現在大宗的留言系統是 Facebook 和 Discuz ,偏偏這兩個我自己都沒在用。所以我還是照舊選了 Google+,雖然沒人會用就是 (裝心酸的啊!)。這算是新網站內讀取最慢的部份吧,一堆 javascript 真是煩。

Amazon S3 Static Web Site

最後,產生的文件檔要 host 在哪呢?我知道有免費的可用,也有便宜的。不過我最後選了最貴的 Aws S3。S3 有提供檔案直接變網站網頁的功能,設定上不難,轉網址 Route53 服務才是比較頭痛的地方。知道怎麼設之後就很簡單了,但一開始要摸索一陣子。

選 Aws 就是花錢省麻煩:

  • 我已經在 Amazon 有付費的帳號了,如果去找一個無名的小站提供的低價服務,我要提供帳號和信用卡給他們,這一點讓我很不放心。
  • 我熟 Aws,每天都在用啊!
  • Aws 是我最信任的服務商,是的,我認為比地球上的任何一家都棒,包含 Google。

這些選擇條件大概不適用其他人吧?加減看看就好。上傳文件的話 S3 的工具很多。我是用老牌子 s3cmd,一個指令 sync 一下就萬事 ok 啦!

Aws S3 的哪?

如果沒選的話,S3 服務預設開 bucket 是選 US standard 這個區域,也就是檔案放在美國。我測了一下,從台灣下載個網頁要 400ms,這不能接受啊!馬上換到新加坡的資料中心:喔?變 100~200ms 之間,好多了。我另外換東京資料中心試了一下,跟新加坡速度差不多。

最後我選了比較貴的東京,理由嘛... 根據最近兩年我們公司的使用經驗,我們發現台灣到新加坡比較不穩定 (偶而就會有一個 ISP 幾個小時不能連之類的)。到日本相對來說穩定的多。這給各位個參考。Aws 也有 CDN 啦,但殺雞不需用牛刀。

新文章發佈流程

static site 沒有部落格的後台,發文就很手工啦:

  • 先寫好 markdown 文章,我是用 stackedit.io 這個網站。如果有 app 我也會想用 native 的啊!無奈我找不到好的跨 OS 的 markdown 編輯器 (我只用跨 OS 的產品,嘿嘿)。話說回來 stackedit 還不錯用啦,也可以 offline。沒什麼大困擾,先撐著吧。
  • 稿件寫好後 (現在都要花一整天寫...) 以日期為目錄結構存檔
  • 跑一下指令 jbake。在我的筆電上跑 150 篇要 3 秒,但我看 2 秒的時間都是在啟動 JVM。
  • 下個 s3cmd sync output/ s3://ingramchen.io/ 指令
  • 收工 :)

結語

這一次搬家,轉換了舊文章,現在看看過去最早的那段時期,更新還真是勤勞,不愧是 web 2.0 的黃金時期。不過內文很多都很短,這些現在都被 social network 取代了。長文的需求永遠都會在,無法取代。這也是為什麼我會在這裡。

我的新 About 頁 有人看嗎?哈!


回響

可以用 Tag <I>、<B>,程式碼請用 <PRE>