Chris Impey is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/chris-impey).

Chris Impey

Emma Hazel is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/emma-hazel).

Emma Hazel

Frank, 居住在香港, 從事 IT 行業，並為這個行業投身了大半生的精力。 沒事喜歡寫寫程式，看看書，玩 Instagram，玩貓。可他並不是一個『宅男』，他很喜歡旅行，遠的去過約旦，近的去過深水埗，每到一個地方，都讓他對這個世界有不同的認識。他也很喜歡寫網誌，認為寫作不僅能夠加深對知識的積累和認知，亦能夠讓人靜下心，坦誠面對自己。

Frank

Thomas Macaulay is a writer based in New York City. He's interested in all things tech, science, and photography related, and likes to yo-yo in his free time.


Follow him [on Twitter](https://twitter.com/thomas-macaulay).

Thomas Macaulay


首先先 Show Off 一下，用Gatsby 改寫網站後，Google Page Speed Insight  一度見到 98 分的高分。儘管這個分數對於普通用戶來說並沒有什麼感覺，但這代表著 Google 大神的肯定！自己那不知所謂的虛榮心瞬間得到滿足。真的要從內心呼喚：

> 了不起的 Gatsby！

![](/image/blog/sw37a.png)

言歸正傳。

其實我自己的網站，已經很久沒有更新。上一次改版已經是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 是怎麼工作的

官網的這張圖，應該能夠比較好的解釋。
![](/image/blog/dnx8a.png)

Gatsby 的工作流程，大約分為幾個大階段：

1. 獲取網站必須的數據。這個數據可以是存儲在文件中，比如 Markdown File，可以是來自 CMS，也或者是 API ；
2. 利用上一步獲取到的數據填充到事先定義好的模板中，並生成所有的靜態頁面，數據文件等；
3. 之後，一個完全可以獨立運作的 App 就誕生了，你可以把 /public 中的文件發佈到任何支持靜態文件 hosting 的地方；

## 用 Gatsby 建立網站具體的流程

用我的網站為例，我這次主要經歷了幾個步驟：

1. 下載  gatsby-starter-blog ；
2. 將我所有的網誌文章都轉換成 MD 文件；
3. 指定 GraphQL 獲取數據的方式；
4. 根據網站的樣式建立 React 的 Component，並在合適的位置填入 GraphQL 獲取到的數據；
5. 後續的優化，分頁，Tag，評論，統計，Client side API 等等 （這一部分也是最花時間的）

有興趣嘗試的話，只需下面幾個步驟，你便可以在你的電腦中運行起一個簡單的[網誌網站](https://gatsbyjs.github.io/gatsby-starter-blog/)了。

```bash
# 安裝 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

![](/image/blog/4ergq.png)

Gatsby Cloud 是 Gatsby 官方推出的平台， 官方形容為 “The best way to build and maintain Gatsby sites”。免費版提供免費 build 和發佈，但有一定的限制，具體可以參考[官網的價格說明](https://www.gatsbyjs.com/pricing)。

要使用 Gatsby Cloud 發佈 Gatsby 網站，首先你要有一個 Github 賬戶，因為 Gatsby Cloud 要使用 Github 登入。然後，你需要把你的 Gatsby Project 提交到 Github 中，公開或者私有都可以。然後，你就可以登入 [Gatsby Cloud](https://www.gatsbyjs.com/)， 然後通過幾個簡單步驟就可以將你的網站發佈在互聯網上。

 
<video width="100%" controls style={{outline: "none"}}>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,q_85,w_742/v1588509617/GatsbyCloud_hmpueg.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,q_85,w_742/v1588509617/GatsbyCloud_hmpueg.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
 

### 使用 Netlify

![](/image/blog/8akfh.png)

[Netlify](https://www.netlify.com/) 則是一個更為出名的全功能 Web 平台，同樣 Netlify 也是提供了免費的靜態網站寄存服務，並且自動集成了CICD， 可以無縫接駁Github、Gitlab裡的Project，需要更新時只要push到 Git 就可以觸發自動更新發佈。免費版每月可以使用300分鐘的 build time 以及 100GB 的網路流量， 具體的價目表可以參考[其官網的介紹](https://www.netlify.com/pricing/#features)。

在 [Netlify](https://www.netlify.com/) 上發佈，同樣非常簡單，一樣的你要有一個 Github 或者 Gitlab 賬戶，然後，你需要把你的 Gatsby Project 提交到 Github 中，公開或者私有都可以。然後，你就可以登入[Netlify](https://www.netlify.com/) ， 然後通過幾個簡單步驟就可以將你的網站發佈在互聯網上。

 
<video width="100%" controls style={{outline: "none"}}>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,w_742/v1588514109/Netlify_qcqzxz.webm" type="video/webm"/>
  <source src="https://res.cloudinary.com/dxuoive6n/video/upload/c_scale,w_742/v1588514109/Netlify_qcqzxz.mp4" type="video/mp4"/>
Your browser does not support the video tag.
</video>
 

如今發佈網站竟然如此簡單， 建立網站也早已不再是早些年必須要購買寄存空間的時代。Serverless (即無伺服器運算)當下正大行其道。公司或開發者不用過多考慮伺服器的問題，伺服器資源僅作為一種被簡化的服務而不再以物理硬體的形式出現。

這篇文章寫到這裡應該差不多了，當然在整個網站重構的過程中還遇到了其它很多的問題，我會在之後的文章中再具體分享。 











最近學習了下 Gatsby ，借這個機會將自己網站徹底用    Gatsby 和 React 重寫，過程中學到不少新東西，也經歷不少 WTF 的時刻，完成後用 Google Page Speed Insight 測試，竟然試過出現 98 分的高分，雖然不是每次都這麼高，但也足以驚艷我這見慣了幾十甚至十幾分的大腦。

用Gatsby 改寫網站，Google Page Speed Insight 驚現98 的高分

免費訂閱網誌文章