Gatsby

  • 文档
  • 教程
  • 社区
  • 特性
  • 博客

快速开始

  • 开始
  • 使用启动器
  • 部署
  • 了不起的 Gatsby

核心概念

  • 组件构建
  • 生命周期 APIs
  • 插件
  • PRPL 模式
  • 使用 GraphQL 查询

指南

  • 添加 404 页面
  • 添加图像、字体和文件
  • 浏览器支持
  • 缓存
  • 创建和修改页面
  • 创建一个插件源
  • 自定义 webpack 配置
  • 自定义 html.js
  • 调试 HTML 构建
  • 环境变量
  • Gatsby on Windows
  • GitHub Pages
  • 从 v0 迁移到 v1
  • 路径前缀
  • 代理 API 请求
  • 添加 Markdown 页面
  • 添加一个 Markdown 博客文章列表
  • 在博客文章中添加标签和类别
  • 创建动态渲染的导航
  • 将图像放入静态文件夹中

参考

  • Node 接口
  • API 规范
  • 绑定 Action Creators
  • Gatsby 浏览器 APIs
  • Gatsby Node APIs
  • Gatsby SSR APIs

贡献

  • 如何贡献
  • Gatsby 样式指南
  • 设计原则

教程

  • 介绍
  • 第 Ⅰ 部分
    • 检查环境
    • Creating a Gatsby site from scratch
    • 链接两个页面
    • 交互式页面
    • 在网络上部署 Gatsby.js 网站
  • 第 Ⅱ 部分
    • 组件构建
    • 创建 Global 样式
    • Typography.js
    • Gatsby 插件
    • Component CSS
    • CSS 模块
    • Glamor
    • 样式组件
  • 第 Ⅲ 部分
    • 我们的第一个布局组件
  • 第 Ⅳ 部分
    • 回顾本教程的前半部分
    • Gatsby 种的数据
    • Gatsby 的数据层如何使用 GraphQL 将数据拉入组件
    • 我们的第一个 GraphQL 查询
    • 介绍 GraphiQL
    • Source Plugins
    • 使用 GraphQL 查询构建一个页面
    • Transformer Plugins
    • 在 src/pages/index.js 中创建站点的 markdown 文件列表
    • 从数据以编程方式创建页面

介绍

  • 简介
  • 备注

性能

  • Static content
  • CDN
  • AMP support
  • Offline access
  • Prefetch linked pages
  • Page caching
  • No extraneous code fetching
  • Progressive image loading
  • Responsive image loading
  • Inlines critical CSS
  • Font self-hosting

开发者经验

  • Serverless
  • Export as Code
  • Refresh or link to preview
  • Hot reload content
  • Hot reload code
  • Componentization
  • One-way data binding
  • Declarative API data queries (GraphQL)
  • Declarative UI
  • Asset pipelines
  • CSS Extensions (eg Sass)
  • Advanced Javascript syntax

生态系统

  • Component ecosystem
  • Hosted option
  • Theme ecosystem

设计

  • Programmatic Design
  • Design systems
  • Component library

Kyle Mathews

Founder @ GatsbyJS. Likes tech, reading/writing, founding things. Blogs at bricolage.io.

@kylemathews

Making website building fun

I still remember the first non-trivial React component I built in 2014—not long after I started using React seriously. I decided to port to…

Kyle Mathews on October 16th 2017
Read more

Community Roundup #1

It’s been a wild 77 days since Gatsby 1.0.0 was released into the world on July 6th, 2017. By the numbers we’ve seen: 3150 new GitHub stars…

Kyle Mathews on September 21st 2017
Read more

Web Performance 101—also, why is Gatsby so fast?

I gave this talk last weekend at ReactNext in Tel Aviv. I spoke on the basics of measuring and improving web performance and how Gatsby is…

Kyle Mathews on September 13th 2017
Read more

Announcing Gatsby 1.0.0 🎉🎉🎉

Gatsby is your friendly, blazing fast static site generator for React. And after nearly a year of research, prototyping, and testing, Gatsby v1 is ready for action.

Kyle Mathews on July 6th 2017
Read more

Gatsby's first beta release

We shipped today Gatsby's first beta for 1.0! Gatsby is a modern blazing-fast static site generator for React.js…

Kyle Mathews on June 15th 2017
Read more

Gatsbygram Case Study

Gatsbygram is a clone of Instagram built with Gatsby v1. The source code for Gatsbygram lives in the Gatsby monorepo. See the…

Kyle Mathews on March 9th 2017
Read more
Docs
Tutorial
Community
Blog