GatsbyJS 入門(一):打造開箱即用的現代化前端網站

GatsbyJS 是一個現代化開發網站的網站產生系統,擁有完整、豐富且開源的生態圈。它利用 React + GraphQL 產生的多頁面應用,讓前端工程師,編輯,用戶都感到滿意。就讓我們一步步地探索這個系統吧。

GatsbyJS

Imgur
Imgur

GatsbyJS 是一個擁有超過 2 萬 Stars,3500 forks 的 React 網站生成系統。

Imgur
Imgur

從技術的角度來說,GatsbyJS 就是混合了 React, react-router, webpack, babel 還有 GraphQL 的系統,達到數據層和 UI 層徹底分離,打造快速網站,而不失 SEO 的現代前端開發模式。

GatsbyJS 提供接口,讓你可以輕鬆獲取你的遠端數據庫。無論是傳統的 Wordpress, 現代的 Contentful,突發奇想的 github CMS, 還是一個 json 檔案,它都可以無痛地接入到這個系統裡面。

舉個例子,博客系統現在是使用 Contentful CMS,讓我可以從任意地方訪問 Contentful 網站進行修改,無需本地改任何代碼。

透過系統提供的生命週期鉤子,你可以在其中將數據加工,處理,拼接,然後生成你所需要的數據源。

然後,你可以使用 React 編寫組件化的網站,加上自己的樣式,預處理器,例如 SCSS,styled-components。

值得一提的是,你可以使用 React 的生命週期,例如,利用 lozad.js 懶加載圖片

它可以生成靜態頁面,也就是說生成的是完整的網站文件夾,直接上傳文件夾到網站空間,例如 Github Pages, Netlify,就可以把網站跑起來了。

Imgur
Imgur

它已經廣泛應用於一些知名的網站,例如:ReactJS.org,Airbnb 旗下的 Engineering & Data Science 網站。

網站進化越來越複雜

Imgur
Imgur

在傳統的全棧項目,我們需要把所有服務放在同一個平台,比如說 WordPress,它提供一個一站式的內容管理,展示平台,大大方便了管理內容的人去開發博客,電商平台。然而,現在我們會細分系統架構,避免耦合性高,一個系統崩潰全崩潰的問題。

術業有專攻,不要造輪子

現在,我們會使用不同的服務來達到這件事情,例如我們會使用 algolia 來做搜尋服務,stripe 做付款服務,google analytics 做網站統計服務,travisCI 做自動化測試。

網站角色

Imgur
Imgur

以前,工程師需要負責開發前端視圖層,維護後端數據庫,優化網站性能等的工作,而現在,分工化讓這些工序都可以由專門的人去負責,其中包括前端開發者,內容發佈者,網站訪問者,下面將會詳細展開:

前端工程師

作為一個前端工程師角度出發,我們追求速度,用戶體驗。如何可以提供一個更加快速,更加好的網站給全球各地的用戶。

Lighthouse 3.0
Lighthouse 3.0

我們會利用一些網站性能調優開發工具,例如:Lighthouse, Puppeteer,來測試,改進網絡應用質量。

以用戶為中心的績效指標
以用戶為中心的績效指標

這些用戶可能來自遠方,網絡信號未必會很好,出現掉線和網絡異常是經常有的事。他們對於網站的性能,加載速度就有更加高的需求。我們可能可以用 PWA,又或者懶加載的工具,例如 lozad.js 來解決這個問題。

編輯

為了最優化內容,一些公司會出現專門編寫文案的編輯,內容管理者。

Imgur
Imgur

他們關心如何修改文章,挑選適合的圖片,並使用簡單容易的編輯器,例如富文本編輯器。

與其等待版本上線後才能看到效果,他們更加希望可以使用富文本編輯器,或者其他的可即時展示的編輯器,然後訪問項目的地址。

這個時候,如果他們不滿意效果,只需要重新修改文章,然後發佈就行。

訪問用戶

隨著智能手機的普及,網站用戶也開始使用不同的設備來訪問網站。

就以我的博客為例,有四成的用戶就是使用手機來訪問網站的。

Imgur
Imgur

他們關心網站的加載速度,不願意等待太長時間。

他們也會關心網站是否佔用太多流量,比如說圖片加載太多,優化太少的話,他們會覺得流量沒了有點傷心。

為了滿足用戶需求,前端工程師每天都在進化,提供更加好的網站。他們會使用更加受到社區認可,維護性好的項目,減少開發時的坑,例如如何使用 React 開發網站,而不失 SEO 的優勢,又例如如何達到前後端分離,數據層和展示層分離。

架構

GatsbyJS 打造了一個完整的生命週期,以及可以讓開發者接入的插件模式。

如果我需要使用某些工具的話,我只需要在 gatsby-config.js 寫入插件名稱,然後 npm install 一下就好了。

Imgur
Imgur

GatsbyJS 擁有的豐富插件讓開發者可以無痛地安裝,移除插件,並且享受更加好的版本插件來避免版本過舊的版本特定問題。

Imgur
Imgur

插件以 gatsby-plugin- 開頭:

插件用處
feed製作 RSS Feed
manifest應用程序緩存
netlifyNetlify 網站空間最優化
nprogress進度條
offline離線應用
react-helmet修改 Head 部分
sasssass 預處理器
sentrySentry 錯誤捕獲平台
sitemap站點地圖
webpack-bundle-analyzerWebpack 版本的打包詳細分析器
linkreact-router 路由封裝

React

為了避免大量的 DOM 操作而導致的網頁性能問題,我們會使用 React 來操作虛擬 DOM,然後生成一個組件化的網站。

另外,為了避免重複造輪子,我們會使用組件化的開發方式。

Webpack

這個在現代化前端工程裡面很常見,這裡簡單說一下:它打包不同的 html, js, css 文件,然後把他們壓縮,加密,劣化,讓我們可以放到 CDN 上面。

Babel

為了兼容不同瀏覽器支持的 JavaScript 版本,我們可以使用 Babel。例如說將 async/await 向下兼容到 promise。如果你想了解關於異步操作,文章。

ESLint

我們可以使用代碼風格檢測,校正工具例如 ESLint,來統一團隊的代碼風格,不但可以避免 Git 操作上面的不必要更改,還可以避免犯下低級錯誤,例如拼寫,函數變量創建但未使用。

版本管理

我們會使用 Git 來達到版本管理,開分支,合拼分支,然後跑自動化測試,最後部署。

萬一有問題,我們還可以快速的使用二分法排查版本錯誤,然後通知網站維護者(自己)進行版本回退。

我們可以使用 Webhooks 讓編輯改完文章後發送請求到 Netlify 來達到自動測試,部署,發佈的流程。

Imgur
Imgur

後記

Imgur
Imgur

透過 GatsbyJS,我可以享受架構前端項目的樂趣,擁抱開源社區的優勢,不斷改進我的博客框架。

而透過 Netlify,我可以享受到服務器不中斷下發佈新網站,而且可以提供校對版本給校對者,然後才發佈文章。就算是有問題也可以快速後退,DEBUG,然後發佈。

Imgur
Imgur

如果你希望測試一下 GatsbyJS 為你帶來的速度體驗的話,其實你就已經體驗到了,因為,這個博客就是使用 GatsbyJS,以及使用最近完成改版任務的 gatsby-starter-calpa-blog

歡迎透過開箱即用的沙盒環境,試玩 GatsbyJS + Cotentful 的博客系統 (CodeSandbox)

下次,我將會講述如何連接 GatsbyJS 到遠端數據庫,例如 Contentful。

參考鏈接

  1. GatsbyJS 官網
  2. Rise of the Content Mesh: Webcast with Contentful and Gatsby
  3. gatsby-starter-calpa-blog - Github
關於 Calpa

Calpa 擅長使用 TypeScriptReact.jsVue.js 建立 Responsive Website。

他積極參與開源社區,曾在 2019 年的香港開源大會上擔任講者,提供工作經驗和見解。此外,他也在 GitHub 上公開分享個人博客程式碼,已獲得超過 300 顆星星和 60 個分支的支持。

他熱愛學習新技術,並樂意分享經驗。他相信,唯有不斷學習才能跟上快速演變的技術環境。

熱門文章

最新文章

圖片管理中心
管理圖片資源
IP 查詢
快速查詢和定位 IP 地址的地理位置和相關信息
Python 運行器
無需後端、無需登入,只需打開瀏覽器即可運行 Python 代碼(由 Pyodide 提供支持)
封面圖生成器
自動創建適合各種平台的文章封面圖
原作(青山剛昌)產生器
一鍵創建原作(青山剛昌)的封面圖
日本色彩
探索和使用傳統日本色彩
部落格內容洞察儀表板
以視覺化儀表板方式追蹤文章成效、分享熱度與分類分布,協助創作者掌握內容表現。
蒙特卡羅估算 π
使用蒙特卡羅方法演示 π 值的估算過程
LLM
使用 LLM 模型進行聊天
活動圖生成器
一鍵創建活動的封面圖
Wagmi Card
一鍵創建 Wagmi 的封面圖
Facebook Quote
Facebook Quote
Music Macro Language (MML) Studio
用程式語法編寫旋律,用音符構築想像
Blurhash
一鍵創建 Blurhash
文字分類器
使用 MediaPipe TextClassifier 分類文字
前端工程師免費工具資源
前端工程師免費工具資源
後端工程師免費工具資源
後端工程師免費工具資源
全端工程師免費工具資源
全端工程師免費工具資源
Web3 工程師免費工具資源
Web3 工程師免費工具資源
紫微斗數排盤系統|結合 AI 的命盤性格與事業財務分析生成器
紫微斗數排盤工具,輸入生日與時辰,自動生成完整命盤分析提示(Prompt)。結合最專業紫微理論與 AI 助力,助你深入解析性格、事業、財務與人際課題。免費使用,適合命理師及紫微愛好者。
PixAI Prompt 組合器|快速打造可用於 AI 繪圖的語言拼圖
使用 PixAI 卻不會寫 prompt?這個工具幫你一鍵組裝角色、表情、風格語彙,輸出高品質繪圖提示語句(Prompt),可直接貼入 PixAI 使用。適合插畫師、創作者、AI 新手與 VTuber 角色開發者。