You are on page 1of 3

---

title: Getting Started


description: A basic intro to Astro.
i18nReady: true
---
import Button from '~/components/Button.astro'
import TranslatorList from '~/components/TranslatorList.astro'
import ContributorList from '~/components/ContributorList.astro'
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

:::tip[Astro version 3 is here!]


**What’s new in Astro v3?** [Find out in the announcement blog
post](https://astro.build/blog/astro-3/).
**Ready to upgrade?** [Follow our upgrade guide](/en/guides/upgrade-to/v3/).
:::

<h2>What is Astro?</h2>

Astro is an **all-in-one** **web framework** for building **fast,** **content-


focused** websites.

## Key Features

- **Component Islands:** A new web architecture for building faster websites.


- **Server-first API design:** Move expensive hydration off of your users' devices.
- **Zero JS, by default:** No JavaScript runtime overhead to slow you down.
- **Edge-ready:** Deploy anywhere, even a global edge runtime like Deno or
Cloudflare.
- **Customizable:** Tailwind, MDX, and 100+ other integrations to choose from.
- **UI-agnostic:** Supports React, Preact, Svelte, Vue, Solid, Lit and more.

Check out our detailed [Why Astro](/en/concepts/why-astro/) breakdown to learn more


about what makes Astro special. ✨

## Try Astro in your browser

Visit [astro.new](https://astro.new/) and choose from a variety of templates to get


started. Play around with a full, working version of Astro right in your browser!

<div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">


<Button href="https://astro.new/basics?on=stackblitz">Launch basic
template</Button>
<Button variant="outline" href="https://astro.new/">View all templates →</Button>
</div>

## Start your first project

Get a new Astro project up and running locally with our helpful `create astro` CLI
wizard!

<PackageManagerTabs>
<Fragment slot="npm">
```shell
# create a new project with npm
npm create astro@latest
```
</Fragment>
<Fragment slot="pnpm">
```shell
# create a new project with pnpm
pnpm create astro@latest
```
</Fragment>
<Fragment slot="yarn">
```shell
# create a new project with yarn
yarn create astro
```
</Fragment>
</PackageManagerTabs>

Our [Installation Guide](/en/install/auto/) has full, 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.

## Learn Astro

See examples of some of the key concepts and patterns of an Astro site!

📚 [Add your first page](/en/core-concepts/astro-pages/) to your site.

📚 Read more about Astro’s [project structure](/en/core-concepts/project-


structure/).

📚 Learn about Astro's [file-based routing](/en/core-concepts/routing/).

*... find our full API documentation under the **Reference** tab.*

## Extend Astro

🧰 Start your next project with a [prebuilt theme](https://astro.build/themes/)

🧰 Customize your site with official and community [plugins and components]
(https://astro.build/integrations/).

🧰 Get inspired by visiting our [site showcase](https://astro.build/showcase/).

*... see our [guide to using integrations](/en/guides/integrations-guide/)*.

## Join our Community

Join us in the [Astro Discord](https://astro.build/chat) to share with and get help


from an active, friendly community!

💬 Say hi in our `#general` channel!

💬 Ask our Support Squad a question in our `#support` channel!

💬 Share what you've been working on in our `#showcase` channel!

## What's New?
[Astro Blog](https://astro.build/blog/)

[Astro changelog](https://github.com/withastro/astro/blob/main/packages/astro/
CHANGELOG.md)

<TranslatorList githubRepo="withastro/docs">
{/* Turn this HTML heading into a Markdown h2 — ## — when translating this page.
*/}
<h2>Translate</h2>

These docs translations are brought to you by all these amazing people. [Help us
with translations!](https://github.com/withastro/docs/blob/main/contributor-
guides/translating-astro-docs.md)
</TranslatorList>

## Contribute

These docs are brought to you by all these helpful people. [Join us on GitHub!]
(https://github.com/withastro/docs)

<ContributorList githubRepo="withastro/docs" />

You might also like