了不起的gatsby.js_一个现代化开发网站的网站产生系统
前言
Gatsbyjs 是一个现代化开发网站的网站产生系统，拥有完整、丰富且开源的生态圈。它利用 react + GraphQL 产生的多页面应用，让前端工程师，编辑，用户都感到满意。就让我们一步步地探索这个系统吧。
Gatsbyjs 是一个拥有超过 2万 Stars，3500 forks 的 react 网站生成系统。
从技术的角度来说，Gatsbyjs 就是混合了 react, react-router, webpack, babel 还有 GraphQL 的系统，达到数据层和 UI 层彻底分离，打造快速网站，而不失 seo 的现代前端开发模式。Gatsbyjs 提供接口，让你可以轻鬆获取你的远端数据库。无论是传统的 Wordpress, 现代的 Contentful，突发奇想的 github CMS, 还是一个 json 档案，它都可以无痛地接入到这个系统裡面。
举个例子，博客系统现在是使用 Contentful CMS，让我可以从任意地方访问 Contentful 网站进行修改，无需本地改任何代码。透过系统提供的生命週期钩子，你可以在其中将数据加工，处理，拼接，然后生成你所需要的数据源。 然后，你可以使用 react 编写组件化的网站，加上自己的样式，预处理器，例如 Scss，styled-components。
值得一提的是，你可以使用 react 的生命週期，例如，利用 lozad.js 懒加载图片。 它可以生成静态页面，也就是说生成的是完整的网站文件夹，直接上传文件夹到网站空间，例如 Github Pages, Netlify，就可以把网站跑起来了。 它已经广泛应用于一些知名的网站，例如： reactjs.org，Airbnb 旗下的 Engineering & Data Science 网站。
网站进化越来越复杂
在传统的全栈项目，我们需要把所有服务放在同一个平台，比如说 WordPress ，它提供一个一站式的内容管理，展示平台，大大方便了管理内容的人去开发博客，电商平台。然而，现在我们会细分系统架构，避免藕合性高，一个系统崩溃全崩溃的问题。
术业有专攻，不要造轮子
现在，我们会使用不同的服务来达到这件事情，例如我们会使用 algolia 来做搜寻服务， stripe 做付款服务，google analytics 做网站统计服务，travisCI 做自动化测试。
网站角色
以前，工程师需要负责开发前端视图层，维护后端数据库，优化网站性能等的工作，而现在，分工化让这些工序都可以由专门的人去负责，其中包括前端开发者，内容发布者，网站访问者，下面将会详细展开：
前端工程师
作为一个前端工程师角度出发，我们追求速度，用户体验。如何可以提供一个更加快速，更加好的网站给全球各地的用户。
我们会利用一些网站性能调优开发工具，例如：Lighthouse, Puppeteer，来测试，改进网络应用质量。 这些用户可能来自远方，网络信号未必会很好，出现掉线和网络异常是经常有的事。他们对于网站的性能，加载速度就有更加高的需求。我们可能可以用PWA，又或者懒加载的工具，例如 lozad.js 来解决这个问题。
编辑
为了最优化内容，一些公司会出现专门编写文案的编辑，内容管理者。 他们关心如何修改文章，挑选适合的图片，并使用简单容易的编辑器，例如富文本编辑器。 与其等待版本上线后才能看到效果，他们更加希望可以使用富文本编辑器，或者其他的可即时展示的编辑器，然后访问项目的地址。 这个时候，如果他们不满意效果，只需要重新修改文章，然后发布就行。
访问用户
随著智能手机的普及，网站用户也开始使用不同的设备来访问网站。 就以我的博客为例，有四成的用户就是使用手机来访问网站的。
他们关心网站的加载速度，不愿意等待太长时间。 他们也会关心网站是否佔用太多流量，比如说图片加载太多，优化太少的话，他们会觉得流量没了有点伤心。。。 为了满足用户需求，前端工程师每天都在进化，提供更加好的网站。他们会使用更加受到社区认可，维护性好的项目，减少开发时的坑，例如如何使用 react 开发网站，而不失 seo 的优势，又例如如何达到前后端分离，数据层和展示层分离。
架构
Gatsbyjs 打造了一个完整的生命週期，以及可以让开发者接入的插件模式。 如果我需要使用某些工具的话，我只需要在 gatsby-config.js 写入插件名称，然后 npm install 一下就好了。
GatsbyJS 拥有的丰富插件让开发者可以无痛地安装，移除插件，并且享受更加好的版本插件来避免版本过旧的版本特定问题。
插件以 gatsby-plugin- 开头：
| 插件 | 用处 |
|---|---|
| feed | 制作 RSS Feed |
| manifest | 应用程序缓存 |
| netlify | Netlify 网站空间最优化 |
| nprogress | 进度条 |
| offline | 离线应用 |
| react-helmet | 修改 Head 部分 |
| sass | sass 预处理器 |
| sentry | Sentry 错误捕获平台 |
| sitemap | 站点地图 |
| webpack-bundle-analyzer | webpack 版本的打包详细分析器 |
| link | react-router 路由封装 |
React
为了避免大量的 DOM 操作而导致的网页性能问题，我们会使用 React 来操作虚拟 DOM，然后生成一个组件化的网站。 另外，为了避免重複造轮子，我们会使用组件化的开发方式。
Storybook
Storybook 可以提供一个快速入门的网站，展示系统裡面的组件。 由于系统是使用 React，你可以快速地安装 Storybook 插件，例如在你的项目裡面使用 npx 命令：
npx -p @storybook/cli sb init
摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html
webpack
这个在现代化前端工程裡面很常见，这裡简单说一下：它打包不同的 html, js, css 文件，然后把他们压缩，加密，劣化，让我们可以放到 CDN 上面。
Babel
为了兼容不同浏览器支持的 JavaScript 版本，我们可以使用 Babel。例如说将 async/await 向下兼容到 promise。
ESLint
我们可以使用代码风格检测，校正工具例如 ESLint，来统一团队的代码风格，不但可以避免 Git 操作上面的不必要更改，还可以避免犯下低级错误，例如拼写，函数变量创建但未使用。
版本管理
我们会使用 Git 来达到版本管理，开分支，合拼分支，然后跑自动化测试，最后部署。 万一有问题，我们还可以快速的使用二分法排查版本错误，然后通知网站维护者（自己）进行版本回退。 我们可以使用 Webhooks 让编辑改完文章后发送请求到 Netlify 来达到自动测试，部署，发布的流程。
后记
通过 GatsbyJS，我可以享受架构前端项目的乐趣，拥抱开源社区的优势，不断改进我的博客框架。 而通过Netlify，我可以享受到服务器不中断下发布新网站，而且可以提供校对版本给校对者，然后才发布文章。就算是有问题也可以快速后退，DEBUG，然后发布 。
