Skip to content
Back to Deployment

Deploying Gatsby Sites

GraphQL-driven static site generator with rich plugin ecosystem, deploy pre-built HTML/JSON to any CDN.

PlatformsIntermediate

Why

Gatsby's build-time GraphQL data layer and image optimization produce blazing-fast static sites with automatic lazy loading and prefetching. The plugin ecosystem connects to CMSes (Contentful, WordPress, Sanity) seamlessly.

Platform-as-a-Service adoption grew 24% in 2024 as teams shift from VM management to git-push deploys. the cloud infrastructure market reached $330B in 2024, growing 22% year-over-year (Synergy Research), and PaaS layers capture the majority of new workloads.

When

Use Gatsby for content-driven sites with CMS data sources where build-time data fetching is acceptable. Avoid for highly dynamic content — build times grow with data size.

How

1. Build — npm run build produces public/ with HTML, JSON, JS, CSS 2. Deploy — upload public/ to any static host (Gatsby Cloud, Vercel, Netlify, S3) 3. Gatsby Cloud — optimized builds with incremental builds and cloud functions 4. Redirects — gatsby-node.js createRedirect, or netlify.toml/_redirects 5. Headers — gatsby-node.js set headers for caching, security 6. Incremental builds — Gatsby Cloud caches build between deploys for speed 7. Preview — gatsby-plugin-preview for CMS draft previews

Example

// gatsby-config.js — plugins + CMS source module.exports = { plugins: [ "gatsby-plugin-image", "gatsby-plugin-sharp", { resolve: "gatsby-source-contentful", options: { spaceId: process.env.CONTENTFUL_SPACE_ID, accessToken: process.env.CONTENTFUL_ACCESS_TOKEN, }, }, ], }; // gatsby-node.js — redirects + headers exports.createPages = ({ actions }) => { actions.createRedirect({ fromPath: "/old", toPath: "/new", isPermanent: true }); }; // netlify.toml — deploy config [build] command = "npm run build" publish = "public" [[redirects]] from = "/old" to = "/new" status = 301

Common Problems

  • ⚠Build takes 20+ minutes — large CMS dataset, use incremental builds or pagination
  • ⚠Images not optimized — forgot gatsby-plugin-image and gatsby-plugin-sharp
  • ⚠Out of memory on build — increase Node heap: NODE_OPTIONS=--max-old-space-size=4096

Best Practices

  • ✓Use Gatsby Cloud for incremental builds — avoids full rebuild when only one page changes
  • ✓Query only needed fields in GraphQL — over-fetching slows builds and increases bundle size
  • ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit

FAQ