Practical step-by-step guides to help you achieve a specific goal. Most useful when you're trying to get something done.
Local Development→5 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.
Use your preferred styling system(s) with Gatsby: standard CSS, preprocessors like Sass, CSS-in-JS solutions like Emotion, or emerging approaches like Tailwind
Images and Media→3 articles
Pull images, video, GIF, and other media into your site. Use gatsby-image to optimize page performance and user experience.
Plugins and Themes→3 articles
Access Gatsby's rich ecosystem of drop-in functionality, from CMS integrations to image optimizations.
Sourcing Data→2 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 Data→4 articles
Once data is pulled into Gatsby, your pages and components specify what data they access through GraphQL queries.
Common Features→8 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.
Rendering Options→2 articles
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.
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 and Scaling→6 articles
Gatsby provides a large number of tools to make your performance fast out of the box.
Preview & Hosting→3 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.