一、Gatsby 是什么？
可建立一个访问速度极快的静态网站。
- 轻松发布：只需执行
gatsby build命令，所有网站数据都被打包到 public 文件夹中，拷贝此文件夹到 nginx 即可完成网站发布。 - 不中断：网站更新也只是文件覆盖操作，不会因更新而中断服务。
- 速度快：网站所需数据在编译期就获取、压缩、优化完成，无需在打开网页时再花费时间从第三方获取数据，所以网站的访问速度非常快。
- 完善的插件库生态：2500多个插件可免费使用，极大缩短网站开发周期。
使用场景
- 如果你有一堆用 Markdown 编辑的文章，想要发布到网上，又不想浪费时间在编辑排版上，那么用 Gatsby 生成一个博客网站，是一个非常不错的解决方案。
二、Gatsby 简介
1、图解系统结构
- 数据统一：从 不同数据源(下图中 CMS、Private API 等) 获取数据，形成统一的数据结构（ GraphQL Data Layer）
- 数据查询：通过 GraphQL 查询 GraphQL Data Layer 中的数据
- 展示数据：通过React 编写HTML页面，把数据展示出来。当然也可以找一个UI库，让页面更美观。
data-layer-with-nodes2、Gatsby 项目文件结构
- 详情，看这里！
3、官方demo
展示 Gatsby 的各种功能怎么使用。详情，看这里！
4、网站的三种生成方式
- 纯静态网站；
- 延迟生成的静态网站；
- 纯服务端动态生成。
- 详情，看这里！
三、安装 Gatsby 并新建网站
Gatsby 是在 Node.js 的基础上建立，使用 Gatsby 之前必须先安装 Node.js 且版本 ≥ 12.13。使用 Gatsby CLI 工具，三句命令就可以新建一个静态网站。详情步骤，看这里！
四、怎么新增网站页面？
浏览器打开的URL是怎么跟项目中的代码页面 (js文件) 对应起来的？这种 URL 与 代码文件 之间的对应关系就称之为页面路由。那么Gatsby 中怎么新建代码页面？其页面路由又有哪些规则？
1、新建页面及其路由
- 详细步骤，看这里！
2、用 markdown 文档作为数据源来建立网站
- 详细步骤，看这里！
3、用 strapi(CMS) 作为数据源来建立网站
- 详细步骤，看这里！
4、使用 MDX 文件新增页面
- MDX文件是指 在 markdown 文件中直接插入 jsx 代码 的混合文件，怎么用在Gatsby中？详细步骤，看这里！
五、其他重要功能
1、Gatsby 怎么加载显示图片？
- 详细步骤，看这里！
2、怎么跳转到其他页面？
- 详细步骤，看这里！
3、怎么使用 css ？
- 详细步骤，看这里！
4、怎么安装和使用插件？
- 详细步骤，看这里！
5、怎么查询数据层数据？
- 详细步骤，看这里！
6、网站的中文全文搜索功能？
- 详细步骤，看这里！
7、怎么使用自定义字体？
- 详细步骤，看这里！
8、怎样给网站根目录增加前缀？
当只能用 http://www.example.com/blog 这个域名，而不能用 http://www.example.com 来发布网站时，Gatsby 项目中应该怎么设置？详情，看这里！
六、SEO
1、网站流量统计
哪些人访问了网站？访问了那些网站哪些页面？访问者来自于哪个省市区？年龄多大？这些问题，可通过百度统计这个插件完成。详细步骤，看这里！
2、sitemap.xml
为gatsby的静态网站增加sitemap.xml，方便搜索引擎收录、更新。详细步骤，看这里！
3、robots.txt
使用robots.txt 文件，禁止网络爬虫访问某些页面。详细步骤，看这里！
4、head
HTML中head部分的数据对于 SEO 极其重要，用 bolog 模板生成的 Gatsby 项目，已经生成了SEO组件(src/components/seo.js)，直接使用，完成页面title、description等设置。使用了插件 react-helmet。
七、部署
怎么部署发布gatsby项目？
- 第一步：有一个备案过的域名。可以在阿里云上进行域名注册和备案；
- 第二步：需要一个服务器。同样也可以在阿里云上购买一个ESC；
- 第三步：在阿里云后台设置域名解析到第二步的服务器；
- 第四步：在服务器上安装nginx；
- 第五步：在开发机器上编译 gatsby 项目
gatsby clean
gatsby build
# 项目目录下会生成 public 文件夹- 第六步：把第五步中 public 文件夹 下所有内容拷贝至 第四步中的nginx下，并设置好ngingx 配置文件；
- 第七步：可以通过域名访问网站了。
八、参考文档
- 学习gatsby，从这里开始！
