Gatsby是一个使用React构建应用程序和网站的平台。
它是允许你在一套统称为JAMstack的技术和实践上进行构建的工具之一。
Gatsby是现在前端开发领域的酷儿之一。为什么呢？我认为原因是。
- JAMstack方法在构建Web应用和网站方面的爆发
- 渐进式网络应用程序技术在业界的快速应用，这也是Gatsby的主要特点之一
- 它是在React和GraphQL中构建的，这是两个非常流行的、正在崛起的技术
- 它真的很强大
- 速度快
- 文档很好
- 网络效应（人们使用它，创建网站，制作教程，人们对它有更多的了解，形成一个循环）
- 一切都是JavaScript（不需要学习一种新的模板语言）
- 在开始的时候，它隐藏了复杂性，但允许我们进入每一个步骤来进行定制。
所有这些都是很好的观点，Gatsby绝对值得一看。
它是如何工作的？
使用Gatsby，你的应用程序是使用React组件构建的。
你将在网站中呈现的内容通常是用Markdown编写的，但你可以使用任何类型的数据源，如无头CMS或像Contentful这样的网络服务。
Gatsby构建网站，并将其编译为静态HTML，可以部署在任何你想要的网络服务器上，如Netlify、AWS S3、GitHub Pages、常规的托管提供商、PAAS等。你所需要的只是一个能提供普通HTTP页面和你的资产给客户端的地方。
我在列表中提到了渐进式网络应用程序。Gatsby自动将你的网站生成为PWA，其服务工作者可以加快页面加载和资源缓存的速度。
你可以通过插件增强Gatsby的功能。
安装
你可以通过在你的终端运行这个来安装Gatsby。
npm install -g gatsby-cli
这将安装gatsby CLI工具。
(当新的版本出来时，通过再次调用这个命令来更新它)
你可以通过运行以下命令创建一个新的 "Hello World "网站
gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world
这个命令在mysite 文件夹中创建一个全新的Gatsby站点，使用的是github.com/gatsbyjs/ga… 的启动器 。
启动器是一个样本网站，你可以在此基础上建立。另一个常见的启动器是default ，可在github.com/gatsbyjs/ga…
运行Gatsby网站
在终端完成安装启动器后，你可以通过调用以下命令来运行网站
这将启动一个新的Web服务器，并在localhost的8000端口提供网站服务。
下面是我们的Hello World启动器的运行情况。
检查网站
如果你用你喜欢的代码编辑器（我用VS Code）打开你创建的网站，你会发现有3个文件夹。
.cache, 一个隐藏的文件夹，包含Gatsby的内部结构，你现在不应该改变它。public, 一个隐藏的文件夹，包含了你建立后的网站src包含React组件，本例中只有 组件。indexstatic其中包含静态资源，如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提供的名为Link 的React组件来链接这些页面。
import { Link } from "gatsby"
并在你的组件JSX中使用它。
<Link to="/second/">Second</Link>
添加CSS
你可以使用JavaScript导入的方式导入任何CSS文件。
你可以使用React样式设计。
<p style={{
margin: '0 auto',
padding: '20px'
}}>Hello world</p>
使用插件
Gatsby提供了很多开箱即用的东西，但许多其他功能是由插件提供的。
有3种类型的插件。
- 源插件从一个源获取数据。创建节点，然后由转化器插件进行过滤。
- 转化器插件将源插件提供的数据转化为Gatsby可以使用的东西。
- 功能插件实现某种功能，如添加网站地图支持或更多。
一些常用的插件有。
- gatsby-plugin-react-helmet，允许编辑
head标签内容 - gatsby-plugin-catch-links，使用历史API，防止浏览器在点击链接时重新加载页面，而是使用AJAX加载新内容。
一个Gatsby插件的安装分两步。首先，你使用npm ，然后在gatsby-config.js ，将其添加到Gatsby的配置中。
例如，你可以安装Catch Links插件。
npm install gatsby-plugin-catch-links
在gatsby-config.js （如果你没有，在网站根目录下创建它），将该插件添加到plugins 输出的阵列中。
module.exports = {
plugins: ['gatsby-plugin-catch-links']
}
就这样，该插件现在将完成它的工作。
建立静态网站
一旦你完成了对网站的调整，你想生成生产的静态网站，你将调用
在这一点上，你可以通过启动一个本地Web服务器来检查它是否像你所期望的那样工作。
启动一个本地Web服务器，这将使网站尽可能地接近你在生产中看到的样子。
部署
一旦你使用gatsby build 构建网站，你需要做的就是部署public 文件夹中的结果。
根据你选择的解决方案，你将需要不同的步骤，但通常你会推送到Git仓库，让Git的提交后钩子完成部署工作。
