Migrate an existing project to Astro

Ready to convert your site to Astro? See one of our guides for migration tips.

Migration Guides

Section titled Migration Guides

• 

  Create React App

• 

  Docusaurus

• 

  Eleventy

• 

  Gatsby

• 

  GitBook

• 

  Gridsome

• 

  Hugo

• 

  Jekyll

• 

  Next.js

• 

  NuxtJS

• 

  Pelican

• 

  SvelteKit

• 

  VuePress

• 

  WordPress

Note that many of these pages are stubs: they’re collections of resources waiting for your contribution!

Why migrate your site to Astro?

Section titled Why migrate your site to Astro?

Astro provides many benefits: performance, simplicity, and many of the features you want built right into the framework. When you do need to extend your site, Astro provides several official and 3rd-party community integrations.

Migrating may be less work than you think!

Depending on your existing project, you may be able to use your existing:

• UI framework components directly in Astro.

• CSS stylesheets or libraries including Tailwind.

• Markdown/MDX files, configured using your existing remark and rehype plugins.

• Content from a CMS through an integration or API.

Which projects can I convert to Astro?

Section titled Which projects can I convert to Astro?

Many existing sites can be built with Astro. Astro is ideally suited for your existing content-based sites like blogs, landing pages, marketing sites and portfolios. Astro integrates with several popular headless CMSes, and allows you to connect eCommerce shop carts.

Astro allows you have a fully statically-generated website, a dynamic app with routes rendered on demand, or a combination of both with complete control over your project rendering, making it a great replacement for SSGs or for sites that need to fetch some page data on the fly.

How will my project design change?

Section titled How will my project design change?

Depending on your existing project, you may need to think differently about:

• Designing in Astro Islands to avoid sending unnecessary JavaScript to the browser.

• Providing client-side interactivity with client-side <script> tags or UI framework components.

• Managing shared state with Nano Stores or local storage instead of app-wide hooks or wrappers.