了不起的gatsby.js_一个现代化开发网站的网站产生系统

时间: 2018-11-19阅读: 4792标签: 网站

前言 

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应用程序缓存  
netlifyNetlify 网站空间最优化   
nprogress进度条  
offline离线应用  
react-helmet修改 Head 部分  
sasssass 预处理器  
sentrySentry 错误捕获平台  
sitemap 站点地图  
webpack-bundle-analyzerWebpack 版本的打包详细分析器  
linkreact-router 路由封装


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,然后发布 。

来源:https://calpa.me/2018/11/16/build-a-modern-website-using-gatsbyJS/


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/1372

网站footer沉底效果的三种解决方案

很多网站设计一般是两个部分,content + footer,content里面装的是网站主体内容,footer里面展示网站的注册信息等等,因为网站内容高度不定的原因,会出现下面两种情况:

企业网站制作要以简约为主

一些网页的个性元素可以直观地呈现企业或者品牌是做什么的。比如使用一些与风格相匹配的图标,为简约的网页加添了一些个性,而企业网站制作要以简约的方向为主!

浅谈Web网站架构演变过程

我们以javaweb为例,来搭建一个简单的电商系统,看看这个系统可以如何一步步演变。该系统具备的功能:用户模块:用户注册和管理

如何提高网站的吞吐量?

吞吐量是指对网络、设备、端口、虚电路或其他设施,单位时间内成功地传送数据的数量(以比特、字节、分组等测量)。以上的定义比较宽泛,定义到网站或者接口的吞吐量是这样的

如何写出有吸引力的网站标题?

大多数人认为网站标题的构建非常简单,因为只是一个标题而已,你无法搞砸它,对吗?事实是,标题比大多数人意识到的更具潜力和SEO价值。怎么写好一个标题?为标题提供独特的内容,注意标题长度,将关键词放在标题的第一个位置

网站做宣传的香港云服务器优势分析

网站是企业互联网宣传的平台,一直被很多企业关注。 每个人都在寻找使网站内容布局更具吸引力的方法,但忽略了重要问题。 如果您的站点空间不足,客户往往无法打开该站点。 这样的网站不会引人注目

25 个实用前端网站工具推荐

给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具,包括一些小游戏、教程、社区网站和博客,以及一些资源网站,希望可以帮助到大家!

Chrome无法从该网站添加应用,扩展程序和用户脚本

更新谷歌浏览器之后发现不能通过本地 crx文件安装离线插件了,网上找到的方法有两种 :一个就是通过添加浏览器参数解决 但是这个方法我尝试之后失败了 ,第二个方法就是用工具安装,具体如何太麻烦了就没有用

互联网上有多少个网站?

在短短的十来年中,网站数量已从Internet上的9,200万增加到超过10亿。互联网不再仅仅是寻找信息或休闲娱乐的场所,也不只是一种工作工具,互联网就是金钱,是社会的变革。

在网站建设的时候需要考虑哪些因素?

站制作公司数不胜数,每家公司使用域名、服务器的提供商也是不同,制作网站使用代码语言、模板、自主研发的系统都是各不相同。网站整体的设计要好,这个设计,一是指网站的代码设计,最好采用PHP+MySQL的形式,像目前建站比较流行的Dedecms,Wordpress

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!