首先先 Show Off 一下，用Gatsby 改寫網站後，Google Page Speed Insight 一度見到 98 分的高分。儘管這個分數對於普通用戶來說並沒有什麼感覺，但這代表著 Google 大神的肯定！自己那不知所謂的虛榮心瞬間得到滿足。真的要從內心呼喚：
了不起的 Gatsby！
言歸正傳。
其實我自己的網站，已經很久沒有更新。上一次改版已經是2017年的事，年齡增長，工作重心轉移，生活中也被各種瑣事纏繞，之前用心經營的網絡世界，已經慢慢封塵。2017 版的網站，完全是用 JSP 完成，一直以來運行順暢，沒有任何問題，所以自然沒有動力去改寫。直至近段時間，公司有前端愛好者介紹了 Gatsby 這個聽起來像是護髮用品的「東西」，才花時間去研究了一下，沒想到正因為如此，就陷入了 Gatsby 的泥潭無法自拔，趁著放長假把自己的網站改寫，把原本的伺服器大換血，也算是學到了不少新知識。
Gatsby 是什麼
Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps
對，Gatsby就是一个基于React 的工具，用於生成網站或者應用程式，並且兼具以下優點：
- 生成靜態的網頁： 非常利於SEO；
- 使用現代化的前端技術： React、Webpack、Graphql 等等；
- 支援眾多的數據源：filesystem，API，database，headless CMS 等等；
- PWA(漸進式網頁應用程式): 按需加載需要的數據，達到快速呈現內容；
- 生成的網頁默認已經進行了優化，比如圖片會生成各種不同尺寸的副本，因應不同裝置選擇顯示不同的圖片，慢加载，等等；
- 眾多的 Plugin 支持：很多你能想象到的功能，都有相應的Plugin 幫你解決；
- 維護相對簡單：因為Gatsby主打靜態化，沒有後端程式，而且使用 React 的 Component 模式開發，維護上相較傳統模式的 app 要簡單。
Gatsby 是怎麼工作的
官網的這張圖，應該能夠比較好的解釋。
Gatsby 的工作流程，大約分為幾個大階段：
- 獲取網站必須的數據。這個數據可以是存儲在文件中，比如 Markdown File，可以是來自 CMS，也或者是 API ；
- 利用上一步獲取到的數據填充到事先定義好的模板中，並生成所有的靜態頁面，數據文件等；
- 之後，一個完全可以獨立運作的 App 就誕生了，你可以把 /public 中的文件發佈到任何支持靜態文件 hosting 的地方；
用 Gatsby 建立網站具體的流程
用我的網站為例，我這次主要經歷了幾個步驟：
- 下載 gatsby-starter-blog ；
- 將我所有的網誌文章都轉換成 MD 文件；
- 指定 GraphQL 獲取數據的方式；
- 根據網站的樣式建立 React 的 Component，並在合適的位置填入 GraphQL 獲取到的數據；
- 後續的優化，分頁，Tag，評論，統計，Client side API 等等 （這一部分也是最花時間的）
有興趣嘗試的話，只需下面幾個步驟，你便可以在你的電腦中運行起一個簡單的網誌網站了。
# 安裝 gatsby-cli 工具
npm i -g gatsby-cli
# 根據 gatsby-starter-blog 建立一個新 project
gatsby new gatsby-blog https://github.com/gatsbyjs/gatsby-starter-blog
# 進入新建的 project
cd gatsby-blog
# 啟動開發伺服器，之後就可以透過 http://localhost:8000/ 訪問網誌網站了
gatsby develop
如果想要添加新文章，只需在pages 目錄中添加 .md 的 Markdown 文件，就可以自動生成新的頁面。
當然，上面的例子僅僅是一個開始，諸如分頁，tag，評論等等的功能都沒有實現。這篇文章並不是一個 step by step 的教學，網路上關於 Gatsby 的教學資源非常的豐富，我這裡就不再贅述。
Gatsby 網站的發佈
用 Gatsby 生成網站之後，發佈其實非常容易。你完全不需要購買任何寄存空間，就可以將你的網站發佈到互聯網。
使用 Gatsby Cloud
Gatsby Cloud 是 Gatsby 官方推出的平台， 官方形容為 “The best way to build and maintain Gatsby sites”。免費版提供免費 build 和發佈，但有一定的限制，具體可以參考官網的價格說明。
要使用 Gatsby Cloud 發佈 Gatsby 網站，首先你要有一個 Github 賬戶，因為 Gatsby Cloud 要使用 Github 登入。然後，你需要把你的 Gatsby Project 提交到 Github 中，公開或者私有都可以。然後，你就可以登入 Gatsby Cloud， 然後通過幾個簡單步驟就可以將你的網站發佈在互聯網上。
使用 Netlify
Netlify 則是一個更為出名的全功能 Web 平台，同樣 Netlify 也是提供了免費的靜態網站寄存服務，並且自動集成了CICD， 可以無縫接駁Github、Gitlab裡的Project，需要更新時只要push到 Git 就可以觸發自動更新發佈。免費版每月可以使用300分鐘的 build time 以及 100GB 的網路流量， 具體的價目表可以參考其官網的介紹。
在 Netlify 上發佈，同樣非常簡單，一樣的你要有一個 Github 或者 Gitlab 賬戶，然後，你需要把你的 Gatsby Project 提交到 Github 中，公開或者私有都可以。然後，你就可以登入Netlify ， 然後通過幾個簡單步驟就可以將你的網站發佈在互聯網上。
如今發佈網站竟然如此簡單， 建立網站也早已不再是早些年必須要購買寄存空間的時代。Serverless (即無伺服器運算)當下正大行其道。公司或開發者不用過多考慮伺服器的問題，伺服器資源僅作為一種被簡化的服務而不再以物理硬體的形式出現。
這篇文章寫到這裡應該差不多了，當然在整個網站重構的過程中還遇到了其它很多的問題，我會在之後的文章中再具體分享。
