Get Started in Astro

Get Started is the first chapter of the free Astro tutorial. It explains what Astro is and takes you to a running site on your own computer.

What each lesson covers:

  • Getting Started with Astro: What Astro is, why it was made, its main features, the "HTML first" idea, what you can build, Astro vs Next.js and React, the Astro ecosystem, what you need to install, creating a project, its files, and the dev, build and preview commands.
  • Project Structure and Configuration: Every folder and file in a new project, astro.config.mjs, integrations and astro add, using JavaScript and TypeScript together, editor setup and the dev toolbar.

Every lab on these pages runs in your browser with Astro 7's real runtime and the official Astro compiler (its WebAssembly build). Edit the files, press Run, and see the built page, the terminal and the HTML that a visitor's browser receives.

You need no setup to start. The labs run on this site. The lesson also shows you how to install Node.js and create the same project on your own computer.

Lessons in this section

  1. Getting Started with Astro

    What Astro is and why it was created, its features, the HTML-first approach, what you can build, Astro vs Next.js and React, the ecosystem, system requirements, creating and running a project, its files, and the Astro CLI.

    • Explain what Astro is and what HTML first means
    • Tell when Astro is a good choice and when another tool fits better
    • Create, run, build and preview an Astro project
    • Name the job of src/pages, public/, astro.config.mjs and package.json
  2. Project Structure and Configuration

    Every folder and file in an Astro project, public/ vs src/, astro.config.mjs and defineConfig(), common options, integrations and astro add, using JavaScript and TypeScript together, astro check, editor setup and the dev toolbar.

    • Put each kind of file in the right folder
    • Tell public/ files from src/ files
    • Change options in astro.config.mjs and add an integration
    • Use .js and .ts files together and check types with astro check