Skip to main content


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

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.

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 Gatsby site with two page components: index.js and contact.js
  • The Gatsby <Link /> component
  • gatsby develop


  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>
  1. 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 />.


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.



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

Edit this page on GitHub