ReleaseMind HK

不斷進化 更快更佳體驗的新網站設計

上次修改:
封面圖片(不斷進化 更快更佳體驗的新網站設計)
圖片來源:Lukas BieriPixabay

自 2016 年尾 ReleaseMind 開站到現在,轉眼已經四個年頭。個人認為是時候要與時並進,翻新一下網站的系統,尤其是在提升網站速度上。

由籌備到完工發佈,因為中間有很多其他的工作在忙,跨越了差不多半年的時間,讓各位讀者久等了。抱歉!

新的版面設計

  • 在每篇文章的標題上方,新增文章所屬「分類」的標示。
  • 導般列上更精煉的分類列表
  • 更直觀的(上一篇及下一篇)分頁按鈕。
  • 讓你更方便跳到相關文章,在文章頁面的 sidebar 上新增「相關內容」列表。

新的響應式設計

  • 參考了 Medium 的頁面設計,在闊螢幕時以更寬的欄位,以及較大的字體顯示,令你更加舒服地閱讀文章內容。
  • 縮小了文章頁面上的標題圖片,讓你可以立即看到文章標題及開首。
  • 減少了手機版的頁面邊距,更有效地在手機螢幕上顯示內容。
  • 動態 sidebar,按螢幕闊度自動調整模塊的排序。
  • 響應式 Facebook 留言。

回顧第一代 ReleaseMind 網站

當年最具代表性的建站平台的話,我想應該是 Blogger、Wix、WordPress,不過過我選了將網站掛在 Tumblr 上。那時候,我還是博客新手,挑選平台的因素首要是免費,其次是要易上手。Blogger雖然免費但功能有限,而 Wix.comWordPress.com 都不是真免費。自己託管 WordPress 的話,主機的價錢比較相宜,可惜在那些年的時候我還未懂得操作伺服器。完全免費、自由度高、正在冒起的 Tumblr,結果就成為了我踏出第一步,去開設部落格網站的最終方案。

然而,互聯網是轉變得多麼快的一個業界。Tumblr 曾經是一家估值達 10 億美元的獨角獸公司,過了僅短短幾年又迅速人氣下滑,恐怕再無後繼之力。其原因大致上包括:面對層出不窮的新興平台之競爭,創辦人離開公司,對於使用者上傳淫褻及不雅內容的監管不善而造成的醜聞,以及掃黃風波引發的用戶「逃難潮」。Tumblr 的估值大幅下降,最終在2019年被其母公司賣盤。可嘆!

跟大隊轉平台,還是不轉好呢?我用了差不多一年的時間觀察。在 Tumblr 被賣盤不久之後,不少人就判了它死刑。但我個人認為在 2020 年,死氣沉沉的新冠疫情的陰埋之下,Tumblr 反倒是有不少改進和新功能的推出。不過,感覺其策略變得偏向於社交媒體平台的定位。舉例說,其新版手機 app 不太支援編輯舊格式內容,特別是長篇文章。在此發展趨勢之下,我認為 Tumblr 將越來越不適合用來架設部落格網站了。另一方面,這幾年來我學會了很多架設網站的技術,知道有更好的系統和平台。我是一個傾向於接觸新東西的人,因此決定不再停泊在 Tumblr,而是採用了新的方程式去架建第二代的 ReleaseMind 網站。

圖片來源:Photo MixPixabay

新一代網站的核心技術

這一次網站翻新採用的是 JAMstack 架構,而不是遷移到 WordPress。為什麼我不選擇後者呢?在 2020年 WordPress 依舊是架設網站的王者,跟據 Tyton Media 的資訊其中市場佔有率高達35%。雖然如此,但是在一開始時我已經排除了 WordPress 這一選項。在這 2 - 3 年間,我已經架了好幾個 WordPress 網站,它在編輯內容和設計版面上雖頗方便,特別是現時的 WordPress 5.5 版本,但是在系統維護方面可以說是挺麻煩,不時要檢查插件的安全性問題,另外速度慢等老毛病,令我對 WordPress 感到厭倦。

jamstack logo

比起 WordPress,我認為更適合以 JAMstack 架構來架設靜態網站,譬如部落格。JAMstack 是指 JavaScript、API、Markdown 的堆疊架構,通常會利用靜態網站產生器 (Static Site Generator) 將網站的設計及內容輸出成一堆 HTML 文件,最後上載到 Dropbox、GitHub、Netlify、Google Cloud Storage 等雲端空間或簡易網頁伺服端就可以輕易發佈。有點像 10 多年前,用 Dreamweaver 結合文字內容到 Template,再將網頁文件用 FTP 上載到 Yahoo 的 GeoCities。因為 JAMstack 架構再沒有容易被駭的 PHP 代碼,並且透過善用雲端服務,所以網站的保安和頻寬都有了保障。那麼,它就不需要像自託管 WordPress 網站一般要在伺服器管理方面費神,讓我能夠把精力和時間集中在創作部落格內容上。

另外,JAMstack 網站的系統結構簡單得多了,更容易橫向擴展 (horizontal scaling),能夠有效地透過全球的 CDN 網點,將網頁文件快取並高速配送至世界各地的用戶端。GitHub、Netlify、Google Cloud Storage 等皆已提供免費的 CDN 服務。假如採用 WordPress 的話,系統受限於主機的位置,以架設一個區域性的網店為例還是十分有競爭力的。若是要拓展成為全球網站,需要花費在升級 WordPress 主機、網絡及附加服務的成本不低。雖然本站的讀者主要來自香港和台灣,但是華人遍佈全球,亦不乏美加、澳洲人士的訪問。毫無疑問,JAMstack 在這一方面比 WordPress 優勝。

在移植本站時,我還是沿用了很多在 Tumblr 上使用的模組和元件,還有很多需要日後一步步修善的地方。不知道你覺得新的設計如何,有哪些部份可以改良呢?希望你能夠在下方的留言板,寫下你的意見或建議。謝謝!

相關連結:

  1. 從 Yahoo 到 Verizon,昔日獨角獸 Tumblr 因無法賺錢傳將變賣 | TechOrange
  2. WordPress終結者:進擊的JAMStack - 知乎

你可能也會想知道

  1. Glitch: 免費網上Node.js雲端及網上程式開發平台
  2. 推介超廉網站主機Hostinger ─ BLACK FRIDAY特價每月0.80美元
  3. 免費開設商用電郵教學(圖文+影片) ─ 創建ZOHO MAIL系統入門(附GoDaddy網域申請流程)
  4. 7個優先Google AMP網頁加速技術來建立網站時會遇到的難題 | by Chris K. Fung | Medium
  5. 如何運用amp-analytics追踪YouTube影片播放事件 | by Chris K. Fung | Medium