Gatsby上手指南 - 让你的静态网站用react来高逼格的写
注意:Gatsby V2版本安装及使用问题请移步《Gastby V2安装过程中常见问题》,此文较旧,主要针对V1版Gatsby而介绍
前言
一直以来都是用之前比较流行的静态网站生成器Hexo加Markdown来更新自己的静态站博客。偶然的机会,遇到了又一静态网站生成神器Gatsby ,直接迷上了,根本停不下来,原来静态网站还可以用react来写,组件化的思想解放了我们对静态网站的想象空间,让我们更新网站的方式直接上了一个档次。
费话不多说,先上一张用Gatsby制作的静态网站的效果图,点我查看在线效果
关于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都可以让您使用您的数据构建闪电般的网站。 从以前遗留的CMS中解放您的网站,并将飞向未来。
Gatsby上手指南
注意:下面代码因为结合了React,javascript使用的是ES6,需预装node.js并会用了npm或者yarn用作依赖包管理,不熟悉的话自行恶补基础
一、命令行安装Gatsby开发环境
npm install --global gatsby-cli
二、使用Gatsby开发环境
- 创建一个新的网站项目,命令行定位到相应的目录,helloworld是自定义的项目名称。
gatsby new helloworld
执行完命令后,目录下会自动创建了helloworld项目文件夹和相应的项目文件,其目录结构如下:- - helloworld
- - node_modules
- - public
- - src
- - layouts
- - index.js // 首页布局
- - index.css
- - pages
- - index.js // 首页主页内容
- - page1.js // 内页1内容
- - page2.js // 内页2内容
- - static // 所有其他静态资源如图片、样式等都可以放此目录
- - .gitignore
- - gatsby-browser.js
- - gatsby-config.js
- - gatsby-node.js
- - gatsby-ssr.js
- - LICENSE
- - package.json
- - README.md
- 执行 cd helloworld 定位到当前目录
- 执行 gatsby develop ,此时Gatsby会自动启动热更新后台服务器,地址为: localhost:8000
- 自己可以尝试修改 src/pages 目录下的文件,保存后,会马上热更新到浏览器的页面上。
- 执行 gatsby build ,此时Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上,可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉,目录结构类似。
- 执行 gatsby serve , 此时Gatsby会启动静态网页服务器供你测试刚才“gatsby build”生成的静态网页。
(注意:上面步骤默认使用了 gatsby-starter-default 来创作网站应用项目,我们还可以选择官方提供的 gatsby-starter-blog 和 gatsby-starter-hello-world 或者社区提供的 gatsby-starter-blog-no-styles、gatsby-material-starter、gatsby-typescript-starter、gatsby-starter-bootstrap和gatsby-blog-starter-kit等等丰富的模版来创建新的网站应用项目。点击查看更多)
Gatsby实战项目
交流与学习
- 本文作者:Nelson Kuang,别名:Fast Mover 欢迎大家留言及多多指教
- Github地址:https://github.com/hiooyUI/hiooyui.github.io/tree/source
- 版权声明:欢迎转载学习 => 请标注信息来源于 http://www.cnblogs.com/fastmover/p/8317339.html