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→
4 articlesGet your local environment set up: start new projects, use Gatsby’s CLI and development server, customize your JavaScript setup, and debug common errors.
Routing→
2 articlesCreate 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→
3 articlesUse 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.
Images and Media→
3 articlesPull images, video, GIF, and other media into your site. Use gatsby-image to optimize page performance and user experience.
Plugins and Themes→
3 articlesAccess Gatsby’s rich ecosystem of drop-in functionality, from CMS integrations to image optimizations.
Sourcing Data→
2 articlesPull 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 Data→
4 articlesOnce data is pulled into Gatsby, your pages and components specify what data they access through GraphQL queries.
Common Features→
8 articlesFrom 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 articlesAdd 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 and Scaling→
4 articlesGatsby provides a large number of tools to make your performance fast out of the box.
Preview & Hosting→
2 articlesShare 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.