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开发环境

  1. 创建一个新的网站项目,命令行定位到相应的目录,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
  2. 执行 cd helloworld 定位到当前目录
  3. 执行  gatsby develop ,此时Gatsby会自动启动热更新后台服务器,地址为:  localhost:8000 
  4. 自己可以尝试修改  src/pages  目录下的文件,保存后,会马上热更新到浏览器的页面上。
  5. 执行  gatsby build ,此时Gatsby会在 public 目录下构建生产环境用的优化过的静态网站所需的一切静态资源、静态页面与js代码。如果要发布到自己的网站空间上,可以直接把此目录下面所有东西(除.map为后续的文件名的文件)丢过去自己的空间。如果有用过hexo的朋友们应该会比较熟悉,目录结构类似。
  6. 执行  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实战项目

A4纸网的开发 [ 在线demo ] [ 源代码 ]

 

交流与学习

  1. 本文作者:Nelson Kuang,别名:Fast Mover  欢迎大家留言及多多指教
  2. Github地址:https://github.com/hiooyUI/hiooyui.github.io/tree/source
  3. 版权声明:欢迎转载学习 => 请标注信息来源于 http://www.cnblogs.com/fastmover/p/8317339.html
posted @ 2018-01-19 15:50  Fast Mover  阅读(18241)  评论(18编辑  收藏  举报
友情链接: A4纸尺寸 | 卡通头像 | +申请友情链接