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

David James

Front End Developer at https://chromatix.com.au

@daviddeejjames

Rebuilding my portfolio website with the great GatsbyJS and WordPress

Recreating my WordPress portfolio site using GatsbyJS, React and the WordPress REST API

David James on October 5th 2017
Read more
Docs
Tutorial
Community
Blog