学习gatsby，从这里开始！

一、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-nodes

2、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，从这里开始！