Start an Astro project

Create an Astro project

Run the official project wizard, install the dependencies, and open the first page in a local development server.

8 minute lesson

~~~

Run Astro’s project wizard:

npm create astro@latest

Choose a small starter for this course and install the dependencies. Then enter the project directory and start development:

cd astro-notes
npm run dev

Open the local URL printed by Astro. Edit src/pages/index.astro:

---
const title = 'Astro notes'
---

<h1>{title}</h1>

Save and confirm the page updates.

The development server renders the page when you request it. Later, the default production build will render the static route into a file. The same component can run at a different time depending on the output and route configuration.

If the page fails, read the first terminal error. An unclosed tag, missing import, and wrong directory are different problems.

Keep the terminal and browser open side by side. For every example in this course, check both the render error and the final browser output.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →