| title |
|---|
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.
- Using Unstructured Data
- Gatsby project structure
- Using a starter
- Creating pages
- Linking between pages
- Styling
- Creating layouts
- Deploying
- Querying data
- Sourcing data
- Transforming 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
Read the Gatsby project structure guide for a tour of the folders and files you may see inside a Gatsby project.
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 createPages API.
- 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
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
- 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
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
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
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
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-remarkplugin to transform markdown files tutorial part six - Search available transformer plugins in the Gatsby library