Skip to main content

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

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.

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.

Creating pages

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

Linking between pages

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

Styling

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

Creating layouts

To wrap pages with layouts, use normal React components.

Deploying

Showtime.

Querying data

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

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).

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

Was this helpful? edit this page on GitHub