共用方式為

在 Windows 上開始使用 Gatsby.js

幫助您安裝 Gatsby.js Web 框架並在 Windows 上快速運行的指南。

Gatsby.js 是基於 React.js的靜態網站生成框架，而不是像 Next.js一樣通過伺服器渲染。 靜態網站產生器會在建置時間產生靜態 HTML。 它不需要伺服器。 Next.js 會在運行時間產生 HTML（每次出現新要求時），要求伺服器執行。 Gatsby 也會決定如何處理您應用程式中的數據（使用 GraphQL），而 Next.js 將決定留給您。

若要深入了解 React 和其他以 React 為基礎的 JavaScript 架構，請參閱 React 概觀頁面。

先決條件

本指南假設您已經完成設定您的 Node.js 開發環境的步驟，包括：

  • 安裝 Windows 10 的最新版本（版本 1903+，組建 18362+）或 Windows 11
  • 安裝適用於Linux的 Windows 子系統 （WSL），包括Linux發行版（例如Ubuntu），並確定它以WSL 2模式執行。 您可以透過開啟 PowerShell 並輸入：wsl -l -v 來檢查。
  • 在 WSL 2上安裝 Node.js：這包括版本管理員、套件管理員、Visual Studio Code 和遠端開發延伸模組。

在使用 NodeJS 應用程式時，建議您使用適用於 Linux 的 Windows 子系統，以提升效能速度、系統呼叫相容性，以及在執行 Linux 伺服器或 Docker 容器時進行模仿。

這很重要

使用 WSL 安裝 Linux 發行版將會建立用來儲存檔案的目錄：\\wsl\Ubuntu-20.04（以您所使用的任何 Linux 發行版取代 Ubuntu-20.04）。 若要在 Windows 檔案總管中開啟此目錄，請開啟 WSL 命令列，使用 cd ~ 選取您的主目錄，然後輸入 explorer.exe .。請勿在掛接的 C 磁碟機 (/mnt/c/Users/yourname$) 上安裝 NodeJS 或儲存您將使用的檔案。 這樣做會大幅降低安裝和建置時間的速度。

安裝 Gatsby.js

若要建立 Gatsby.js 專案：

  1. 開啟您的 WSL 終端機 （即Ubuntu）。

  2. 建立新的項目資料夾： mkdir GatsbyProjects 並輸入該目錄： cd GatsbyProjects

  3. 使用 npm 安裝 Gatsby CLI： npm install -g gatsby-cli。 安裝後，請透過 gatsby --version來檢查版本。

  4. 建立您的 Gatsby.js 專案：gatsby new my-gatsby-app

  5. 安裝套件之後，請將目錄變更為新的應用程式資料夾， cd my-gatsby-app然後使用 code . 在 VS Code 中開啟您的 Gatsby 專案。 這可讓您查看已使用 VS Code 檔案總管為應用程式建立的 Gatsby.js 架構。 請注意，VS Code 會在 WSL-Remote 環境中開啟您的應用程式 (如 VS Code 視窗左下方的綠色索引標籤所示)。 這表示當您在 Windows OS 上使用 VS Code 進行編輯時，它仍在 Linux OS 上執行您的應用程式。

    WSL-Remote 延伸模組

  6. 安裝 Gatsby 之後，您需要知道 3 個命令：

    • gatsby develop 用於執行具有熱重載的開發實例。
    • 建立生產版本 gatsby build。
    • gatsby serve 以生產環境模式啟動您的應用程式。

    在 VS Code 中開啟整合式 WSL 終端機 ([檢視]> [終端機])。 確定終端機路徑指向您的專案目錄 (即 ~/GatsbyProjects/my-gatsby-app$)。 然後使用下列方式嘗試執行新應用程式的開發實例： gatsby develop

  7. 新的 Gatsby 專案完成編譯之後，您的終端就會顯示。You can now view gatsby-starter-default in the browser. http://localhost:8000/ 選取此localhost連結，以檢視網頁瀏覽器中建置的新專案。

備註

您會發現終端機輸出也可讓您知道您可以「檢視瀏覽器內 IDE GraphiQL」，以探索網站的數據和架構：http://localhost:8000/___graphql。GraphQL 會將 API 合併到 Gatsby 內建的自我記載 IDE（GraphiQL）。 除了探索您的網站數據和架構之外，您還可以執行 GraphQL 作業，例如查詢、突變和訂用帳戶。 如需詳細資訊，請參閱 GraphiQL 簡介。

  1. 在 VS Code 編輯器中開啟 src/pages/index.js 檔案。 尋找頁面標題 <h1>Welcome to <b>Gatsby!</b></h1> ，並將變更為 <h1>Hello <b>World!</b></h1>。 從網頁瀏覽器仍然開啟的狀態下，儲存您的變更，並注意到熱重載功能會自動編譯並在瀏覽器中更新您的變更。

    在localhost：3000中執行的 Gatsby.js 應用程式

您可以透過選擇 F5 鍵來使用 VS Code 的偵錯工具搭配您的 Gatsby 應用程式，或者在功能表欄中移至 [檢視] > [偵錯] (Ctrl+Shift+D) 和 [檢視] > [偵錯控制台] (Ctrl+Shift+Y)。 在 [偵錯] 視窗中選取齒輪圖示，即會建立啟動組態 (launch.json) 檔案，以儲存偵測設定的詳細資訊。 若要深入瞭解，請參閱 VS Code 偵錯工具。

VS Code 偵錯視窗與 launch.json 組態圖示

若要深入瞭解 Gatsby，請參閱 Gatsby.js 文件。