Add pages to your Gatsby site, and use layouts to manage common page elements.
- Project structure
- Creating pages automatically
- Linking between pages
- Creating a layout component
- Creating pages programmatically with createPage
There are so many ways to add styles to your website; Gatsby supports almost every possible option, through official and community plugins.
- Using global CSS files without a Layout component
- Using global styles in a layout component
- Using Styled Components
- Using CSS Modules
- Using Sass/SCSS
- Adding a Local Font
- Using Emotion
- Using Google Fonts
Starters are boilerplate Gatsby sites maintained officially, or by the community.
A Gatsby theme lets you centralize the look-and-feel of your site. You can seamlessly update a theme, compose themes together, and even swap out one compatible theme for another.
Pull data from multiple locations, like the filesystem or database, into your Gatsby site.
- Adding data to GraphQL
- Sourcing Markdown data for blog posts and pages with GraphQL
- Sourcing from WordPress
- Sourcing data from Contentful
- Pulling data from an external source and creating pages without GraphQL
- Sourcing content from Drupal
Gatsby lets you access your data across all sources using a single GraphQL interface.
- Querying data with a Page Query
- Querying data with the StaticQuery Component
- Querying data with the useStaticQuery hook
- Limiting with GraphQL
- Sorting with GraphQL
- Filtering with GraphQL
- GraphQL Query Aliases
- GraphQL Query Fragments
- Querying data client-side with fetch
Access images as static resources, or automate the process of optimizing them through powerful plugins.
- Import an image into a component with webpack
- Reference an image from the static folder
- Optimizing and querying local images with gatsby-image
- Optimizing and querying images in post frontmatter with gatsby-image
Showtime. Once you are happy with your site, you are ready to go live with it!
Edit this page on GitHub