Recipes
Craving a happy medium between full-length tutorials and crawling the docs? Here’s a cookbook of guiding recipes on how to build things, Gatsby style.
1. Pages and layouts
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
2. Styling with CSS
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
3. Working with plugins
Plugins are Node.js packages that implement Gatsby APIs that are maintained officially, or by the community.
4. Working with starters
Starters are boilerplate Gatsby sites maintained officially, or by the community.
5. Working with themes
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.
6. Sourcing data
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
7. Querying data
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
8. Working with images
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
9. Transforming data
Transforming data in Gatsby is plugin-driven. Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, and more).
10. Deploying your site
Showtime. Once you are happy with your site, you are ready to go live with it!