Gatsby on Netlify
Gatsby is a React-based, open source static site generator that pulls in data using a GraphQL API layer that can connect to a wide array of content sources.
# Key features
These Gatsby features provide key benefits for sites and apps, including ones built and deployed with Netlify.
- Content aggregation. Gatsby provides a diverse ecosystem of data plugins that allow developers to use a centralized GraphQL API to pull in content from files, APIs, and SaaS platforms. This makes development feel familiar, even if content sources are completely different.
- Performance optimizations. By default, Gatsby optimizes JavaScript bundles, adds preloading and browser optimizations, and includes other performance enhancements. In general, Gatsby sites are performant and fast.
- Image optimization. Gatsby ships an image component that works with the GraphQL data layer to generate highly optimized images. The images are lazy-loaded and configured for different viewport sizes. This cuts down on page load times and bandwidth usage.
# Netlify integration
Gatsby sites on Netlify can benefit from integrations such as automatic framework detection and a Build Plugin that optimizes caching between builds.
# Automatic framework detection
When you link a repository for a project, Netlify tries to detect the framework your site is using. If your site is built with Gatsby, Netlify provides a suggested build command and publish directory: gatsby build
and public
. If you’re using the CLI to run Netlify Dev for a local development environment, Netlify also suggests a dev command and port: gatsby develop
and 8000
. You can override suggested values or set them in a configuration file instead, but automatic framework detection may help simplify the process of setting up a site on Netlify.
# Gatsby Build Plugin
To speed up Netlify builds for Gatsby sites, we recommend installing the Gatsby Cache Build Plugin. The plugin preserves a site’s public
and .cache
directories between builds. This speeds up a Gatsby site’s Netlify build, especially for processing and transforming images.
Gatsby environment variables
Any environment variables prefixed with GATSBY_
are processed by Gatsby and made available in the browser for client-side JavaScript access. Visit the Gatsby docs about environment variables for more information.
# More resources
Did you find this doc useful?
Your feedback helps us improve our docs.