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.

• Create a new project from a starter
• Create and use an environment variable
• Debug common development errors
See all 8

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.

• Create pages in Gatsby
• Create a shared page layout
• Add content using Markdown
See all 11

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

• Style with standard CSS
• Style with CSS modules
• Style with CSS-in-JS
See all 13

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

• Load an image from the filesystem
• Use Gatsby Image
• Load a video
See all 8

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

• Add a plugin to your site
• Start a new site with a theme
• Use a theme in an existing site
See all 15

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.

• Source data from the filesystem
• Sourcing Data from Contentful
• Sourcing Data from Wordpress
See all 11

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

• Use Gatsby without GraphQL
• Explore the data layer using GraphiQL
• Query for data in a page
See all 5

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.

• Create a custom 404 page
• Add page transitions
• Add comments
See all 13

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.

• Set up Jest for unit testing
• Test React components
• Test components that use GraphQL
See all 6

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

• Run a Lighthouse audit
• Add a manifest file
• Add offline support

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.

• Deploy using Gatsby Cloud
• Deploy using Netlify
See all 11

Sometimes you may find yourself in a situation where Gatsby’s default configuration just isn’t quite what you need for your site. If you should find yourself in this situation, have no fear

• Add a custom webpack config
• Customize the Babel config
• Customize ESLint
See all 5