react 生成图片二维码_Gatsby.js——为React打造的快如闪电的现代化站点生成器

GatsbyJS 是一个现代化开发网站的网站产生系统，拥有完整、丰富且开源的生态圈。它利用React + GraphQL 产生的多页面应用，让前端工程师，编辑，用户都感到满意。今天我就给大家分享一下GatsbyJS吧。

GatsbyJS：打造开箱即用的现代化前端网站

GatsbyJS 是一个拥有超过2万Stars，3500 forks 的React 网站生成系统。

从技术的角度来说，GatsbyJS 就是把 React, react-router, webpack, babel 还有 GraphQL 的混合系统，达到数据层和 UI 层彻底分离，打造快速网站，而不失 SEO 的现代前端开发模式。

GatsbyJS 提供接口，让你可以轻松获取你的远端数据库。无论是传统的 Wordpress, 现代的 Contentful，突发奇想的 github CMS, 还是一个 json 档案，它都可以无痛地接入到这个系统里面。

透过系统提供的生命周期 hooks，你可以在其中将数据加工，处理，拼接，然后生成你所需要的数据源。

然后，你就可以使用 React 编写你喜欢的网站，加上自己的样式，预处理器，例如 SCSS，styled-components。

值得一提的是，你可以使用 React 的生命周期，例如，利用 lozad.js + React 打造一个懒加载图片的网站。

它可以生成静态页面，也就是说你生成的将会是一个完整的网站文件夹，只需要直接上传文件夹就可以把网站跑起来了。

使用系统的网站包括知名的 ReactJS.org 网站，Airbnb 旗下的 Engineering & Data Science 网站。也就是说你生成的将会是一个完整的网站文件夹，只需要直接上传文件夹就可以把网站跑起来了。

有哪些优势

1. 使用更现代化的技术栈：React、Webpack、现代Javascript、Css、Html、Graphql……享受最新web技术的力量。
2. 支持各种数据源： headless CMSs, SaaS services, APIs, databases,your file system……通过Graphql更直接的获取数据。
3. 支持生成静态资源：更利于部署到各种服务或空间，也更利于SEO！
4. 渐进式Web应用(PWA)：分拆代码和数据，只加载关键的HTML、CSS、数据和JavaScript，因此难以置信的快！
5. 丰富的生态系统：时至今日，Gatsby已经拥有很完善的生态，各种插件，你遇到的各种问题也都可以找到解答。
6. 除此之外，Gatsby还有各种好处，比如可以将js放到cdn以加速访问等等，说再多不实操终究没有一个深刻体会，可以在后面使用的时候，自行体会：)

前置知识

Gatsby 主要的应用的技术是 React 和 GraphQL，利用 Gatsby 搭建一个简单的静态站点，是一个很好的学习过程。本文主要讲解如何从零搭建一个简单的个人博客结构的过程，也是自己学习和解决一些 bug 的过程。

通过搭建这个简单的项目，你可以学习到：

• Gatsby 的搭建流程
• GraphQL 的简单运用
• React 的函数式组件
• CSS Module
• CSS in JS
• SEO 优化
• surge 部署
• Netlify CMS

学习并应用它你只需要掌握：

• React：只需要对 React 基础知识有所了解即可，尤其是 JSX 语法
• GraphQL：了解基本查询用法即可

这里推荐一个 B 站GraphQL 入门的学习视频，可以花上一两个小时快速的入门 GraphQL。

https://www.bilibili.com/video/av46200333?from=search&seid=14005920498888334569

参考：gatsbyjs中文网