Catalog / Gatsby Cheatsheet
Gatsby Cheatsheet
A comprehensive cheat sheet for Gatsby, covering essential concepts, APIs, and commands to build performant React websites.
Gatsby Basics
Project Setup
Creating a new Gatsby site:
|
Starting the development server:
|
Building for production:
|
Serving the production build:
|
Cleaning the cache:
|
Gatsby CLI help:
|
File Structure
|
|
|
|
|
|
|
Key Concepts
GraphQL |
Gatsby uses GraphQL to query data. The |
Data Layer |
Gatsby’s data layer is built on GraphQL and allows you to source data from various sources like Markdown files, APIs, and databases. |
Plugins |
Plugins extend Gatsby’s functionality, such as adding support for different file types (e.g., Markdown) or connecting to external APIs. |
GraphQL Queries
Querying Data
Using
|
Using page queries (for pages):
|
Common GraphQL Queries
Site Metadata |
|
All Markdown Remark |
|
File Query |
|
Image Sharp |
|
Filtering and Sorting
Filtering |
Use the
|
Sorting |
Use the
|
Gatsby Plugins
Essential Plugins
|
|
|
|
|
|
|
Configuring Plugins
Plugins are configured in
|
Using `gatsby-plugin-image`
StaticImage Component |
|
GatsbyImage Component |
|
Gatsby Advanced
Gatsby Node API
|
|
|
Deploying Gatsby Sites
Gatsby sites can be deployed to various platforms like Netlify, Vercel, GitHub Pages, and AWS Amplify. Netlify and Vercel offer excellent built-in support for Gatsby. |
Deploying to Netlify:
|
Deploying to Vercel:
|
SEO Considerations
Meta Descriptions |
Use |
Structured Data |
Implement structured data markup (Schema.org) to help search engines understand your content. |
Image Optimization |
Use |