` element as a property. src/pages/index.astro ```diff --- +import Layout from '../layouts/layout.astro'; +const res = await fetch("https://pokeapi.co/api/v2/pokemon?limit=151"); +const resJson = await res.json(); +const pokemons = resJson.results.map(pokemon => { const name = pokemon.name; +// https://pokeapi.co/api/v2/pokemon/1/ const url = pokemon.url; const id = url.split("/")[url.split("/").length - 2]; return { +name, +url, +id } +}); --- +<Layout title="Pokedex: Generation 1"> <ul class="plain-list pokeList"> {pokemons.map((pokemon) => ( <li class="pokemonListItem" key={pokemon.name}> <a class="pokemonContainer" href={`/pokemon/${pokemon.name}`}> <p class="pokemonId">No. {pokemon.id}</p> <img class="pokemonImage" src={`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${pokemon.id}.png`} alt={`${pokemon.name} picture`}/> <h2 class="pokemonName">{pokemon.name}</h2> </a> </li> ))} </ul> +</Layout> <style> .pokeList { display: grid; grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) ); gap: 1rem; } /* ... */ </style> ``` ## Community Resources [Section titled “Community Resources”](#community-resources) [From Nuxt to Astro - rebuilding with Astro ](https://dev.to/lindsaykwardell/from-nuxt-to-astro-rebuilding-with-astro-5ann) [Nuxt 2 to Astro 3 Replatforming – from Setup to Production ](https://stevenwoodson.com/blog/replatforming-from-nuxtjs-2-to-astro/) # Migrating from Pelican > Tips for migrating an existing Pelican project to Astro [Pelican](https://getpelican.com) is an open-source static site generator built on Python. ## Key Similarities between Pelican and Astro [Section titled “Key Similarities between Pelican and Astro”](#key-similarities-between-pelican-and-astro) Pelican and Astro share some similarities that will help you migrate your project: * Pelican and Astro are both static-site generators, ideally suited to [content-driven websites](/en/concepts/why-astro/#content-driven) like blogs. * Pelican and Astro both have built-in support for [writing in Markdown](/en/guides/markdown-content/), including frontmatter YAML properties for page metadata. However, Astro has very few reserved frontmatter properties compared to Pelican. Even though many of your existing Pelican frontmatter properties will not be “special” in Astro, you can continue to use your existing Markdown files and frontmatter values. ## Key Differences between Pelican and Astro [Section titled “Key Differences between Pelican and Astro”](#key-differences-between-pelican-and-astro) When you rebuild your Pelican site in Astro, you will notice some important differences: * Pelican supports writing content in Markdown and reStructured Text (`.rst`). Astro supports [creating pages from Markdown and MDX](/en/guides/markdown-content/) files, but does not support reStructured Text. * Pelican uses HTML files and Jinja syntax for templating. [Astro syntax](/en/basics/astro-components/) is a JSX-like superset of HTML. All valid HTML is valid `.astro` syntax. * Pelican was designed to build content-rich websites like blogs and has some built-in, blog features that you would have to build yourself in Astro. Instead, Astro offers some of these features included in an [official blog theme](https://github.com/withastro/astro/tree/latest/examples/blog). ## Switch from Pelican to Astro [Section titled “Switch from Pelican to Astro”](#switch-from-pelican-to-astro) To convert a Pelican documentation site to Astro, start with our official [Starlight docs theme starter template](https://starlight.astro.build), or explore more community themes in our [theme showcase](https://astro.build/themes/). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard). * npm ```shell npm create astro@latest -- --template starlight ``` * pnpm ```shell pnpm create astro@latest --template starlight ``` * Yarn ```shell yarn create astro --template starlight ``` Bring your existing Markdown content files to [create Markdown pages](/en/guides/markdown-content/). You can still take advantage of [file-based routing](/en/guides/routing/) by copying these documents from Pelican’s `content/` folder into `src/pages/` in Astro. You may wish to read about [Astro’s project structure](/en/basics/project-structure/) to learn where files should be located. Pelican may have handled much of your site layout and metadata for you. You may wish to read about [building Astro Layouts as Markdown page wrappers](/en/basics/layouts/#markdown-layouts) to see how to manage templating yourself in Astro, including your page `<head>`. Like Pelican, Astro has many plugins that extend its functionality. Explore the [official list of integrations](/en/guides/integrations-guide/) for adding features such as MDX support, and find hundreds more of community-maintained integrations in the [Astro Integrations Directory](https://astro.build/integrations/). You can even use the [Astro Integration API](/en/reference/integrations-reference/) to build your own custom integration to extend your project’s features. To convert other types of sites, such as a portfolio or a blog, see more official starter templates on [astro.new](https://astro.new). You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in IDX, StackBlitz, CodeSandbox and Gitpod online development environments. ## Community Resources [Section titled “Community Resources”](#community-resources) # Migrating from SvelteKit > Tips for migrating an existing SvelteKit project to Astro [SvelteKit](https://kit.svelte.dev) is a framework for building web applications on top of Svelte. ## Key Similarities between SvelteKit and Astro [Section titled “Key Similarities between SvelteKit and Astro”](#key-similarities-between-sveltekit-and-astro) SvelteKit and Astro share some similarities that will help you migrate your project: * Both SvelteKit and Astro are modern JavaScript static-site generators and server-side rendering frameworks. * Both SvelteKit and Astro use a [`src/` folder for your project files](/en/basics/project-structure/#src) and a [special folder for file-based routing](/en/basics/astro-pages/). Creating and managing pages for your site should feel familiar. * Astro has [an official integration for using Svelte components](/en/guides/integrations-guide/svelte/) and supports [installing NPM packages](/en/guides/imports/#npm-packages), including several for Svelte. You will be able to write Svelte UI components, and may be able to keep some or all of your existing components and dependencies. * Astro and SvelteKit both allow you to use a [headless CMS, APIs or Markdown files for data](/en/guides/data-fetching/). You can continue to use your preferred content authoring system, and will be able to keep your existing content. ## Key Differences between SvelteKit and Astro [Section titled “Key Differences between SvelteKit and Astro”](#key-differences-between-sveltekit-and-astro) When you rebuild your SvelteKit site in Astro, you will notice some important differences: * Astro sites are multi-page apps, whereas SvelteKit defaults to SPAs (single-page applications) with server-side rendering, but can also create MPAs, traditional SPAs, or you can mix and match these techniques within an app. * [Components](/en/basics/astro-components/): SvelteKit uses [Svelte](https://svelte.dev). Astro pages are built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/en/guides/framework-components/) and raw HTML templating. * [content-driven](/en/concepts/why-astro/#content-driven): Astro was designed to showcase your content and to allow you to opt-in to interactivity only as needed. An existing SvelteKit app might be built for high client-side interactivity. Astro has built-in capabilities for working with your content, such as page generation, but may require advanced Astro techniques to include items that are more challenging to replicate using `.astro` components, such as dashboards. * [Markdown-ready](/en/guides/markdown-content/): Astro includes built-in Markdown support, and includes a [special frontmatter YAML `layout` property](/en/basics/layouts/#markdown-layouts) used per-file for page templating. If you are converting a SvelteKit Markdown-based blog, you will not have to install a separate Markdown integration and you will not set a layout via a configuration file. You can bring your existing Markdown files, but you may need to reorganize as Astro’s file-based routing does not require a folder for each page route. ## Switch from SvelteKit to Astro [Section titled “Switch from SvelteKit to Astro”](#switch-from-sveltekit-to-astro) To convert a SvelteKit blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes/). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard). * npm ```shell npm create astro@latest -- --template blog ``` * pnpm ```shell pnpm create astro@latest --template blog ``` * Yarn ```shell yarn create astro --template blog ``` Bring your existing Markdown (or MDX, with our optional integration) files as content to [create Markdown or MDX pages](/en/guides/markdown-content/). While file-based routing and layout components are similar in Astro, you may wish to read about [Astro’s project structure](/en/basics/project-structure/) to learn where files should be located. To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on [astro.new](https://astro.new). You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in IDX, StackBlitz, CodeSandbox and Gitpod online development environments. ## Community Resources [Section titled “Community Resources”](#community-resources) [Rewriting my blog from SvelteKit to Astro ](https://kharann.com/blog/rewriting-my-blog/) # Migrating from VuePress > Tips for migrating an existing VuePress project to Astro [VuePress](https://vuePress.vuejs.org) is an open-source static site generator built on Vue. ## Key Similarities between VuePress and Astro [Section titled “Key Similarities between VuePress and Astro”](#key-similarities-between-vuepress-and-astro) VuePress and Astro share some similarities that will help you migrate your project: * Both VuePress and Astro are modern JavaScript static-site generators with similar project file structures. Both use a [special `src/pages/` folder for file-based routing](/en/basics/astro-pages/). Creating and managing pages for your site should feel familiar. * Astro and VuePress are both designed for [content-driven websites](/en/concepts/why-astro/#content-driven), with excellent built-in support for Markdown files. Writing in Markdown will feel familiar, and you will be able to keep your existing content. * Astro has [an official integration for using Vue components](/en/guides/integrations-guide/vue/) and supports [installing NPM packages](/en/guides/imports/#npm-packages), including several for Vue. You will be able to write Vue UI components, and may be able to keep some or all of your existing Vue components and dependencies. ## Key Differences between VuePress and Astro [Section titled “Key Differences between VuePress and Astro”](#key-differences-between-vuepress-and-astro) When you rebuild your VuePress site in Astro, you will notice some important differences. * VuePress is a Vue-based single-page application (SPA). Astro sites are multi-page apps built using [`.astro` components](/en/basics/astro-components/), but can also support [React, Preact, Vue.js, Svelte, SolidJS, AlpineJS](/en/guides/framework-components/) and raw HTML templating. * [Layout templates](/en/basics/layouts/): VuePress sites are created using Markdown (`.md`) files for page content and HTML (`.html`) templates for layout. Astro is component-based, and uses Astro components, which include HTML templating for pages, layouts and individual UI elements. Astro can also create [pages from `.md` and `.mdx` files](/en/guides/markdown-content/), using an Astro layout component for wrapping Markdown content in a page template. * VuePress was designed to build content-heavy, Markdown-centric sites and has some built-in, documentation-specific website features that you would have to build yourself in Astro. Instead, Astro offers some documentation-specific features through an [official docs theme](https://starlight.astro.build). This website was the inspiration for that template! You can also find more [community docs themes](https://astro.build/themes?search=\&categories%5B%5D=docs) with built-in features in our Themes Showcase. ## Switch from VuePress to Astro [Section titled “Switch from VuePress to Astro”](#switch-from-vuepress-to-astro) To convert a VuePress documentation site to Astro, start with our official [Starlight docs theme starter template](https://starlight.astro.build), or explore more community docs themes in our [theme showcase](https://astro.build/themes?search=\&categories%5B%5D=docs). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard). * npm ```shell npm create astro@latest -- --template starlight ``` * pnpm ```shell pnpm create astro@latest --template starlight ``` * Yarn ```shell yarn create astro --template starlight ``` Bring your existing Markdown content files to [create Markdown pages](/en/guides/markdown-content/). You can still take advantage of [file-based routing](/en/guides/routing/) by moving these documents from `docs` in VuePress to `src/pages/` in Astro. Create folders with names that correspond to your existing VuePress project, and you should be able to keep your existing URLs. VuePress, or any theme you installed, probably handled much of your site layout and metadata for you. You may wish to read about [building Astro Layouts as Markdown page wrappers](/en/basics/layouts/#markdown-layouts) to see how to manage templating yourself in Astro, including your page `<head>`. You can find Astro’s docs starter, and other templates, on [astro.new](https://astro.new). You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in IDX, StackBlitz, CodeSandbox and Gitpod online development environments. ## Community Resources [Section titled “Community Resources”](#community-resources) # Migrating from WordPress > Tips for migrating an existing WordPress project to Astro [WordPress](https://wordpress.org) is an open-source, personal publishing system built on PHP and MySQL. ## Key Similarities between WordPress and Astro [Section titled “Key Similarities between WordPress and Astro”](#key-similarities-between-wordpress-and-astro) WordPress and Astro share some similarities that will help you migrate your project: * Both WordPress and Astro are ideal for [content-driven websites](/en/concepts/why-astro/#content-driven) like blogs and support writing your content in Markdown (requires a plugin in WordPress). Although the process for adding new content is different, [writing in Markdown files](/en/guides/markdown-content/) for your Astro blog should feel familiar if you have used Markdown syntax in your WordPress editor. * Both WordPress and Astro encourage you to [think about the design of your site in “blocks”](/en/concepts/islands/) (components). In Astro you will probably [write more of your own code to create these blocks](/en/basics/astro-components/) rather than rely on pre-built plugins. But thinking about the individual pieces of your site and how they are presented on the page should feel familiar. ## Key Differences between WordPress and Astro [Section titled “Key Differences between WordPress and Astro”](#key-differences-between-wordpress-and-astro) When you rebuild your WordPress site in Astro, you will notice some important differences: * A WordPress site is edited using an online dashboard. In Astro, you will use a [code editor](/en/editor-setup/) and development environment to maintain your site. You can develop locally on your machine, or choose a cloud editor/development environment like IDX, StackBlitz, CodeSandbox or Gitpod. * WordPress has an extensive plugin and theme market. In Astro, you will find some themes and [integrations](https://astro.build/integrations/) available, but you may now have to build many of your existing features yourself instead of looking for third-party solutions. Or, you can choose to start with an [Astro theme](https://astro.build/themes) with built-in features! * WordPress stores your content in a database. In Astro, you will have individual files (typically Markdown or MDX) in your [project directory](/en/basics/project-structure/) for each page’s content. Or, you can choose to use a [CMS for your content](/en/guides/cms/), even your existing WordPress site, and use Astro to fetch and present the data. ## Switch from WordPress to Astro [Section titled “Switch from WordPress to Astro”](#switch-from-wordpress-to-astro) To convert a WordPress blog to Astro, start with our blog theme starter template, or explore more community blog themes in our [theme showcase](https://astro.build/themes). You can pass a `--template` argument to the `create astro` command to start a new Astro project with one of our official starters. Or, you can [start a new project from any existing Astro repository on GitHub](/en/install-and-setup/#install-from-the-cli-wizard). * npm ```shell npm create astro@latest -- --template blog ``` * pnpm ```shell pnpm create astro@latest --template blog ``` * Yarn ```shell yarn create astro --template blog ``` You can continue to [use your existing WordPress blog as your CMS for Astro](/en/guides/cms/wordpress/), which means you will keep using your WordPress dashboard for writing your posts. Your content will be managed at WordPress, but all other aspects of your Astro site will be built in your code editing environment, and you will [deploy your Astro site](/en/guides/deploy/) separately from your WordPress site. (Be sure to update your domain at your host to keep the same website URL!) You may wish to take [Astro’s Build a Blog Tutorial](/en/tutorial/0-introduction/) if you are new to working in a code editor and using GitHub to store and deploy your site. It will walk you through all the accounts and setup you need! You will also learn how to [build Astro components yourself](/en/tutorial/3-components/), and it will show you how to [add blog posts directly in Astro](/en/tutorial/2-pages/2/) if you choose not to use WordPress to write your content. If you want to move all of your existing post content to Astro, you may find this [tool for exporting Markdown from WordPress helpful](https://github.com/lonekorean/wordpress-export-to-markdown). You may need to make some adjustments to the result if you have to [convert a large or complicated WordPress site to Markdown](https://swizec.com/blog/how-to-export-a-large-wordpress-site-to-markdown/). To convert other types of sites, such as a portfolio or documentation site, see more official starter templates on [astro.new](https://astro.new). You’ll find a link to each project’s GitHub repository, as well as one-click links to open a working project in IDX, StackBlitz, CodeSandbox and Gitpod online development environments. ## Community Resources [Section titled “Community Resources”](#community-resources) [Goodbye Wordpress, hello Astro! ](https://trib.tv/posts/2025/wordpress-to-astro/) [How I Migrated from Wordpress to Astro ](https://itsthatlady.dev/blog/migrate-from-wordpress-to-astro/) [How and Why I Moved My Blog from WordPress to Astro and Markdown ](https://levelup.gitconnected.com/how-and-why-i-moved-my-blog-from-wordpress-to-astro-and-markdown-3549672d5a86) [How I Migrated From Wordpress to Astro: Boosted Pagespeed Scores to 100% and Cut 100% Hosting cost ](https://devaradise.com/wordpress-to-static-website-astro/) [WordPress to Astro site conversion ](https://share.transistor.fm/s/d86496cd) [How to Convert a Wordpress blog to an Astro Static Site ](https://blog.okturtles.org/2024/10/convert-wordpress-to-static-site/) [Why I switched from WordPress to Astro ](https://dev.to/fratzinger/why-i-switched-from-wordpress-to-astro-5ge) [Why I ditched WordPress for Astro ](https://vbartalis.xyz/en/blog/why-i-ditched-wordpress-for-astro-js/) [DeWP: utility to use your WordPress data in Astro projects ](https://delucis.github.io/dewp/) [Astro vs. WordPress: Rendering Patterns of the Modern Web ](https://andrewkepson.com/blog/headless-wordpress/astro-vs-wordpress-rendering-patterns/)

Backend Services: advice on how to integrate backend services like Firebase, Sentry, and Supabase in an Astro project # Migrate an existing project to Astro > Some tips and tricks for converting your site to Astro. **Ready to convert your site to Astro?** See one of our guides for migration tips. ## Migration Guides [Section titled “Migration Guides”](#migration-guides) * ![](/logos/create-react-app.svg) ### [Create React App](/en/guides/migrate-to-astro/from-create-react-app/) * ![](/logos/docusaurus.svg) ### [Docusaurus](/en/guides/migrate-to-astro/from-docusaurus/) * ![](/logos/eleventy.svg) ### [Eleventy](/en/guides/migrate-to-astro/from-eleventy/) * ![](/logos/gatsby.svg) ### [Gatsby](/en/guides/migrate-to-astro/from-gatsby/) * ![](/logos/gitbook.svg) ### [GitBook](/en/guides/migrate-to-astro/from-gitbook/) * ![](/logos/gridsome.svg) ### [Gridsome](/en/guides/migrate-to-astro/from-gridsome/) * ![](/logos/hugo.svg) ### [Hugo](/en/guides/migrate-to-astro/from-hugo/) * ![](/logos/jekyll.png) ### [Jekyll](/en/guides/migrate-to-astro/from-jekyll/) * ![](/logos/nextjs.svg) ### [Next.js](/en/guides/migrate-to-astro/from-nextjs/) * ![](/logos/nuxtjs.svg) ### [NuxtJS](/en/guides/migrate-to-astro/from-nuxtjs/) * ![](/logos/pelican.svg) ### [Pelican](/en/guides/migrate-to-astro/from-pelican/) * ![](/logos/sveltekit.svg) ### [SvelteKit](/en/guides/migrate-to-astro/from-sveltekit/) * ![](/logos/vuepress.png) ### [VuePress](/en/guides/migrate-to-astro/from-vuepress/) * ![](/logos/wordpress.svg) ### [WordPress](/en/guides/migrate-to-astro/from-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?”](#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](https://astro.build/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](/en/guides/framework-components/) directly in Astro. * [CSS stylesheets or libraries](/en/guides/styling/) including Tailwind. * [Markdown/MDX files](/en/guides/markdown-content/), configured using your existing [remark and rehype plugins](/en/guides/markdown-content/#markdown-plugins). * [Content from a CMS](/en/guides/cms/) through an integration or API. ## Which projects can I convert to Astro? [Section titled “Which projects can I convert to Astro?”](#which-projects-can-i-convert-to-astro) [Many existing sites can be built with Astro](/en/concepts/why-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](/en/guides/on-demand-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?”](#how-will-my-project-design-change) Depending on your existing project, you may need to think differently about: * Designing in [Astro Islands](/en/concepts/islands/#what-is-an-island) to avoid sending unnecessary JavaScript to the browser. * Providing client-side interactivity with [client-side ` ``` Similarly, in Astro you can drop in a ` ``` #### Global Styling [Section titled “Global Styling”](#global-styling) ` ``` #### Pre-processor support [Section titled “Pre-processor support”](#pre-processor-support) [Astro supports the most popular CSS preprocessors](/en/guides/styling/#css-preprocessors) by installing them as a dev dependency. For example, to use SCSS: ```shell npm install -D sass ``` After doing so, you’re then able to use `.scss` or `.sass` styled without modification from your Vue components. src/layouts/Layout.astro ```astro

Hello, world

``` See more about [Styling in Astro](/en/guides/styling/). ### Nuxt Image Plugin to Astro [Section titled “Nuxt Image Plugin to Astro”](#nuxt-image-plugin-to-astro) Convert any [Nuxt `` or `` components](https://image.nuxtjs.org/components/nuxt-img) to [Astro’s own image component](/en/guides/images/) in `.astro` or `.mdx` files, or to a [standard HTML ``](/en/guides/images/#images-in-ui-framework-components) or `