How-to Guides

Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.

Local Development

9 articles

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

Routing and Pages

11 articles

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.

Styling

13 articles

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.

Adding Images and Media

8 articles

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

Plugins and Themes

16 articles

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

Sourcing Data Into Gatsby

11 articles

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.

Querying For Data

5 articles

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

Adding Common Features

13 articles

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.

Testing

6 articles

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.

Performance

4 articles

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

Previews, Deploys, Hosting

11 articles

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.

Customize Default JS Tools

5 articles

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