iT邦幫忙

2025 iThome 鐵人賽

DAY 4
0
Modern Web

手刻部落格,從設計到部署的實戰攻略系列 第 4

挑選部落格的要素(二):建置效率及上手門檻,各大平台要素評比

  • 分享至 

  • xImage
  •  

當一個網站已經架好,我們可以透過前一講提到的 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,在修改完內容後即時建置,也頂多就是等個幾分鐘就能在部署好的網站看到新內容了,雖然建置速度較慢在開發者的感受上會差一點,但也就是差這麼一點點,無關大局。

上手門檻

除了建置效率外,我們在挑選框架時,也可以考慮上手的門檻高低,畢竟有的時候入門即放棄就是因為太難了,明明只想單純寫個文章,卻得寫一堆程式、自己搞部署流程等等,很容易做到一半就沒有然後了。

那麼,為了能夠盡可能的量化上手門檻的難易度,我們就以下三點來做簡單的評估:

  1. 介面型態:提供圖形化介面(GUI)/僅有 CLI 指令
  2. 先備知識:是否需要理解 Git、程式語言(Node.js, Go, …)、前端框架或模板語言(React, EJS, …)
  3. 首次發文歷時:從開始設定部落格,到第一篇文章需要歷時多久

身為一個工程師,介面型態是否有提供圖形化介面其實沒有太大的影響,甚至 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 即可,達成的效果就是讀取速度變極快,而最大優點則是省了資料庫的租賃和管理的成本。

可能你會覺得說一個小型資料庫的成本沒多高,一個月最多也就新台幣幾百元而已,但長時間沒有更新部落格的時候,總會讓我覺得放在上面燒錢,就像用了訂閱制的服務,我們只用到幾乎不花錢的功能,所以最終我選擇了靜態網站這個類別。

參考資料

  1. CSS-Tricks - Comparing Static Site Generator Build Times
  2. Zach Leatherman - Which Generator builds Markdown the fastest?
  3. Astro 4.14, build time reference

上一篇
挑選部落格的要素(一):衡量網站效能,CWV、 Lighthouse 及 TTFB
下一篇
靜態網站(SSG)演化簡史、框架大比拼:Jekyll、Hugo、Astro
系列文
手刻部落格,從設計到部署的實戰攻略8
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言