Create your first Astro project

本頁內容尚未翻譯。

Get ready to…

Launch the Astro setup wizard

The preferred way to create a new Astro site is through our create astro setup wizard.

In the command line of your terminal, run the following command using your preferred package manager:
- npm
- pnpm
- Yarn
Terminal window
# create a new project with npm npm create astro@latest -- --template minimal
Terminal window
# create a new project with pnpm pnpm create astro@latest --template minimal
Terminal window
# create a new project with yarn yarn create astro --template minimal
Confirm y to install create-astro
When the prompt asks you where to create the project, type in the name of a folder to create a new directory for your project, e.g. ./tutorial

A new Astro project can only be created in a completely empty folder, so choose a name for your folder that does not already exist!
When the prompt asks you whether or not to install dependencies, type or select y.
When the prompt asks you whether or not to initialize a new git repository, type or select y.

When the install wizard is complete, you no longer need this terminal. You can now open VS Code to continue.

Open VS Code. You will be prompted to open a folder. Choose the folder that you created during the setup wizard.
If this is your first time opening an Astro project, you should see a notification asking if you would like to install recommended extensions. Click to see the recommended extensions, and choose the Astro language support extension. This will provide syntax highlighting and autocompletions for your Astro code.
Make sure the terminal is visible and that you can see the command prompt, such as:
Terminal window
```
user@machine:~/tutorial$
```
To toggle the visibility of the terminal, use Ctrl + J (macOS: Cmd ⌘ + J).

You can now use the terminal built right into this window, instead of your computer’s Terminal app, for the rest of this tutorial.

In order to preview your project files as a website while you work, you will need Astro to be running in development (dev) mode.

Your project files contain all the code necessary to display an Astro website, but the browser is responsible for displaying your code as web pages.

Click on the localhost link in your terminal window to see a live preview of your new Astro website!

(Astro uses http://localhost:4321 by default if port 4321 is available.)

Here’s what the Astro “Empty Project” starter website should look like in the browser preview:

Getting Started with Visual Studio Code external — a video tutorial for installing, setting up and working with VS Code