Gatsby.js_一款基于React.js静态站点生成工具

时间: 2018-01-24阅读: 3467标签: react

Gatsby能快速的使用 React 生态系统来生成静态网站,可以结合React Component、Markdown 和服务端渲染来完成静态网站生成让他更强大。 相对于传统的动态网站框架,静态网站生成器具有许多优势:更好的性能、更高的安全性、更低的伸缩成本以及更加有趣的开发者体验。


Gatsby的理解

什么是Gatsby?

官方介绍为Blazing-fast static site generator for React(用于React的超快静态站点生成器)。

不再为web技术落后而头痛

享受最新Web前端技术的强大功能--React.js,Webpack,现代JavaScript和CSS等等,所有这一切都将启动并等待您的开始。

使用你自定义的数据

Gatsby丰富的数据插件生态系统允许您使用您想要的数据构建网站 - 来自一个或多个来源:使用GraphQL将数据从无头CMS,SaaS服务,API,数据库,文件系统等更直接地导入您的页面。

轻松发布到互联网

Gatsby.js是互联网化的。 你可以不用理会数据库和服务器的复杂部署,以及昂贵,耗时的设置成本,维护和缩放恐惧。 Gatsby.js将您的网站构建为“静态”文件,可以轻松部署在数十种服务上。

使您的网站面向未来

不要用过去十年的技术建立一个网站。 网络的未来是移动的,JavaScript和API - JAMstack。 每个网站是一个Web应用程序,每个Web应用程序是一个网站。 Gatsby.js是你一直在等待的通用JavaScript框架。

静态渐进式Web应用程序

Gatsby.js是一个静态PWA(Progressive Web App)生成器。 您可以将代码和数据分开。 Gatsby只加载关键的HTML,CSS,数据和JavaScript,以便您的网站加载尽可能快。 一旦加载,Gatsby预取其他网页的资源,所以点击网站感觉非常快。

超越竞争

Gatsby.js建立最快的网站。 不需要等待请求时生成页面,而是预先生成页面,并将其提升到全球服务器云端 - 随时随地传送给用户,无论他们身在何处。


Gatsby的使用

安装Gatsby:

需预装node.js(版本4及以上)并使用npm或者yarn用作依赖包管理。然后安装全局的gatsby:

npm install -g gatsby


Gatsby CLI的使用:

1.创建一个新的网站项目,命令行定位到相应的目录:

gatsby new gatsby-site

2.定位到当前目录:

cd gatsby-site

3.启动热更新:

gatsby develop

Gatsby会自动启动热更新后台服务器,地址为: localhost:8000。现在如果修改了  src/pages 目录下的文件,保存后,会马上热更新到浏览器的页面上。

4.生成构建:

gatsby build

Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上,可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉,目录结构类似。 

 5.本地服务器测试:

gatsby serve

此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页


Gatsby地址:

官网:https://www.gatsbyjs.org/
github:https://github.com/gatsbyjs/gatsby


吐血推荐

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

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

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

React setState 这样用,开发直呼内行!

众所周知, React 是通过管理状态来实现对组件的管理,而setState是用于改变状态的最基本的一个方法,虽然基础,但是其实并不容易掌握,本文将结合部分源码对这个方法做一个相对深入的解析。

新手学习 react 迷惑的点

网上各种言论说 React 上手比 Vue 难,可能难就难不能深刻理解 JSX,或者对 ES6 的一些特性理解得不够深刻,导致觉得有些点难以理解,然后说 React 比较难上手,还反人类啥的

10分钟快速了解 React 基础

如果你还不会 React,希望本文可以帮你快速了解 React.js 的基础知识。使用 create-react-app 工具快速创建 React SPA。render 函数中提到了 JSX,简单的看,就是一个可以在 js 中写 html

如何使用React搭建前端?

首先说明node.js、npm、cnpm分别是做什么的?node.js简单的说 Node.js 就是运行在服务端的 JavaScript,安装了node.js默认安装了npm,可以使用npm -v查看是否安装。

React中编写CSS的姿势

在任何环境之下其实没有最佳,最有最适合,那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式,在社区中讨论最多的应该是CSS In JS 和 CSS Modules

react如何通过shouldComponentUpdate来减少重复渲染

在react开发中,经常会遇到组件重复渲染的问题,父组件一个state的变化,就会导致以该组件的所有子组件都重写render,尽管绝大多数子组件的props没有变化

react-redux 的使用

类似于 Vue,React 中组件之间的状态管理 第三方包为:react-redux。react-redux 其实是 Redux的官方React绑定库,它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。

21 项优化 React App 性能的技术

在 React 内部,React 会使用几项巧妙的小技术,来优化计算更新 UI 时,所需要的最少的更新 DOM 的操作。在大多数情况下,即使你没有针对性能进行专项优化,React 依然很快,但是仍有一些方法可以加速 React 应用程序

React使用propTypes进行类型检查

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。随着你的应用的开发,你会使用类型检查的方法来捕获很多bug。对于一些应用,你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查

为什么说React 16是开发者的福音?

就像人们对更新移动应用程序和操作系统感到兴奋一样,开发人员也应该对更新框架感到兴奋。不同框架的新版本具有新特性和开箱即用的技巧。下面是将现有应用程序从 React 15 迁移到 React 16 时应该考虑的一些好特性。

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全