Getting started - Withastro

import { CardGrid } from '@astrojs/starlight/components' import Card from '~~/components/Landing/Card.astro' import ListCard from '~~/components/Landing/ListCard.astro' import SplitCard from '~~/components/Landing/SplitCard.astro' import Discord from '~~/components/Landing/Discord.astro'

<CardGrid> <Card title="What will you build with Astro?" icon="laptop"> Explore [Astro starter themes](https://astro.build/themes/) for blogs, portfolios, docs, landing pages, SaaS, marketing, ecommerce sites, and more! </Card> <Card title="Take a guided tour" icon="star"> Complete our introductory [Build a Blog Tutorial](/en/tutorial/0-introduction/) to learn the basics and create your first Astro site. </Card> <SplitCard title="Start a new project" icon="rocket"> ```sh # create a new project with npm npm create astro@latest ```

Our [installation guide](/en/install-and-setup/) has step-by-step instructions for installing Astro using our CLI wizard, creating a new project from an existing Astro GitHub repository, and for installing Astro manually.

</SplitCard> <ListCard title="Learn" icon="open-book"> - [Astro’s main features](/en/concepts/why-astro/) - [Islands architecture](/en/concepts/islands/) - [Astro components](/en/basics/astro-components/) - [The Astro template syntax](/en/reference/astro-syntax/) </ListCard> <ListCard title="Extend" icon="puzzle"> - [Add integrations like React and Partytown](/en/guides/integrations-guide/) - [Create type safe content collections](/en/guides/content-collections/) - [Enhance navigation with view transitions](/en/guides/view-transitions/) - [Connect a headless CMS to your project](/en/guides/cms/) </ListCard> </CardGrid> <Discord title="Have a question or want to get involved?" cta="Join our Discord"/>