Gatsby初探

本博客是基于Gatsby搭建的，欢迎你也加入Gatsby阵营！

Gatsby 是一个令人难以置信的静态站点生成器，它允许使用React作为渲染引擎引擎来搭建一个静态站点，它真正具有现代web应用程序所期望的所有优点。它通过在构建时通过服务器端渲染将动态的 React 组件呈现为静态 HTML 内容。这意味着您的用户可以获得静态站点的所有好处，比如不使用 JavaScript、搜索引擎友好性、非常快的加载速度等等，也并没有失去现代 web 所期望的活力和交互性。一旦呈现为静态 HTML，客户端站点的 React 和 JavaScript 会接管它并添加动态的内容。 Gatsby 最近发布了v1.0.0，推出了很多新特性。包括(但不限于)使用GraphQL创建内容查询的能力，与各种cms集成——包括 WordPress、Contentful、Drupal 等等。还有基于路由的代码分布使得用户体验更佳。

上述内容摘自用 Gatsby 创建一个博客。所以说完全搞懂Gatsby，你会成为React大神，这也是我的近期职业目标！

下面是我学习Gatsby的入门教程：

• 用 Gatsby 创建一个博客——我是基于这篇教程入门的。
• Gatsby官网——入门之后推荐详细看下官网教程。这有很多优秀示例，本博客是clone的gatsby-starter-blog。
• 用Gatsby和Strapi创建一个静态博客

根据这三个教程，你也可以打造一个自己独具特色的博客。这里我重点记录我的打造过程。

frontmatter

---

layout: post
title: Gatsby初探
path: gatsby_first
comments: true
categories: [other]
tags: [other]
date: 2018-05-06 22:34:26
updated: 2018-05-06 22:34:30

---
复制代码

被包含在横线里的部分是什么？这就是所谓的frontmatter，也是本篇文章的frontmatter，而这部分内容可以供 React 组件使用（例如path，date，title等等）你可以添加其他的数据，因此，你可以自由地进行实验，找到必要的信息，以实现一个理想的博客系统，供你使用。重要的一点是，当我们动态创建页面来指定页面时，path将会被用到识别路由。所以本文的访问路径是http://localhost:8000/gatsby_first，像我我在React模板里加了路径前缀，最终变成是http://localhost:8000/posts/gatsby_first。

GraphQL

GraphQL让本来静态的页面有了变动的数据，让Gatsby感觉有在与服务器交互一样。其原理是在编译期间，GraphQL会通查markdown文件列表，及每个markdown文件的frontmatter，然后把数据交给React，这样React通过props拿到"活的"数据了，可以想象成服务器把所有数据全部返给前端。React组件想拿到什么样的格式，可自己调整GraphQL的查询语句，配合frontmatter就能支撑前端页面随意自定义。

PLUGIN

Gatsby是基于插件形式的，查看插件列表，下面是我使用的插件：

• gatsby-plugin-google-analytics
• gatsby-plugin-no-sourcemaps
• gatsby-plugin-sitemap
• gatsby-plugin-typography

这一点是我很欣赏的，相比Hexo、Jekyll那些通过配置文件去启用插件，Gatsby更能在源头上控制插件的安装和配置，而且也方便大家分享更多更优秀的插件。

Style

Gatsby的作者为大家提供了一套完整的服务，当然包括给大家设计了很多主题，而且支持二次定义，其样式插件叫做gatsby-plugin-typography，它是封装了Gatsby作者的另外一个开源项目Typography.js。

Typography.js是一套现代风格的网站主题基础库，覆盖了大部分样式细节，同时提供二次开发，它的官方主题列表，可以点击右侧工具栏进行定制。当然，也可以根据教程，自己在Gatsby的React组件里使用它的样式套件，节约调试样式兼容的时间，可以花更多精力在写博客文章上。

下面是我自定义的Typography.js样式

import Typography from 'typography'
import themeTg from 'typography-theme-github'

themeTg.overrideThemeStyles = () => ({
  'a.gatsby-resp-image-link': {
    boxShadow: 'none',
  },
})

delete themeTg.googleFonts

const typography = new Typography({ ...themeTg })

// Hot reload typography in development.
if (process.env.NODE_ENV !== 'production') {
  typography.injectStyles()
}

export default typography
复制代码

后记

希望我能完整学习Gatsby！

希望我能贡献出一些Gatsby插件和PR！

希望更多朋友加入Gatsby阵营！