什么是盖茨比框架

已发表: 2023-06-19

Gatsby 是开发静态网站的杰出框架。 它是支持 Jamstack Web 开发方法的众多技术之一，这使得网站和应用程序可以独立于 Web 服务器运行。

对于那些不熟悉的人，JAM 是一个首字母缩写词，代表 JavaScript、API 和 Markup。 通俗地说，这是指主要由 HTML 组成并使用 JavaScript 来实现的网站。

Gatsby 允许电子商务开发人员更快地构建站点，毫无问题地启动它们，并减少安全漏洞的数量。 这允许电子商务企业使用他们选择的任何 API 来改善客户的购买体验。

此外，该平台的市场份额迅速增加，在过去两年中，它支持的网站数量几乎翻了一番。 目前有超过 228,000 个网站使用 Gatsby，包括行业巨头 Ubisoft。

什么是盖茨比框架？

Gatsby 是一个免费的开源静态站点生成器，它是在 React 和 GraphQL 的帮助下在 Node.js 之上开发的。 它有超过 2500 个插件，可用于根据 Markdown 文档、MDX（带 JSX 的 Markdown）、图像和各种内容管理系统（包括 WordPress、Drupal 等）等来源生成静态网站。

它是另一个静态站点生成器，如 Hugo、Jekyll 等。

可以使用 Gatsby 创建静态网站，作为渐进式 Web 应用程序，遵守最新的 Web 标准。

盖茨比的重要特征

  1. Gatsby 使用 GraphQL 从任何地方获取数据，比如不同的数据库、WordPress 站点等。
  2. Gatsby 使用 React JS 制作网站模板，使用 CSS 制作网站样式。
  3. Gatsby 也有一个插件架构，通过让插件与 JavaScript 一起工作，使事情更容易使用。

什么是静态网站？

与在请求时呈现网页的传统动态网站相比，静态网站采用服务器端呈现来向 Web 浏览器提供预构建的 HTML、CSS 和 JavaScript 文件。

如果您使用静态站点，则可以将内容存储库与前端界面分开，从而更好地控制内容的呈现方式。 出于财务原因，静态站点对企业很有吸引力，因为静态文件体积小、速度快且服务成本低。

近年来，静态网站变得越来越普遍。 这种增长是由于两个主要因素：改进的开发人员工具（语言和库）和企业之间不断增长的需求，以最大限度地提高网站性能，超越数据库驱动网站的限制。

简历网站、作品集网站、一次性登录页面和指导性博客都是静态网站的示例。 这些网站通常只包含几个页面，不需要定期更新或个性化内容。

什么是静态站点生成器

静态站点生成器是获取原始数据和模板集合并生成功能齐全的静态 HTML 网站的工具。 静态站点生成器的基本功能是自动创建单个 HTML 页面并提前准备这些页面以便为用户提供服务。 这些 HTML 页面是预先构建的，因此它们可以在用户的​​浏览器中快速加载。

最典型的是，静态站点生成器是 JAMstack Web 开发方法的一部分。

使用静态站点的优势

除了自动化工作外，静态站点生成器还提供以下好处：

提高效率

静态网站可以通过使缓存页面永不过期来节省时间和精力。 另外，可以在部署前将这些文件压缩，以提供尽可能轻的负载，并且可以通过 CDN 快速且不费力地完成部署。

灵活性

由于大多数 CMS 都绑定到具有预定义字段的数据库，因此它们限制了您的灵活性。 如果您希望将 Twitter 小部件添加到某些站点，您通常需要插件、简码或定制功能。

如果您使用的是静态站点，则可以将小部件代码直接放到文件中或使用片段。

高度可靠

静态网站需要更少的资源来提供服务。 要处理过多的请求，服务器所要做的就是返回一些平面文件，以便轻松适应波动的流量负载。 虽然 Web 服务器仍然会崩溃或 API 过载，但为此需要更多的并行请求。

更好的安全性

静态站点生成器允许开发人员通过将前端与后端分离来使用无头内容管理系统。 由于潜在的入口较少，静态网站更安全。

版本控制和测试

数据库数据是易变的。 CMS 允许用户随时添加、删除或更改内容。 只需点击几下鼠标，即可删除整个网站。 虽然您可以备份您的数据库，但您仍然可能会丢失一些数据，即使您经常这样做。

大多数时候，静态站点更安全。 可以将内容保存在：

平面文件：这提供了使用 Git 更容易的版本控制。 原始内容已保存，所做的任何编辑都可以立即撤消。

私有数据库：在创建站点之前不需要数据，因此不需要在公共服务器上。

由于站点可以在任何地方生成和预览，甚至可以在用户的​​个人计算机上进行，因此测试也得到了简化。

通过更多的工作，您可以设置部署系统，让您可以远程构建站点并在新内容被推送到存储库、审查和批准时更新实时服务器。

什么是 Jamstack

“JamStack”一词指的是用于构建网站的现代 Web 开发架构，包括 JavaScript、应用程序编程接口 (API) 和标记 (JAM)。 Jamstack 本身不是一种技术或框架，而是一种构建应用程序和网站的替代架构。

Jamstack 站点没有采用典型的内容管理系统 (CMS)，而是将基础设施 (API)、代码 (JavaScript) 和内容 (标记) 分开。 解耦架构将在服务器端和客户端分别管理这些。 使用 Jamstack 构建的网站和应用程序将尽可能多的工作从服务器卸载到用户的设备上。 这样做会大大减少发送到服务器的请求数量，从而减少等待服务器响应所花费的时间。

Netlify 的联合创始人 Mathias Biilmann 提出了 JamStack 这个术语。

盖茨比生态系统

Gatsby 提供了许多创建网站的选项。 人们可以对其进行定制以满足个人需求，并为刚起步的人提供预制选项，使其高度灵活。

Gatsby 提供了三种开发方式：插件、主题和启动器。

插件

Node.js 包毫不费力地整合了 Gatsby 的基本站点功能。 典型的插件包括分析平台、响应式内容和搜索引擎优化增强功能。

主题

对于 Gatsby 站点，Gatsby 主题是一个插件，其中包含一个 gatsby-config.js 文件，该文件提供额外的预配置功能、数据源和 UI 代码。 由于主题本质上是插件，它们可以通过像 npm 或 yarn 这样的注册表来分发和安装，并且它们的版本可以通过网站的 package.json 文件保持最新。

初学者

starter 是一个样板，一个通用的 Gatsby 网站，可以用作进一步开发的基础。 一旦有人改变了启动器，它就不再与其原始来源有任何联系。

官方的 Gatsby 初学者包括一个默认站点、一个博客站点、一个最小的“hello world”站点，以及使用和创建主题的能力。 还有几个社区创建的启动器可供使用。

术语“内容网格”描述了 Gatsby 的三个主要元素之间的联系。 主要元素是

  1. CMS 服务： Contentful、WordPress 和 Shopify 是一些示例。 作为内容开发平台，CMS 服务可以充当数据管理的中央存储库。
  • 开发基础设施： Gatsby 使用现代开发框架 React 和 GraphQL。
  • 部署工具： Gatsby 生成用于部署的静态文件，并将它们与 Netflify、Vercel 或 AWS Amplify 集成。

Gatsby 从内容管理系统或降价文件中预取资源，并将它们放在各自的文件夹中。

有数以千计的插件可用于 Gatsby 生态系统，包括用于社交网络集成、电子商务、分析、图像优化和延迟加载的插件。

让我们更深入地研究 React、GraphQL 和 webpack，这是 Gatsby 的三个主要构建块。

反应

React（又名 React.js/ReactJS）是一个免费的开源前端 JavaScript 库，用于使用 UI 组件创建 UI。 Meta，最初是 Facebook，与个人开发者和公司组成的社区合作管理它。 单页、移动和服务器呈现的应用程序都可以使用 Next.js 等流行框架构建在强大的 React 基础之上。

图形QL

GraphQL 是一种查询语言和服务器端运行时技术，广泛用于应用程序编程接口，以保证客户端接收到所有必要的数据。

Facebook 于 2012 年在构建 Facebook 应用程序时开发了它，目前它还有许多其他用途。

总的来说，GraphQL 旨在通过提供一种查询语言来增强 API 开发能力并将 API 安全问题降至最低，该查询语言为 API 开发人员提供了完全的余地，可以自由发挥并按照他们认为合适的方式塑造 API。

网页包

Webpack 是一个开源、免费的 JavaScript 模块打包器。 虽然它是为 JavaScript 设计的，但如果存在适当的加载程序，它也可以用于修改其他前端资产，包括 HTML、CSS 和图像。 为了创建静态资产，Webpack 使用具有依赖关系的模块。

Webpack 从依赖关系中生成依赖关系图，使 Web 开发人员能够在创建 Web 应用程序时采用模块化方法。

Webpack 的代码拆分功能允许用户根据需要生成代码。

总结一下，盖茨比是这样运作的：

  • Gatsby 使用 GraphQL API 获取数据。
  • 然后 webpack 负责创建 bundle 和拆分代码。
  • 最后，将预渲染的 HTML、CSS 和 React 页面部署到服务器。

您可以使用 GATSBY 构建什么？

决定使用 Gatsby 取决于您打算创建的应用程序类型。 使用 Gatsby，您可以构建：

  • PWA（渐进式网络应用程序）
  • JamStack 网站
  • 静态电子商务网站
  • 无头电子商务网站
  • 超快的数字业务页面

盖茨比案例研究

1.Housecall专业版

Housecall Pro 迎合各种家庭服务行业。

网站速度、可扩展性、搜索引擎优化，以及最重要的是，无需开发人员参与即可发布新页面的能力是他们的首要任务，因此他们转向了 Gatsby，并且没有让他们失望。

  • Gatsby 使搜索引擎可以立即抓取他们的站点成为可能，因为它将所有页面生成为静态 HTML 文件。
  • 从他们在 2018 年 11 月下旬实施 Gatsby 到 2019 年 4 月，该博客的自然流量激增了 973%。
  • 从 2018 年 11 月下旬到 2019 年 4 月，该营销网站出现在各种关键字的谷歌搜索结果首页的频率增长了 56%。

2.发送网格

SendGrid 是一个推动参与和增长的客户交流平台。

他们移民到盖茨比后，

  • SendGrid 知识中心将其页面加载时间减半。
  • 新的 Gatsby 站点最初加载速度提高了 20%，页面之间的转换速度提高了 100%。

3. YouFit 健身房。

YouFit Gyms 是一家全国连锁的健身俱乐部。

自从使用 Gatsby 重新启动他们的网站以来，他们见证了以下内容：

  • 自然流量增加 22%
  • 跳出率立即下降 10%
  • 随着更多人加入免费试用，潜在客户转化率提高了 60%。

4.加拿大汽车贷款

Car Loans Canada 协助将潜在购车者与加拿大各地的汽车贷款和汽车经销商联系起来。

他们如何从 Gatsby 中获益

  • 每个会话的页面浏览量增加
  • 用户在网站上花费的平均时间增长了 100% 以上。

结论

现在您可能对 Gatsby 提供的优势有了完整的了解。 毫无疑问，它是一项尖端技术，为营销人员、商务人士、公司和商店提供了大量令人信服的理由来使用它。

总之，我们可以声明，如果您开始学习它是为了提升您的职业或扩展您的知识，那么 Gatsby 不会让您失望。