Recipes

Craving a happy medium between doing the full tutorial and crawling the full docs? Here’s a quick guiding reference for how to build things, Gatsby style.

Table of Contents

• Using unstructured data
• Gatsby project structure
• Using a starter
• Creating pages
• Linking between pages
• Styling
• Creating layouts
• Deploying
• Querying data
• Sourcing data
• Transforming data

Using unstructured data

You can use the node createPages API to pull unstructured data into Gatsby sites rather than GraphQL and source plugins. This is a great choice for small sites, while GraphQL and source plugins can help save time with more complex sites.

• Learn how to pull unstructured data into Gatsby sites in Using Unstructured Data
• Learn when and how to use GraphQL and source plugins for more complex Gatsby sites in Querying data with GraphQL

Gatsby project structure

Read the Gatsby project structure guide for a tour of the folders and files you may see inside a Gatsby project.

Using a starter

Starters are boilerplate Gatsby sites maintained officially, or by the community.

• Learn how to use the Gatsby CLI tool to use starters in tutorial part one
• Browse the Starter Library
• Check out Gatsby’s official default starter

Creating pages

You can create pages in Gatsby explicitly by defining React components in src/pages/, or programmatically by using the createPages API.

• Walk through creating a page by defining a React component in src/pages in tutorial part one
• Walk through programmatically creating pages in tutorial part seven
• Check out the docs overview on creating and modifying pages

Linking between pages

Routing in Gatsby relies on the <Link /> component, a wrapper around @reach/router’s Link component.

• Walk through using Gatsby’s <Link /> component in tutorial part one
• Learn more about how <Link /> works in the docs

Styling

There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.

• Walk through adding global styles to an example site in tutorial part two

  • More on global styles with standard CSS files
  • More on global styles with CSS-in-JS
  • More on global styles with CSS files and no layout component
• Use the CSS-in-JS library Glamor
• Use the CSS-in-JS library Styled Components
• Use CSS Modules

Creating layouts

To wrap pages with layouts, use normal React components.

• Walk through creating a layout component in tutorial part three
• Gatsby v1 approached layouts differently. If the context is helpful, learn about the differences in v2

Deploying

Showtime.

• Walk through building and deploying an example site in tutorial part one
• Learn how to make sure your site is configured properly to be searchable, shareable, and properly navigable
• Learn about performance optimization
• Read about other deployment related topics

Querying data

In Gatsby, you access data through a query language called GraphQL.

• Walk through an example of how Gatsby’s data layer pulls data into components using GraphQL
• Walk through using Gatsby’s graphql tag for page queries
• Read through a conceptual guide on querying data with GraphQL in Gatsby
• Learn more about the graphql tag — querying data in a Gatsby page
• Learn more about <StaticQuery /> — querying data in (non-page) components

Sourcing data

Data sourcing in Gatsby is plugin-driven; Source plugins fetch data from their source (e.g. the gatsby-source-filesystem plugin fetches data from the file system, the gatsby-source-wordpress plugin fetches data from the WordPress API, etc).

• Walk through an example using the gatsby-source-filesystem plugin in tutorial part five
• Search available source plugins in the Gatsby library
• Understand source plugins by building one in the source plugin tutorial

Transforming data

Transforming data in Gatsby is also plugin-driven; Transformer plugins take data fetched using source plugins, and process it into something more usable (e.g. JSON into JavaScript objects, markdown to HTML, and more).

• Walk through an example using the gatsby-transformer-remark plugin to transform markdown files tutorial part six
• Search available transformer plugins in the Gatsby library