How-to Guides

Get your local environment set up: start new projects, use Gatsby's CLI and development server, customize your JavaScript setup, and debug common errors.

• Starters
• Environment variables
• Debug development errors
See all 5

Create both unique and template-based pages. Create a shared page layout to include elements like headers and footers. Compose content in JSX, markdown, and in a CMS.

• Creating routes
• Shared page layout

Use your preferred styling system(s) with Gatsby: standard CSS, preprocessors like Sass, CSS-in-JS solutions like Emotion, or emerging approaches like Tailwind

• Built-in CSS Support
• Local fonts
• Web fonts

Pull images, video, GIF, and other media into your site. Use gatsby-image to optimize page performance and user experience.

• Assets from filesystem
• Gatsby Image Plugin
• Static folder

Access Gatsby's rich ecosystem of drop-in functionality, from CMS integrations to image optimizations.

• Using plugins
• Themes
• Create a source plugin

Pull content and data from wherever it lives -- a CMS, the filesystem, a spreadsheet, a database -- into Gatsby using source plugins (integrations) and make it available for your site's pages and components.

• Filesystem
• Headless CMSs

Once data is pulled into Gatsby, your pages and components specify what data they access through GraphQL queries.

• Page queries
• Component queries
• Explore data (GraphiQL)
See all 4

From e-commerce and search to SEO and A/B testing, add in the rich functionality and interaction your users want and the control and optimizations that business stakeholders need.

• SEO Component
• i18n
• Customized 404 page
See all 8

Use rendering options to tell Gatsby when to build specific pages for your site. Choose between Static Site Generation, Deferred Static Generation, or Server-Side Rendering.

• Deferred Static Generation (DSG)
• Server-Side Rendering (SSR)

Add unit and end-to-end tests for your components and pages. Use modern tooling like Jest and Cypress with Gatsby and set up a CI/CD pipeline.

• Jest
• React components
• E2E tests with Cypress

Gatsby provides a large number of tools to make your performance fast out of the box.

• Site performance
• Build performance
• Out-of-memory errors
See all 4

Share and review new code and content with your team. Set up hosting and a deployment pipeline that lets you rapidly push changes to the world.

• Gatsby Cloud