Table of Contents
- Using Unstructured Data
- Using a starter
- Creating pages
- Linking between pages
- Creating layouts
- Querying data
- Sourcing data
- Transforming data
- Gatsby project structure
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
- See a list of official and community starters
- Check out Gatsby’s official default starter
You can create pages in Gatsby explicitly by defining React components in
src/pages/, or programmatically by using the
- Walk through creating a page by defining a React component in
src/pagesin 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
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
- Use the CSS-in-JS library Glamor
- Use the CSS-in-JS library Styled Components
- Use CSS Modules
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
- 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
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
graphqltag for page queries
- Read through a conceptual guide on querying data with GraphQL in Gatsby
- Learn more about the
graphqltag — querying data in a Gatsby page
- Learn more about
<StaticQuery />— querying data in (non-page) components
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-filesystemplugin in tutorial part five
- Search available source plugins in the Gatsby library
- Understand source plugins by building one in the source plugin tutorial