Start an Astro project

Understand the project structure

Know which folders Astro owns and which folders you create as the site grows.

8 minute lesson

~~~

An Astro project separates source files from files copied unchanged.

astro-notes/
├── public/
│   └── robots.txt
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── assets/
├── astro.config.mjs
├── package.json
└── tsconfig.json

src/pages/ defines routes. src/components/ and src/layouts/ are useful conventions for reusable building blocks. Other source code, content, styles, and processed assets also live under src/.

Astro processes files in src/. It can bundle scripts and styles, optimize imported images, and report broken imports.

Files in public/ bypass that pipeline. Astro copies them unchanged to the output root. Use it for robots.txt, a web manifest, or a file that must keep an exact public path.

astro.config.mjs holds project-wide configuration. package.json records dependencies and commands. A static production build normally writes to dist/.

Move one image between public/ and src/. Notice how its reference and build handling change.

Lesson completed

Take this course offline

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

Get the download library →