Astro Basics: Your first Astro site

Join the AI Workshop to learn more about AI and how it can be applied to web development. Next cohort February 1st, 2026

The AI-first Web Development BOOTCAMP cohort starts February 24th, 2026. 10 weeks of intensive training and hands-on projects.


Go into a folder on your computer.

I assume you have Node.js installed, which provides npm and npx.

Run this command:

npm create astro@latest

The Astro installer prompts you to pick a folder:

Include sample files for this first installation, it’s easier:

Then go on and install the dependencies:

Enable TypeScript support:

Choose to use strict TS:

…done!

Now open the project in VS Code and run the Astro project with npm run dev.

Astro will start on port 4321, unless you have other things running on that part, in which case port could be 4322 or another one.

and you can see this basic starter project in the browser:

Lessons in this unit:

0: Introduction
1: ▶︎ Your first Astro site
2: The structure of an Astro site
3: Astro components
4: Adding more pages
5: Building composable layouts
6: Astro Props
7: CSS in Astro
8: JavaScript in Astro
9: Access configuration values in components
10: Astro, when to use .astro or .ts files