关闭

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

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

前言 

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

网站选择虚拟主机还是服务器呢?

相信对于很多人而言,他们在建设网站的时候都会面临一个非常重要的问题,那就是如何去选择网站服务器,对于有一些人而言,他们知道现在我们是可以选择虚拟主机,而且也可以直接去选择购买服务器的

前端工程师必备的几个实用网站

配色类网站;提供了很多的配色方案,我们直接使用就OK了。使用方法也很简单,鼠标移动到对应的颜色上;图标类网站iconfont.cn这是阿里巴巴旗下的图标库网站,直接搜索关键词就可以找到大批的图标。

什么是网站劫持?

百度搜索流量事件是网站劫持的其中一种表现。网站劫持还会导致以下问题:用户输入正常网址跳转到其它地址,导致用户无法正常访问,网站流量受损;通过泛域名解析生成大量子域名共同指向其它地址,跳转到非法网站,造成网站权重降低;

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

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

如何提高网站的吞吐量?

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

做网站不赚钱的三大原因

互联网很火,已经火到无法想象人类没有互联网会如何生活,上个厕所都离不开手机片刻,从而很多草根站长也就诞生了,当然,不仅仅是草根站长,还有很多企业、微商、个人用户都想到了做网站

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

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

怎么选择确定个人博客网站的主题?

除非你的博客完全是为了满足自己的乐趣,否则你肯定希望获得读者。因此,考虑别人可能喜欢的内容非常重要。多年来我一直在关注博客圈,在吸引读者方面,有些方法确实非常有效,下面是一些选择博客主题的实用技巧

那些程序员喜欢经常溜达的网站

如果说非要选一个网站来代表程序员的话,github一定是排在第一位的,这里是开源的世界,这里是代码的世界,这里是一个程序员展现自我的世界。如果你没有听过github,我估计你一定不是程序员,或者你就是一个假的的程序员

SSL证书对企业网站的优势

目前网站使用最多的是HTTP协议,用于从www服务器传输超文本到本地浏览器的传输协议,它可以使浏览器更加高效,使网络传输减少。但它有一个很大的缺点:传输过程中的所有信息和数据都是明文的,在网络中传输极易被截取或篡改,非常不安全

点击更多...

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