Skip to content
Play · 45 min

Code · Astro from scratch

Why Astro, and what we will build

Lesson 1 of 4 · 45 min · with Marco Bellini

What makes Astro different, a tour of the finished site, and setting up your first project.

Astro sends HTML to the browser and nothing else unless you ask for it. That one decision is why Astro sites load fast on any phone, and why they are pleasant to build: most of what you write is plain HTML and CSS.

What we will build

A small portfolio with a home page, a project list and a blog. It is the kind of site most of us need at some point, and it touches every part of Astro you will use day to day.

Set up the project

  1. Install Node.js 22 or newer.
  2. Run npm create astro@latest and pick the empty template.
  3. Open the folder in your editor and run npm run dev.

Open the local address in your browser. You now have a working Astro site, and in the next lesson we give it pages.