Gatsby.js + Zeit now.sh 部署心得

https://starrocket.io/ 首頁的 Lighthouse 跑分結果

近期將手上正在處理的網站，改以 Gatsby.js 開發、用 now.sh 部署，覺得非常方便，分享一點心得。

這次改版的網站： https://starrocket.io/

倘若你手上也有頁面數量不多不少，每次要改個小東西就要動到好幾個地方，那麼我認為花點時間改成當代的技術組合，是滿值得的投資。

例如我這次處理大約 7 ~ 9 頁靜態頁面，在改版前，原本的樣板系統只有處理比較大的共用區塊，像是 header、footer，每當要修改些小地方，受限於樣板語言能處理、判斷的邏輯有限，就會綁手綁腳、容易出錯，或是力不從心，每次要改就覺得很麻煩。

原本的網站是用 gulp、webpack 等工具搭配 SCSS、jQuery 以及 browsersync 等開發工具搭建起來的，這是原本買來的現成樣板就提供的組合，這套買來的樣板用了很多不錯的工具，相對於多年前的網頁樣板市場，現在已經算是相當先進成熟了。這次的樣板唯一讓我比較不滿意的只有 Gulp 的版本比較舊，升級的過程花了點時間。

不過，原先樣板的打包流程畢竟跟我們的開發需求、習慣都還有滿大差異再加上，後續可能有滿多功能想逐一加到網站上，因此還是決定一鼓作氣改為 Gatsby.js + Webpack 的組合，希望能借重 React 生態系的各種資源與優勢來讓網站未來的開發、維護變得更有結構也更輕鬆一點。

用了 Gatsby.js 之後就產生了幾個現成的好處：

1. 快！
   光是 Gatsby.js 先天支援 Prefetch 就讓換頁速度明顯有感變快，加上預設漸進式圖片顯示也讓載入體驗變好。
2. 還是快！
   開發過程也快了許多，Gatsby.js 提供的 API 讓程式碼變得結構更清楚、有邏輯，比起原本用 gulp 開發時的效率變得更高了。
3. 善用 React 生態系
   可以用 React component，光是一個 react-helmet 這個小東西就已經受用無窮。
4. 靜態網站最佳化
   Gatsby.js 先天就是為了讓靜態網站在各方面的表現都最佳化而生，例如產生優化的圖片格式像是 .webp 格式或是用 base64 的模糊圖片在 loading 時顯示等。
   網站改完直接跑一次 Lighthouse 就看到像是文章開頭圖片的結果，算是很不錯的分數。
5. 更好維護，結構更清楚
   原本用 jQuery 寫的行為，改用 React 寫，Component 重複使用的時候 scope 也很清楚。原本用 jQuery 的樣板經常會遇到 selector 命名不好或是腦袋不清楚導致的各種問題。（不過現在還是保留了滿多原本樣板的 JS 程式碼，再花時間慢慢轉換）

接著要特別推薦一下，now.sh 真的很好用，只要一個指令

now

網站就推上雲端了，每一個 branch 都有獨立的網址可以在開發階段供測試，要上 production 也只要相同指令，加上一個參數就完成了：

now --prod

Zeit 的全球 CDN edges 裡還有台灣的節點（GCP asia-east1），不僅免費，而且不限流量，實在是無敵。

當然，這次改版過程中也踩了一些雷，主要都是 jQuery 跟 Gatsby 混用的問題，建議要盡量用 React 改寫對於 DOM 的操作以及對事件的判斷，以及善用 Gatsby 本身的 Browser API。