Looking for information on Gatsby CLI recipes? Read the press release and see the umbrella issue to learn more about automating your development workflows with
gatsby recipes. Note that they are experimental.
Add pages to your Gatsby site, and use layouts to manage common page elements.
- Project structure
- Creating pages automatically
- Linking between pages
- Creating a layout component
- Creating pages programmatically with createPage
There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.
- Using global CSS files without a Layout component
- Using global styles in a layout component
- Using Styled Components
- Using CSS Modules
- Using Sass/SCSS
- Adding a Local Font
- Using Emotion
- Using Google Fonts
- Using Font Awesome
Plugins are Node.js packages that implement Gatsby APIs that are maintained officially, or by the community.
Starters are boilerplate Gatsby sites maintained officially, or by the community.
A Gatsby theme lets you centralize the look-and-feel of your site. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another.
Pull data from multiple locations, like the filesystem or database, into your Gatsby site.
- Adding data to GraphQL
- Sourcing Markdown data for blog posts and pages with GraphQL
- Sourcing from WordPress
- Sourcing data from Contentful
- Pulling data from an external source and creating pages without GraphQL
- Sourcing content from Drupal
Gatsby lets you access your data across all sources using a single GraphQL interface.
- Querying data with a Page Query
- Querying data with the StaticQuery Component
- Querying data with the useStaticQuery hook
- Limiting with GraphQL
- Sorting with GraphQL
- Filtering with GraphQL
- GraphQL Query Aliases
- GraphQL Query Fragments
- Querying data client-side with fetch
Access images as static resources, or automate the process of optimizing them through powerful plugins.
- Import an image into a component with webpack
- Reference an image from the static folder
- Optimizing and querying local images with gatsby-image
- Optimizing and querying images in post frontmatter with gatsby-image
Showtime. Once you are happy with your site, you are ready to go live with it!