什么是Gatsby?

官方介绍为Blazing-fast static site generator for React(用于React的超快静态站点生成器)。

不再为web技术落后而头痛

享受最新Web前端技术的强大功能--React.js，webpack，现代JavaScript和css等等，所有这一切都将启动并等待您的开始。

使用你自定义的数据

Gatsby丰富的数据插件生态系统允许您使用您想要的数据构建网站 - 来自一个或多个来源：使用GraphQL将数据从无头CMS，SaaS服务，api，数据库，文件系统等更直接地导入您的页面。

轻松发布到互联网

Gatsby.js是互联网化的。 你可以不用理会数据库和服务器的复杂部署，以及昂贵，耗时的设置成本，维护和缩放恐惧。 Gatsby.js将您的网站构建为“静态”文件，可以轻松部署在数十种服务上。

使您的网站面向未来

不要用过去十年的技术建立一个网站。 网络的未来是移动的，JavaScript和API - JAMstack。 每个网站是一个Web应用程序，每个Web应用程序是一个网站。 Gatsby.js是你一直在等待的通用JavaScript框架。

静态渐进式Web应用程序

Gatsby.js是一个静态PWA（Progressive Web App）生成器。 您可以将代码和数据分开。 Gatsby只加载关键的html，CSS，数据和JavaScript，以便您的网站加载尽可能快。 一旦加载，Gatsby预取其他网页的资源，所以点击网站感觉非常快。

超越竞争

Gatsby.js建立最快的网站。 不需要等待请求时生成页面，而是预先生成页面，并将其提升到全球服务器云端 - 随时随地传送给用户，无论他们身在何处。

Gatsby的使用

安装Gatsby：

需预装node.js（版本4及以上）并使用npm或者yarn用作依赖包管理。然后安装全局的gatsby：

npm install -g gatsby

Gatsby CLI的使用：

1.创建一个新的网站项目，命令行定位到相应的目录：

gatsby new gatsby-site

2.定位到当前目录：

cd gatsby-site

3.启动热更新：

gatsby develop

Gatsby会自动启动热更新后台服务器，地址为: localhost:8000。现在如果修改了  src/pages 目录下的文件，保存后，会马上热更新到浏览器的页面上。

4.生成构建：

gatsby build

Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上，可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉，目录结构类似。 

 5.本地服务器测试：

gatsby serve

此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页

Gatsby地址：

官网：https://www.gatsbyjs.org/
github：https://github.com/gatsbyjs/gatsby