共用方式為

在 Windows 上開始使用 Gatsby.js

  • 發行項

協助您在 Windows 上安裝 Gatsby.js Web 架構並開始並執行的指南。

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
  • 安裝 Windows 子系統 Linux 版 (WSL)，包括 Linux 發行版本 (例如 Ubuntu)，並確定它以 WSL 2 模式執行。 可開啟 PowerShell 並輸入下列內容，以此方式進行檢查：wsl -l -v
  • 在 WSL 2 上安裝 Node.js：這包括版本管理員、封裝管理員、Visual Studio Code 和遠端開發延伸模組。

在使用 NodeJS 應用程式時，建議您使用 Windows 子系統 Linux 版，以獲得更好的效能速度、系統呼叫相容性，以及在執行 Linux 伺服器或 Docker 容器時可以仿效。

重要

使用 WSL 安裝 Linux 發行版本將會建立用來儲存檔案的目錄：\\wsl\Ubuntu-20.04 (將 Ubuntu-20.04 取代為您使用的任何 Linux 發行版本)。 若要在 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 作業系統上使用 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 連結，以在 Web 瀏覽器中檢視您建置的新專案。

注意

您會發現終端機的輸出結果也會告知您可以「檢視 GraphiQL，這是瀏覽器內用 IDE，以探索網站的資料和結構描述：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>。 當您的網頁瀏覽器仍然開啟 時， http://localhost:8000請儲存您的變更，並注意到熱重載功能會自動編譯和更新瀏覽器中的變更。

    於 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 文件 (英文)。