盖茨比介绍

Gatsby是一个使用React构建应用和网站的平台

Gatsby是一个使用React构建应用程序和网站的平台。

它是一种工具,可让您建立在一套技术和实践的基础上,这些技术和实践统称为JAMstack

盖茨比目前是Frontend Development领域中最酷的孩子之一。为什么?我认为原因是:

  • JAMstack方法用于构建Web应用程序和网站的爆炸式增长
  • 快速采用渐进式Web应用技术,这是盖茨比(Gatsby)的关键特征之一
  • 它是内置的反应GraphQL,这是两种非常流行且不断上升的技术
  • 它真的很强大
  • 它很快
  • 文档很棒
  • 网络效应(人们使用它,创建站点,制作教程,人们对此有更多了解,创建一个循环)
  • 一切都是JavaScript(无需学习新的模板语言)
  • 一开始它掩盖了复杂性,但允许我们进入每个步骤进行自定义

所有这些都是很重要的一点,盖茨比绝对值得一看。

它是如何工作的?

使用Gatsby,您的应用程序是使用React组件构建的。

您将在网站中呈现的内容通常使用Markdown编写,但是您可以使用任何类型的数据源,例如无头CMS或诸如Contentful之类的Web服务。

Gatsby构建了站点,并将其编译为静态HTML,可以将其部署在所需的任何Web服务器上,例如Netlify,AWS S3,GitHub Pages,常规托管提供商,PAAS等。您所需要的只是一个为普通HTTP页面和您的资产提供给客户端的地方。

我在列表中提到了渐进式Web应用程序。 Gatsby通过服务工作者自动将您的站点生成为PWA,以加快页面加载和资源缓存。

您可以通过插件增强Gatsby的功能。

安装

您可以通过在自己的计算机上运行终端

npm install -g gatsby-cli

这将安装gatsbyCLI实用程序。

(当有新版本发布时,请再次调用此命令来更新它)

您可以通过运行来创建一个新的“ Hello World”站点

gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

此命令在以下位置创建了一个全新的Gatsby网站:mysite文件夹,使用起动机可在https://github.com/gatsbyjs/gatsby-starter-hello-world

一种起动机是可以构建的示例站点。另一个常见的启动器是default,位于https://github.com/gatsbyjs/gatsby-starter-default

在这里,您可以找到所有可以使用的启动器的列表

运行盖茨比网站

终端安装完启动器后,您可以通过以下方式运行网站

cd mysite
gatsby develop

它将启动一个新的Web服务器,并在localhost的8000端口上为该站点提供服务。

这是我们的Hello World入门实例:

检查现场

如果您打开使用自己喜欢的代码编辑器创建的网站(我使用VS代码),您会发现有3个文件夹:

  • .cache,一个包含Gatsby内部构件的隐藏文件夹,您现在无需更改任何内容
  • public,其中包含构建后的结果网站
  • src包含React组件,在这种情况下,index成分
  • static它将包含静态资源,例如CSS和图像

现在,只需简单地打开默认页面即可轻松进行更改src/pages/index.js并更改“ Hello world!”去别的东西,然后保存。浏览器应立即热装组件(这意味着页面实际上并没有刷新,但是内容发生了变化-底层技术可以实现这一技巧)。

要添加第二页,只需在此文件夹中创建另一个.js文件,其内容与index.js(调整内容)并保存。

例如我创建了一个second.js包含以下内容的文件:

import React from 'react'

export default () => <div>Second page!</div>

然后我打开浏览器http:// localhost:8000 / second

链接页面

您可以通过导入Gatsby提供的React组件(称为)来链接这些页面Link

import { Link } from "gatsby"

并在你的组件中使用它JSX

<Link to="/second/">Second</Link>

添加CSS

您可以使用JavaScript导入来导入任何CSS文件:

import './index.css'

您可以使用React样式:

<p style={{
    margin: '0 auto',
    padding: '20px'
  }}>Hello world</p>

使用插件

Gatsby提供了许多开箱即用的功能,但是许多其他功能是由外挂程式

共有3种插件:

  • 源插件从源获取数据。创建可以由转换器插件过滤的节点
  • 变压器插件将源插件提供的数据转换为Gatsby可以使用的数据
  • 功能性插件实现某种功能,例如添加站点地图支持或更多

一些常用的插件有:

Gatsby插件的安装分为2个步骤。首先您使用安装npm,然后将其添加到的Gatsby配置中gatsby-config.js

例如,您可以安装Catch Links插件:

npm install gatsby-plugin-catch-links

gatsby-config.js(如果没有,请在网站根文件夹中创建),将插件添加到plugins导出的数组:

module.exports = {
  plugins: ['gatsby-plugin-catch-links']
}

就是这样,插件现在可以完成其工作。

建立静态网站

调整完站点并要生成生产静态站点后,您将调用

gatsby build

此时,您可以通过使用以下命令启动本地Web服务器来检查所有功能是否都按预期工作

gatsby serve

这将使该网站尽可能接近您在生产中的显示方式。

部署方式

一旦您使用建立网站gatsby build,您所需要做的就是部署包含在public文件夹。

根据您选择的解决方案,这里将需要不同的步骤,但是通常您将推送到Git存储库,并让Git提交后挂钩完成部署工作。

这是一些受欢迎的托管平台的出色指南

免费下载我的反应手册


更多反应教程: