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

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

前言 

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

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

做网站不赚钱的三大原因

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

网站统计IP PV UV

网站流量统计可以帮助我们分析网站的访问和广告来访等数据,里面包含很多数据的,比如访问使用的系统,浏览器,ip归属地,访问时间,搜索引擎来源,广告效果等。

值得收藏的配色网站

Material Palette是一款提供Material Design配色的线上工具,它的用法很简单,你只要找出想要搭配的两种颜色,它就会显示出两种颜色搭配在一起的效果预览,并提供你较深或较浅的颜色选项

Js防扒站,防止镜像网站

前些天有个朋友做的官网被某不法网站镜像,严重影响到 SEO,当时的解决方法是通过屏蔽目标 IP 来阻止它继续镜像,但这种亡羊补牢的方法并不能解决根本的问题,最多只是阻止了镜像站不会再继续更新

网站建设的流程

网站建设需要学习者有足够的耐心,一栋大楼的建设往往要持续一两年,而学习网站建设则是一生的事业,学无止境,只有掌握好基础知识才能制作出高质量的网站。而建设网站有特定的制作流程,只有严格按照流程步骤,才能设计出让客户满意的网站

我们是怎样将网站加载时间减少 24% 的?

本文针对 SwissDev Jobs 网站的优化实践,介绍我们是如何把网站加载时间减少24% 的。之所以要提升 SwissDevJobs.ch 网站性能,主要是有两方面原因:

网站维护思路,静态化思路

网站性能优化的方面有很多,页面静态化有以下几方面好处,实现逻辑:首先需要我们将一些需要静态化的页面进行分类,哪些经常不变内容的页面都需要静态化,有些页面并不一定非要来静态化,但是为了避免地址暴露过多的信息,受到不法分子的攻击

网站地图制作,网站地图的主要作用

一些做SEO网站优化的朋友经常听到“站点地图”这个词。那么什么是站点地图呢?我们能做什么?我们应该如何制作和查看一个网站的地图?用来方便我们网站的用户和搜索引擎的蜘蛛,更好地阅读我们的网站页面。

向搜索引擎提交网站

目前大多数搜索引擎提供了网站的提交路口,我们可以通过他们提供的入口提交站点,让搜索引擎能够及时抓取网站的数据。你只需要向搜索引擎提交你的站点首页即可,搜索引擎会根据你的站点页面关联的链接找到其他页面。

WEB前端程序员需要的网站整理

前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来。

点击更多...

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