Netlify.com Homepage Netlify Docs

Contact

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