简介
Gatsby 是一个基于 React 的免费、开源框架，用于帮助 开发者构建运行速度极快的 网站 和 应用程序
开始
注意：Gatsby 支持的最低 Node.js 版本是 18.0.0 (可以使用nvm进行版本管理)
- 安装GatsbyCLI
npm install -g gatsby-cli
- 创建站点
gatsby new gatsby-site
- 切换到站点目录
cd gatsby-site
- 启动
gatsby develop
通常默认端口为8000，可以通过运行 gatsby develop -p another_number 来更改端口号
- 构建
gatsby build
- 在本地启动生产版本服务器
gatsby serve
查看指令文档
在终端中运行 gatsby --help 指令 了解更多
目录结构
/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
|-- /api
|-- /pages
|-- /templates
|-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js
- /.cache：自动生成。 该文件夹是由 Gatsby 自动创建的内部缓存。此文件夹中的文件不可修改。.gitignore如果尚未添加，应添加到文件中。
- /plugins： 此文件夹包含所有未作为npm包发布的项目特定（“本地”）插件。查看插件文档以获取更多详细信息。
- /src：
-
- /api： 下面的 JavaScript 和 TypeScript 文件src/api会根据其文件名自动生成带有路径的函数。查看功能指南了解更多详情。
- /pages： 里面的组件src/pages根据其文件名自动成为具有路径的页面
- /templates： 以编程方式创建页面的模板。查看模板文档以获取更多详细信息。
- html.js： 对于 default 的自定义配置.cache/default_html.js。查看自定义 HTML 文档以获取更多详细信息。
- /static： 如果你把一个文件放到static文件夹下，webpack是不会处理的。相反，它将原封不动地复制到公用文件夹中。查看资产文档以获取更多详细信息。
其他文件
- gatsby-browser.js：此文件是 Gatsby 期望找到任何Gatsby 浏览器 API用法（如果有的话）的地方。这些允许自定义/扩展影响浏览器的默认 Gatsby 设置。
- gatsby-config.js：这是 Gatsby 站点的主要配置文件。在这里你可以指定关于你的站点的信息（元数据），比如站点标题和描述，你想包含哪些 Gatsby 插件等等。查看配置文档了解更多细节。
- gatsby-node.js：此文件是 Gatsby 希望找到任何Gatsby 节点 API用法（如果有的话）的地方。这些允许自定义/扩展默认的 Gatsby 设置，影响站点构建过程的各个部分。
- gatsby-ssr.js：此文件是 Gatsby 期望找到任何Gatsby 服务器端渲染 API的用法（如果有的话）的地方。这些允许自定义影响服务器端渲染的默认 Gatsby 设置。
上述文件/文件夹结构反映了 Gatsby 特定的文件和文件夹。由于 Gatsby 站点也是 React 应用程序，因此通常使用标准的 React 代码组织模式，例如文件夹/components和/utils 在/src下。
构建 Gatsby 网站时将使用的一些主要 Web 技术
- HTML：每个 Web 浏览器都能理解的标记语言。 它代表超文本标记语言。 HTML 为你的 Web 内容提供了通用的信息结构，定义了标题，段落等内容。
- CSS：一种样式表示语言，用于设置 Web 内容（字体，颜色，布局等）的样式。 它代表层叠样式表。
- JavaScript：一种编程语言，可帮助我们创建动态和交互式的网页。
- React：用于构建用户界面的代码框架（使用 JavaScript 构建）。这是 Gatsby 用来建立页面和内容结构的框架。
- GraphQL：一种数据查询语言，可助你将数据提取到你的网站中。 这是 Gatsby 用于管理网站数据的接口。
