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 Gatsby without Graphql
• Gatsby project structure
• Using a starter
• Creating pages
• Linking between pages
• Styling
• Creating layouts
• Deploying
• Querying data
• Sourcing data
• Transforming data

Using Gatsby without GraphQL

You can use the node createPages API to pull unstructured data directly into Gatsby sites rather than through 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 Gatsby without GraphQL
• 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.

Requirements

• A Gatsby site with two page components: index.js and contact.js
• The Gatsby <Link /> component
• gatsby develop

Directions

1. Open the index page component (src/pages/index.js), import the <Link /> component from Gatsby, add a <Link /> component above the header, and give it a to property with the value of "/contact/" for the pathname:

import React from "react"
import { Link } from "gatsby"

export default () => (
  <div style={{ color: `purple` }}>
    <Link to="/contact/">Contact</Link>
    <p>What a world.</p>
  </div>
)

2. Run gatsby develop and navigate to the index page. You should have a link that takes you to the contact page when clicked!

Note: Gatsby’s <Link /> component is a wrapper around @reach/router’s Link component. For more information about Gatsby’s <Link /> component, consult the API reference for <Link />.

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 Pixabay 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