关闭

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

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

前言 

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

关闭

服务器不稳定对网站有哪些影响?

关键词排名下降,如果网站大部分关键词排名都有一个大幅度的下降,那么恭喜你,你网站被搜索引擎降权了。;收录减少;快照不更新;影响用户体验;友情链接被撤

大型网站的灵魂_性能

性能是什么?性能就是用户的真实体验,功能响应的时间,是否会对用户的体验造成影响,产生明显的等待感。用户访问网站的整个流程:用户输入网站域名,通过DNS解析,找到目标服务器IP

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

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

vuepress搭建静态网站

全局安装;新建一个文件夹 (例如 my-vuepress-test);打开自动生成的package.json文件,默认创建的文件如下;然后在scripts属性中输入一下指令;然后在my-vuepress-test夹中创建docs文件夹,然后在创建README.md文件

网站内容检测——在线原创文章相似度在线检测工具总汇

为了自己网站上文章的质量,我们可以通过一些在线的原创文章相似度在线检测工具,进行检测自己的文章和网上相关文章的相似率!下面就为此整理了一些目网上已有的工具,以供大家参考使用

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

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

做网站不赚钱的三大原因

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

新网站如何加快收录?

对于一个新网站来说,希望短时间内被收录无疑是网站经营者最关注的的问题。那么就让我们了解一下!新网站上传之后,首先在百度搜索上输入你的网站网址,然后主动向百度提交你的网站

网站访问和防火墙

用户访问网站步骤 :浏览器输入域名先到用户的本机 C盘hosts文件(Linux上是/etc/hosts)文件中查看是否有如果有就直接访问对应的ip地址、 如果没有那么由dns服务器加速到顶级域名服务器解析域名对应的ip地址

流行的静态(博客)网站生成工具

最近特别流行使用静态网站搭建博客,本博客就是host在GitHub Pages的静态网站。静态网站非常适合专注于内容的网站,例如,博客

点击更多...

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