Let's (re)start from here.

·

1 min read

最近的時間大半都花在這上面了。

算算應該是第五次弄部落格系統。算一下扣除上古時期用現成的之外,每個系統平均各寫六篇文章,也都撐不過兩年。前幾個分別用了 Refinery CMS -> jekyll -> middleman -> jekyll。想來架系統的總時數應該超過寫文章的時間 XD

而這次用上了 Gatsby + tailwindcss,除了恢復一下 GraphQL 的手感之外,這次還挑戰了不套別人做的版型,自己把類似上一個部落格的 style 刻出來。想說來分享一下這些技術的感想:

Gatsby

雖然說是個 static site genertor,生成頁面的部份靠 React 來處理,開發時會啟動一個 nodejs server,將網站 meta-data 及檔案內容做成 GraphQL 的 endpoint,因此每個頁面都能簡單的拿到想要的資料。想要多拿欄位或是自訂欄位、變更取值的條件,甚至做 pagination 時,都是靠 GraphQL 段來處理的,因此改起來相當容易,graphiql 開起來就知道有什麼東西可以拿了,不必像 jekyll 那樣一直去翻 plugins 的文件。

Gatsby 本身的文件也蠻完整的,雖然沒有整理的非常好,看起來相對瑣碎一點,不過大部份想要的功能都找得到範例。像是 RSS、syntax hightligh 很快就能裝起來。 Mathjax 也沒有什麼難度,不過因為 mdx (React component in markdown) 的關係,語法有時候會壞掉,再看情況要不要換成 katex 好了。

$\displaystyle \mathcal P \mathcal A \mathcal 1: 1\ \in \mathbb N \\ \mathcal P \mathcal A \mathcal 2: \forall\ n\in\mathbb N\ [\ n'\in \mathbb N\ ] \\ \mathcal P \mathcal A \mathcal 3: \forall\ n\in \mathbb N \ [\ n' \neq 1\ ] \\ \mathcal P \mathcal A \mathcal 4: \forall\ m \in \mathbb N\ \forall\ n \in \mathbb N\;[\ m' = n'\Rightarrow m = n\ ] \\ \mathcal P \mathcal A \mathcal 5: (P(1) \land \forall\ k \in \mathbb N \; [\ P(k) \Rightarrow \ P(k')])\ \Rightarrow \forall\ n \in \mathbb N \; [\ P(n)\ ] $

如果想試試 React + GraphQL 的話,我覺得 Gatsby 是不錯的上手點。

tailwindcss

這個是被龍哥推坑的。認真玩了一下,發現 inline class style 跟 component style JS (React, Vue) 根本是天作之合。寫起來幾乎沒有在考慮樣式互相影響蓋來蓋去,應該要怎麼調整結構隸屬的問題。一般的專案由於打出來的 css 會很大包,需要用到 purgecss 去清掉沒用到的樣式。而在 Gatsby 裡這段它在生成靜態頁面的時候就會幫你處理掉了。

之前看 tailwindcss 教學的時候發現作者用了 Sizzy, 試用起來發現在調 RWD 的時候蠻好用的,不過軟體不太穩定,時不時會反應很慢,有些設定按鈕按下去一定會當機 XD 再觀察一陣子好了。

Migration

由於 jekyll 也是用 markdown,所以寫個 python script 轉一下舊文章的檔案結構,手動清一下語法,花的時間比想像中少很多。

Deploy

由於有人做好了 deploy 到 AWS s3 的 library,懶得重做就先搬到 AWS 了。希望不會多花太多錢 XD


希望這樣會比較有動力寫文章。 XD