1 • Create and deploy your first Astro site
Create your first Astro project
Get ready to…
- Run the
create astrosetup wizard to create a new Astro project
- Start the Astro server in development (dev) mode
- View a live preview of your website in your browser
Launch the Astro setup wizardSection titled 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:
When the prompt asks, “Where would you like to create your new project?” type in the name of a folder to create a new directory for your project, e.g.
You will see a short list of starter templates to choose from. Use the arrow keys (up and down) to navigate to the “Empty” template, and then press return (enter) to submit your choice.
When the prompt asks, “Would you like to install dependencies?” type
When the prompt asks you if you plan on writing TypeScript, type
When the prompt asks, “Would you like to initialize a new git repository?” type
When the install wizard is complete, you no longer need this terminal. You can now open VS Code to continue.
Open your project in VS CodeSection titled Open your project in VS Code
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:
You can now use the terminal built right into this window, instead of your computer’s Terminal app, for the rest of this tutorial.
Run Astro in dev modeSection titled Run Astro in dev mode
In order to preview your project files as a website while you work, you will need Astro to be running in development (dev) mode.
Start the dev serverSection titled Start the dev server
Run the command to start the Astro dev server by typing into VS Code’s terminal:
Now you should see confirmation in the terminal that Astro is running in dev mode. 🚀
View a preview of your websiteSection titled View a preview of your website
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
localhostlink in your terminal window to see a live preview of your new Astro website!
http://localhost:3000by default if port 3000 is available.)
Here’s what the Astro “Empty Project” starter website should look like in the browser preview:
ChecklistSection titled Checklist
ResourcesSection titled Resources
Getting Started with Visual Studio Code external — a video tutorial for installing, setting up and working with VS Code