通过

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（将 Ubuntu-20.04 替换为正在使用的 Linux 分发版）。 若要在 Windows 文件资源管理器中打开此目录，请打开 WSL 命令行，使用 cd ~选择主目录，然后输入命令 explorer.exe . 不要安装 NodeJS 或存储将在装载的 C 驱动器上使用的文件（/mnt/c/Users/yourname$）。 这样做会显著降低安装和生成时间。

安装 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 窗口左下角的绿色选项卡中所示）。 这意味着，在使用 VS Code 在 Windows OS 上进行编辑时，它仍在 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 浏览器中生成的新项目。

注释

你会注意到你的终端输出告知你可以“查看浏览器内的 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>。 在 Web 浏览器仍然打开到 http://localhost:8000 的情况下，保存你的更改；请注意，热重载功能会自动在浏览器中编译和更新更改。

    你在 localhost:3000 中运行的 Gatsby.js 应用

你可以通过按 F5 键，或者从菜单栏中选择查看>调试（Ctrl+Shift+D）和 查看>调试控制台（Ctrl+Shift+Y），将 VS Code 的调试器与你的 Gatsby 应用配合使用。 如果在“调试”窗口中选择齿轮图标，将创建启动配置（launch.json）文件，以便保存调试设置详细信息。 若要了解更多信息，请参阅 VS Code 调试工具。

VS Code 调试窗口和 launch.json 配置图标

若要了解有关 Gatsby 的详细信息，请参阅 Gatsby.js 文档。