GatsbyJS初始

50 阅读3分钟

简介

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 用于管理网站数据的接口。