GatsbyJS 教程
写在前面
如果你的 JavaScript基础不好，那么推荐你看
原生JS的基础，会决定你可以走多远的重要因素！
前言
GatsbyJS 是一个现代化开发网站的网站产生系统，拥有完整、丰富且开源的生态圈。它利用 React + GraphQL 产生的多页面应用，让前端工程师，编辑，用户都感到满意。就让我们一步步地探索这个系统吧。
GatsbyJS
从技术的角度来说，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 网站。
网站进化越来越复杂
在传统的全栈项目，我们需要把所有服务放在同一个平台，比如说 WordPress ，它提供一个一站式的内容管理，展示平台，大大方便了管理内容的人去开发博客，电商平台。然而，现在我们会细分系统架构，避免耦合性高，一个系统崩溃全崩溃的问题。
术业有专攻，不要造轮子
现在，我们会使用不同的服务来达到这件事情，例如我们会使用 algolia 来做搜寻服务， stripe 做付款服务，google analytics 做网站统计服务，travisCI 做自动化测试。
网站角色
以前，工程师需要负责开发前端视图层，维护后端数据库，优化网站性能等的工作，而现在，分工化让这些工序都可以由专门的人去负责，其中包括前端开发者，内容发布者，网站访问者，下面将会详细展开：
架构
GatsbyJS 打造了一个完整的生命周期，以及可以让开发者接入的插件模式。
如果我需要使用某些工具的话，我只需要在 gatsby-config.js 写入插件名称，然后 npm install 一下就好了。
GatsbyJS 拥有的丰富插件让开发者可以无痛地安装，移除插件，并且享受更加好的版本插件来避免版本过旧的版本特定问题。
React
为了避免大量的 DOM 操作而导致的网页性能问题，我们会使用 React 来操作虚拟 DOM，然后生成一个组件化的网站。
另外，为了避免重复造轮子，我们会使用组件化的开发方式。
Storybook
Storybook 可以提供一个快速入门的网站，展示系统里面的组件。
由于系统是使用 React，你可以快速地安装 Storybook 插件，例如在你的项目里面使用 npx 命令：npx -p @storybook/cli sb init
Webpack
这个在现代化前端工程里面很常见，这里简单说一下：它打包不同的 html, js, css 文件，然后把他们压缩，加密，劣化，让我们可以放到 CDN 上面。
Babel
为了兼容不同浏览器支持的 JavaScript 版本，我们可以使用 Babel。例如说将 async/await 向下兼容到 promise。如果你想了解关于异步操作，文章。
ESLint
我们可以使用代码风格检测，校正工具例如 ESLint，来统一团队的代码风格，不但可以避免 Git 操作上面的不必要更改，还可以避免犯下低级错误，例如拼写，函数变量创建但未使用。
版本管理
我们会使用 Git 来达到版本管理，开分支，合拼分支，然后跑自动化测试，最后部署。
万一有问题，我们还可以快速的使用二分法排查版本错误，然后通知网站维护者（自己）进行版本回退。
我们可以使用 Webhooks 让编辑改完文章后发送请求到 Netlify 来达到自动测试，部署，发布的流程。
后记
透过 GatsbyJS，我可以享受架构前端项目的乐趣，拥抱开源社区的优势，不断改进我的博客框架。
而透过 Netlify，我可以享受到服务器不中断下发布新网站，而且可以提供校对版本给校对者，然后才发布文章。就算是有问题也可以快速后退，DEBUG，然后发布。
