靜態網站開發升級術｜用 Gatsby 快速建構形象網站

手把手做出業界常見形象網站

# Gatsby 新手也能無痛入門

Gatsby 是什麼？適合開發哪一種網站呢？

# 靜態網站就交給 Gatsby 吧！

Gatsby.js 是一個靜態網站的生成工具，主要使用程式語言 JavaScript 的開源專案。它整合了 React、Webpack 以及 GraphQL 這種比較新型態的 API 介面，因為其生成的是純靜態的頁面，方便部署，並提供各種數據接口，能輕易將資料內容以及網頁本體分開，加快加載速度以及渲染速度，以及抓取不同種類的資料，包括 json、markdown、database 等

如果你要開發的網站屬於小型的部落格或者公司官網等，只需要偶爾進行更新，或是內容篇數都是可預期的話，那就適合使用 Gatsby。

Gatsby 6 大優勢，讓你更容易開發網站

•  網頁運行速度快 ：根據 Gatsby 創始人 Kyle Matthews 進行的性能測試，Gatsby 網站平均比同類網站快 2-3 倍，因為服務器所要做的就是返回一個文件，而不是執行數據庫查詢並根據請求構建每個頁面。 Gatsby 處理所有數據獲取並使用這些數據生成靜態 HTML 文件、JavaScript 和 CSS 文件，從而使其運行速度更快。
•  豐富的套件 ：Gatsby 社區已經創建了 2,000 個以上的套件，讓你可以直接套用，節省許多開發時間。
•  支援眾多的數據 ：filesystem，API，database，headless CMS 等等。Source plugins 讓你無需大量配置即可與 SaaS 解決方案和其他第三方工具集成，Gatsby 還提供 API 支持以添加自定義數據。
•  有利於提升 SEO ：此種靜態網站更有利於提升 SEO。
•  用戶體驗佳 ：數據預讀取。在瀏覽器空閒的時候預先讀取鏈接對應的頁面內容。使靜態頁面擁有SPA 應用的用戶體驗。
•  維護相對簡單 ：因為 Gatsby 主打靜態化，沒有後端程式，而且使用 React 的 Component 模式開發，維護上相較傳統模式的 app 要簡單。

同樣都是 React 的框架，Next.js 和 Gatsby 框架有什麼差異呢？

# 特性、使用情境一次搞清楚​

網頁問題一堆，使用者體驗差，該怎麼辦？

😵 狀況1：網站跑半天，開啟速度有夠慢...

Gatsby 具有強大的 PWA 功能，構建速度快、易於訪問。此外，Gatsby 處理所有數據獲取並使用這些數據生成靜態 HTML 文件、JavaScript 和 CSS 文件，因此其運行速度更快。

😵 狀況2：網站開發好費時，有沒有大量好用的套件可以直接使用？

Gatsby 有許多套件，讓你可以直接套用，幫你省去大量的開發時間。

😵 狀況3：網站排名好差，明明已經花大錢買廣告曝光，為什麼 SEO 還是起不來？

Gatsby 在把 JS 檔案轉成 html 檔案的 Build 過程，已經會把你網頁的格式資料帶入，讓你的 html 檔案不再是一個空空如也，來訪的爬蟲機器人當然就更可以拿到分析資料，SEO 當然提升！ 

漸進式課程設計， 一步步開發 SEO 成效好、使用者體驗佳的網頁