本文 Gatsby 版本为 v3。

Gatsby

介绍

Gatsby 是一个基于 React 的静态站点生成器。

Gatsby 通过 React 开发应用，当应用开发完成后，Gatsby 可以把这个 React 应用转化成静态的 HTML 应用。

静态应用的优势

访问速度快
更利于 SEO 搜索引擎的内容抓取
部署简单

工作流程

在 Gatsby 应用的工作流程中主要分为了三个部分：

DATA SOURCES - 数据源
- Gatsby 应用中的数据可以来自 Markdown JSON CMS数据 API 数据等
- 应用中可以同时存在多个数据源
BUILD - 开发与构建
- 当开启开发服务器的时候
  - Gatsby 首先会从外部数据源中获取所有的数据
  - 然后把获取到的数据，统一放到 GraphGL 这个数据层当中
  - 当进行页面开发的时候，需要从这个数据层中获取数据
- 当执行构建命令的时候
  - Gatsby 还是会先从外部数据源中获取数据
  - 然后把所有数据再次放到 GraphGL 数据层当中
  - Gatsby 会把数据层中的数据和页面进行组合生成静态的 HTML 页面
- 当静态的 HTML 页面生成后，就可以进行部署了
DEPLOY - 部署

框架特性

开发体验：基于 React 和 GraphQL，结合了 webpack，babel，react-router 等前端领域中最先进工具。
SEO 友好：采用数据层和 UI 层分离而不失 SEO 的现代前端开发模式。
用户体验：数据预读取，在浏览器空闲的时候预先读取链接对应的页面内容。使静态页面拥有 SPA 应用的用户体验。
数据来源多样化：Headless CMS，markdown，API 等
功能插件化：Gatsby 中提供了丰富且功能强大的各种类型的插件，可以按需安装。

创建 Gatsby 项目

gatsby-cli 要求 nodejs 版本至少是 v12.13.0。

全局安装脚手架工具：

npm install -g gatsby-cli

创建一个自定义站点：

gatsby new [<site-name>]

也可以从 gatsby 提供的模板（官方称为 Starter）克隆：

gatsby new [<site-name> [<starter-url>]]
# gatsby new gatsby-demo https://github.com/gatsbyjs/gatsby-starter-hello-world
# hello-world 只包含一些基本的依赖

启动：

# 切换到站点目录
cd <site-name>
# 启动开发服务器
gatsby develop
# 或 npm start 或 npm run develop 它们实际执行的都是 gatsby develop# 访问：http://localhost:8000

创建页面

基于文件的路由系统创建页面

Gatsby 框架内置基于文件的路由系统，页面组件被放置在 src/pages 文件夹中。

与 Next.js 不同，组件文件中必须引入 React。

// src\pages\list.js
import React from "react"export default function List() {return <div>List Page</div>
}

访问：http://localhost:8000/list

以编程的方式创建页面

基于同一个模板创建多个 HTML 页面，有多少数据就创建多少页面。

比如，商品详情页面，有多少商品就生成多少商品详情展示页面。

具体方式：

在项目根目录下创建 gatsby-node.js 文件
- gatsby-node.js 用于存放 Gatsby Node APIs，用于定制或扩展功能。
- 该文件中写的都是 Node.js 代码，所以要遵循 CommonJS 模块化规范。
文件导出对象中添加 createPages 函数
- 该函数在构建应用时被调用
- 该函数提供对 createPage 操作的访问，该操作是以编程方式创建页面的核心。
在 createPages 内部获取模板绝对路径，获取组件所需数据，最终根据模板和数据，调用 createPage 方法，创建页面路由

首先创建一个模板组件：

// src\templates\person.js
import React from "react"export default function Person(props) {console.log(props)// pageContext 是传递给模板的数据const { pageContext } = propsconst { name, age } = pageContextreturn (<div><span>{name}</span><span>{age}</span></div>)
}

然后创建 gatsby-node.js：

// gatsby-node.js// 创建页面
function createPages({ actions }) {// 获取模板绝对路径const template = require.resolve("./src/templates/person.js")// 获取组件所需数据const persons = [{slug: "zhangsan",name: "张三",age: 20,},{slug: "lisi",name: "李四",age: 30,},]// 根据模板和数据创建页面const { createPage } = actionspersons.forEach(person => {createPage({path: `/person/${person.slug}`, // 页面访问地址component: template, // 模板绝对路径context: person, // 传递给模板的数据})})
}module.exports = { createPages }

因为该方法是在构建应用的时候去执行，所以需要重新启动应用。

保存 gatsby-node.js 文件时浏览器也会弹出提示，帮助开发者重启构建：

The develop process needs to be restarted for the changes to gatsby-node.js to be applied.
Do you want to restarted the develop process now?

点击确定等待 Gatsby restart 后即可访问 http://localhost:8000/person/zhangsan

Link 组件

在 Gatsby 框架中页面跳转通过 Link 组件实现。

// src\pages\index.js
import React from "react"
import { Link } from "gatsby"export default function Home() {return <div><Link to="/person/zhangsan">张三</Link><Link to="/person/lisi">李四</Link></div>
}

Gatsby 学习 - 01 Gatsby 介绍、创建页面相关推荐

Gatsby 学习 - 03 Gatsby 插件
Gatsby 插件 Gatsby 框架内置插件系统,插件是为应用添加功能的最好的方式. 在 Gatsby 中有三种类型的插件: 数据源插件(source):负责从应用外部获取数据,将数据统一放在 Ga ...
Jest 学习01 - Jest 介绍、快速体验、vscode 智能提示、配置、监视模式、Babel 配置
起步测试到底测什么提到测试的时候,即使是最简单的一个代码块可能都让初学者不知所措.最常问的问题的是"我怎么知道要测试什么?".如果你正在写一个 Web 应用,那么依次测试每个页 ...
Koa 学习 01 Koa 介绍和基本使用（路由、静态资源托管、中间件）
Koa 介绍 Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造,致力于成为 web 应用和 API 开发领域中的一个更小.更富有表现力.更健壮的基石. 官网:https://k ...
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
html5学习笔记---01.HTML5介绍,02.HTML5的新特性
2013/6/10 01.HTML5介绍 a.创梦技术qq交流群:CreDream:251572072 -------------------- a.创梦技术qq交流群:CreDream:251572 ...
微信小程序学习2：开发工具快速创建页面（pages）的四个文件(.js，.json，.wxml， .wxss)
微信小程序学习2:开发工具快速创建页面(pages)的四个文件(.js,.json,.wxml, .wxss) [1]首先在pages文件夹下创建一个页面文件夹,比如我打算创建个人中心,我创建一个ho ...
ThinkPhp学习01
原文:ThinkPhp学习01 一.ThinkPHP的介绍 MVC M - Model 模型工作:负责数据的操作 V - View 视图 ...
PHP学习笔记-PHP与Web页面的交互2
转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51761308 本文出自:[顾林海的博客] 前言在<PHP学习笔 ...
非等高cell实战（01）-- 实现微博页面
非等高cell实战(01)-- 实现微博页面学习过UITableView.AutoLayout以及MVC的相关知识,接下来通过一个微博页面实战来整合一下. 首先看一下效果图: 需求分析此页面为非等 ...

Gatsby 学习 - 01 Gatsby 介绍、创建页面