Skip to content
Home / Migrations / Gatsby → Astro

Gatsby → Astro

medium

Gatsby is effectively dead (Netlify acquisition, no updates). Astro is the modern content-first framework with island architecture.

Estimated: 4-10h · 6 steps
Progress0%
Step 1: Create Astro project
npm create astro@latest
Step 2: Move content

Copy markdown/MDX files. Astro content collections replace Gatsby's GraphQL data layer. Define collection schema in src/content/config.ts.

Step 3: Convert pages

Gatsby JSX pages → Astro .astro files. Replace gatsby-link with <a> tags. Remove GraphQL queries.

Step 4: Replace plugins

gatsby-plugin-image → Astro Image. gatsby-plugin-mdx → built-in MDX. gatsby-source-* → Astro content loaders or fetch().

Step 5: Add React islands

Keep React components with client:load or client:visible directives for interactive parts.

npm install @astrojs/react
Step 6: Verify
✓ All pages render, images load, build succeeds