利用 jbake 從 blogger 搬家到 github

2015-08-18

打算搬離 blogger 的念頭很早就有了，只是一直沒有行動。主要原因還是打包整個站台的文章、圖片太麻煩，所以就一直沒動手。二週前開始有了段長時間的空檔，所以下定決心告別 blogger，自己蓋個新 blog 站台。

為何搬離 blogger

沒事 blogger 用的好好的為何會想搬家呢? 原因大略是下述儿點

不易撰寫技術文章。blogger 上面寫一般生活記事很容易，但是寫程式開發技術文就不是這麼回事了，要讓美美的程式碼秀出正常樣子實在太累人。
發佈文章前的文章檢視功能跑起來超慢。這可能跟我在 blogger 上插了很多外掛模組有關，但是這些模組我都會用到呀不能拿掉，所以這問題無解囧rz

選擇新家

既然要搬家了，那新家要怎麼選呢? 我決定 自己的 blog 自己蓋。

ingram 的新年搬新家- Jbake 裡提到 任何 Hosting Service 最終都會消失 是非常中肯的見解。雖然不見得一定會消失，但是未來的事實在太難說。現在寫 blog 早就不潮了，但是寫了十多年累積的 400 多篇文章說什麼也不能隨著搬家歸零重來。為了避免未來一而再再而三的搬家，還是自己蓋 blog 吧!

新 blog 怎麼搭建?

既然要自己土砲了，那當然是找目前市面上 static site generator 產品有哪些。 StaticGen 上看到的統計報表裡，最熱門的產品是 jekyll，不過我是 java guy 所以我選 jbake 這個 java solution。

下列儿項 jbake 產品特性是我選它的原因

完整的說明書。
多人維護的專案，不用擔心突然被放生。
blog 文章支援 markdown, html 格式。html 格式就不用說了，算是舊時代的遺物，一定會支援。寫新文章的話，如果不是文章格式很複雜，我是一定會選擇 markdown 格式，可以省時又省力。
內建 jetty，文章寫完後可以馬上在 local 跑起來看看結果正不正確，不需丟到 remote 才能進行驗証
文章裡貼的程式碼可以用 pretty print 風格來呈現。

jbake 快速上手

下載 jbake 進行安裝。目前 v2.4.0 最新版有個嚴重的 bug，每次 site gen 時一定會全部資料重建，沒辦法進行 incremental render，建議安裝 v2.3.2 版。

jbake v2.3.2 常用指令沒儿個，搞懂它吧!

# init jbake project
jbake -i
jbake -i <freemarker|groovy|thymeleaf>

# site gen
jbake -b
jbake -b <source> <output>

# start local server
jbake -s
jbake -s <directory>

# site gen & start local server
jbake -b -s

官方文件不長而且很完整，建議看過一遍。

jbake.properties 設定檔說明

其中比較需要特別說明的是 db.store=local，設成這值代表每次 jbake 只會針對異動(新增或修改)的文章進行 site gen，不會全部的文章都進行 site gen，這是一個很有用的功能!

# defines the host URL for the site
site.host={my_blog_site_url}

# render index file?
render.index=true
# render archive file?
render.archive=true
# render feed file?
render.feed=true
# render tag files?
render.tags=true
# render sitemap.xml file?
render.sitemap=true

# filename of index template file
template.index.file=index.thyme
# filename of archive template file
template.archive.file=archive.thyme
# filename of tag template file
template.tag.file=tags.thyme
# filename of sitemap template file
template.sitemap.file=sitemap.thyme
# filename of post template file
template.post.file=post.thyme
# filename of page template file
template.page.file=page.thyme
# filename of feed template file
template.feed.file=feed.thyme

# default date format used in content files
date.format=yyyy-MM-dd

# database store (local, memory)
# This option defines whether the content store built while parsing your content files is persisted to disk or not.When it is persisted to disk the next time you perform a bake only those content files that have changed will be rendered speeding up the process. When it is not persisted to disk, i.e. kept in memory, a full bake of all content is performed every time.
db.store=local

撰寫 markdown 文件的注意事項

文章如果出現 包了太多層的條列式項目 可能會導致 site gen 後的 html 出現排版亂掉的問題，撰寫文章時要迴避這問題。

markdown 文件如何插入圖片?

只是單純的文章插入圖片可以直接用 markdown 語法

![imageName](imageFileUrl)

如果要有 點擊縮圖時開啟原始大圖 效果，必需用 html 語法

<a href="/img/{myImage.jpg}" target="_blank">
    <img src="/img/{myImage.jpg}" width="{width}" />
</a>

markdown 文件如何插入程式碼?

可以用 markdown 或 html 語法，個人推薦用 markdown 語法

# markdown 格式
<!--?prettify linenums=true?-->
```java
public class CloudTu {
  public static void main(String[] args) {
    System.out.print("hello world!");
  }
}
```

# html 格式
<pre class="prettyprint linenums">
public class CloudTu {
  public static void main(String[] args) {
    System.out.print("hello world!");
  }
}
</pre>

site gen 結果像下面這樣，程式碼帶有行號而且是 pretty print 風格

public class CloudTu {
  public static void main(String[] args) {
    System.out.print("hello world!");
  }
}

如果不想帶行號的話則是把 linenums 拿掉

# markdown 格式
<!--?prettify?-->
my code...etc

# html 格式
<pre class="prettyprint">
    my code...etc
<pre>

新 blog 要放在哪?

任何可以放 static site 的雲端空間都可以當存放站台，我自己的選擇是放在 github。原因的話有二個

static site 放 github 正潮不用錢
github 的網路頻寬夠大，連過去速度夠快

在 github 上建立 static site 的方法很簡單，分成二種方式

第一種是在 github 上建立 {myAccount}.github.io 的 repository，接著把 static site 推上去，然後連到 http://{myAccount}.github.io 就可以看到建立的站台
第二種則是在 github 現有的 {myProject} repository 建立 gh-pages branch，接著把 static site 推上去，然後連到 http://{myAccount}.github.io/{myProject} 就可以看到建立的站台

舊資料要怎麼搬過去?

搬舊資料沒啥現成工具可用，只好自己寫工具。我利用 jsoup, rome lib 寫了 blogger-to-jbake
這個專門從 blogger 搬家到 jbake 的搬遷工具。它可以把放在 blogger 裡的個人文章、圖片全部匯出至本地端，並且轉成 jbake 可以匯入的檔案格式。

後記

其實 blog 搬家很辛苦，自建 static blog site 就更辛苦了，但是相對的獲益也非常巨大。什麼都自己來代表什麼都掌控在手中，未來如果發生任何狀況都可以自己應付，也不會遇到 vendor 倒了就全部資料人間蒸發的鳥事。記得以前無名小站倒了時網路上哀聲遍野，未來收掉的 blog service 只會更多不會更少，長遠考量下還是自己的 blog 自己蓋比較實際呀~~~