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

Fernando Poumian

Full Stack Web Developer - https://www.halfelectronic.com

@fernandopoumian

Why I created my blog with Gatsby and Contentful

I recently deployed my new blog at halfelectronic.com and I thought it would be fitting to talk about how I built it in the first place…

Fernando Poumian on November 9th 2017
Read more
Docs
Tutorial
Community
Blog