當一個網站已經架好,我們可以透過前一講提到的 Lighthouse 等工具來量化一個網站的效能,這是其中一個重要的指標。
但在實際上架之前,也有很多可以左右我們挑選部落格框架的重要因素,例如好不好上手、建置一個網站的速度夠不夠快等等。
我們先就比較好量化的「建置效率」聊起。
說到建置效率,就要先談到之前聊過的動態和靜態網站了:僅有靜態網站會在文章有修改的時候進入「建置」這個流程。若是動態網站,我們要衡量的會是文章的資料備存到資料庫後,再被讀出來的效率如何,夠不夠快,通常這可以透過 CWV 和 TTFB 的分析上得到結果。
所以我們僅僅就靜態網站來看看建置時間(Build Time),該怎麼做 Benchmark。首先是固定硬體的環境,用同一台機器跑不同靜態網站的建置指令。
控制變因則是文章的數量,因為當文章數量越多的時候,越能看出一個建置流程當中使用的演算法,時間複雜度是否會越高?會是能夠平緩的成長還是不小心就成指數增長。
一些如評測網站,如 Zach Leatherman 在 2022 的評測就對這些 SSG(靜態網站產生器)框架做出 Benchmark,分別以不同 Markdown Files 的數量建置,觀察花的秒數長短。
Markdown Files: | 250 | 500 | 1000 | 2000 | 4000 |
---|---|---|---|---|---|
Astro 1.0.1 |
2.270 | 3.172 | 5.098 | 9.791 | 22.907 |
Eleventy 1.0.1 |
0.584 | 0.683 | 0.914 | 1.250 | 1.938 |
Gatsby 4.19.0-cli |
14.462 | 15.722 | 17.967 | 22.356 | 29.059 |
Hugo v0.101.0 |
0.071 | 0.110 | 0.171 | 0.352 | 0.684 |
Next.js 12.2.3 |
6.552 | 6.932 | 8.034 | 9.582 | 13.409 |
*表格節錄自 Zach Leatherman 評測的部分內容
*建置時間折線圖
整體來說,建置效率最高的是 Hugo,Eleventy 次之(1000 篇文章 1 秒內完成),Astro 屬於中段班(1000 篇文章約 5 秒完成)、Next 和 Gatsby 則最慢(1000 篇文章都要約 15 秒建置)。
建置效率主要會影響的是要能實時渲染新內容、更新頻率很高的網站,但以絕大部分的部落格需求來說,我們更新內容的頻率能達到日更就已經非常厲害了,除非是內容媒體、多人共編的部落格,不然建置時間從 1 秒延長到 30 秒其實沒有實質上的影響。
所以當我們串好 CI/CD,在修改完內容後即時建置,也頂多就是等個幾分鐘就能在部署好的網站看到新內容了,雖然建置速度較慢在開發者的感受上會差一點,但也就是差這麼一點點,無關大局。
除了建置效率外,我們在挑選框架時,也可以考慮上手的門檻高低,畢竟有的時候入門即放棄就是因為太難了,明明只想單純寫個文章,卻得寫一堆程式、自己搞部署流程等等,很容易做到一半就沒有然後了。
那麼,為了能夠盡可能的量化上手門檻的難易度,我們就以下三點來做簡單的評估:
身為一個工程師,介面型態是否有提供圖形化介面其實沒有太大的影響,甚至 CLI 還會給我更親切和操作性強的感覺,但對於非工程師來講,有提供 GUI 的網站應該會是大加分,一下降低了上手的門檻。
通常有提供 GUI 的網站都會是封閉系統,也就是說沒有 Open Source 讓你下載使用,例如 Medium、Vocus、Wix 都是封閉和商業導向的平台,要實際建立部落格只要在 GUI 操作即可;WordPress 雖然是開放式的,但也提供 GUI 方便設定。
再來是建立部落格之前應該了解的先備知識,基本上要自架部落格都會需要使用 Git 來做版本控制,靜態網站的話更常依賴 Git 儲存文章內容;語言方面,使用 Hugo 需要知道 Go 語言和 Go Templates 的樣板語言、Astro 則要會 TypeScript / JavaScript 和自己的 .astro
樣板語言。
如果不會 Git 或選定框架的程式語言,可能上手起來就會有點難度,遇到許多語法和概念都要先學習一番,至於樣板語言則相對簡單。
最後一點是首次發文歷時,算是一個上手難易程度的綜述性評估,越久可以視為門檻越高,但這邊的數字也僅限我個人經驗供大家參考。
商業導向的網站經過註冊、線上編輯器撰寫文章後即可一鍵發文,不含文章的撰寫,快的話 1 小時內就能看到熱騰騰的成果在網站上給大家瀏覽了,這類平台就包含 Medium 和 Vocus,最適合什麼都不多想,只專注文章本身的創作者。
再來是關心設計的族群,但又不想過於工程,則使用 Wix 和 WordPress 大約 2-3 天可以上線一篇文章,整體感覺可以想像是設計一份 Power Points 的投影片。
需要最久時間的則是各種需要自己動手使用的框架了,像是 Hugo、Astro 等等,我覺得包山包海,就算全部都從簡開發,每天專心寫至少也要 2 週以上的時間才能看到第一篇文章被部署完成,接下來的篇幅我們就會聊到這些所謂「包山包海」的細節。
綜合了我們前面討論過的各類型態網站,就來整合一下,根據不同評估指標來比較各大平台。
以下請當作平台間互相比較的相對值來參考即可,實際上我列的每一項因素都沒有所謂的絕對數值,例如網站效能會依據你做的是哪種網站有所不同,花費會和你買的方案、部署的主機有所不同。
好的,來看看下面這張表格:其中網站效能是參閱不同 Benchmark,主要以 Lighthouse 的分數當基準值來填寫的。
平台 | 網站效能 | 建置效率 | 上手門檻 | 花費/月 |
---|---|---|---|---|
Medium | 85 | 即時 | 極低 | 趨近零 |
Vocus | 80 | 即時 | 極低 | 趨近零 |
Wix | 80 | 即時 | 低 | ≥ 17 USD |
WordPress | 75 | 即時 | 中 | ≥ 5 USD |
Ghost | 90 | 即時 | 中 | ≥ 5 USD |
Hugo | 95 | 極快 | 高 | 自架趨近零 |
Hexo | 90 | 中等 | 中高 | 自架趨近零 |
Astro | 95 | 快 | 高 | 自架趨近零 |
小結一下,如果你是初次嘗試寫部落格,可以直接挑選 Medium 或 Vocus 這類封閉的平台,雖然彈性較低,但是非常容易上手,也幾乎不用付費。
如果想要自己搞點花樣,又不想花太多心力,可以選擇花多點錢使用封閉的 Wix;若是覺得太貴,也可以多花點心力使用開源 WordPress 或是 Ghost 自己架,這幾個平台都是有資料庫的框架,因此至少要考量資料庫的月費。
再來更便宜,自架價格趨近於零,並且網站效能也最好的則是 SSG 的框架,如 Hugo、Hexo 和 Astro,大部分的上手門檻也相對高一些。
分析了不同平台的類型之後,你會選擇什麼呢?
我個人會偏向「靜態網站」這類型,主因是用不到資料庫、並且成本最低。
我之前架設過不少網站類型的服務,或多或少都要有資料庫,才能讓會員登入、管理資料、做基本的 CRUD(新增、讀取、更新、刪除)操作。
然而部落格的性質絕大部分都是純粹的讀取操作,我們把寫好的文章放上去之後就會有很長一段時間不會更新,至少沒有即時更新的需求,這導致了專職的資料庫對我的部落格來說,必要性降低了許多。比較會有即時更新的資料需要儲存,大概就剩下記錄文章流量量、留言而已,我們後面會再聊聊這類資料怎麼儲存。
沒有了專職的資料庫,我們的文章就是只轉成 HTML 存下來,再來使需要一個靜態網站伺服器來提供讀者下載這些 HTML 即可,達成的效果就是讀取速度變極快,而最大優點則是省了資料庫的租賃和管理的成本。
可能你會覺得說一個小型資料庫的成本沒多高,一個月最多也就新台幣幾百元而已,但長時間沒有更新部落格的時候,總會讓我覺得放在上面燒錢,就像用了訂閱制的服務,我們只用到幾乎不花錢的功能,所以最終我選擇了靜態網站這個類別。