Creating a project
An Astro project is created by the official create astro wizard. It asks a few questions, downloads a template and installs the dependencies. After that you start the dev server and open the site in the browser.
Creating
Run this in a terminal, in the folder where you keep your projects:
npm create astro@latest blogThe wizard asks which template to use, whether to install dependencies and whether to create a Git repository. For this course pick the minimal empty template (an option named something like "minimal" or "empty") and agree to install dependencies. A blog folder appears.
Running
cd blog
npm run devThe command starts the dev server and prints the address http://localhost:4321 in the terminal. Open it and you see the starter page. The server watches your files: save a change and the page in the browser updates by itself. Stop the server with Ctrl+C.
Project structure
blog/
├── public/
│ └── favicon.svg
├── src/
│ └── pages/
│ └── index.astro
├── astro.config.mjs
├── package.json
└── tsconfig.json| Path | What is inside |
|---|---|
src/pages/ | Site pages: each file is a separate address |
src/components/ | Components that pages are built from (you create this folder) |
src/layouts/ | Layouts, the shared frame of pages (you create it too) |
src/styles/ | Shared CSS files |
src/assets/ | Images that Astro optimizes during the build |
public/ | Files copied to the site as is: favicon.svg, robots.txt |
astro.config.mjs | Astro settings and added integrations |
Only src/pages/ is required; the rest is a common convention.
The config file
// astro.config.mjs
import { defineConfig } from 'astro/config';
export default defineConfig({});The settings are empty for now. Later lessons add the site address, integrations (React, MDX, sitemap) and a server adapter here.
Project commands
| Command | What it does |
|---|---|
npm run dev | Dev server at http://localhost:4321 |
npm run build | Builds the finished site into dist/ |
npm run preview | Serves the built site from dist/ |
npx astro add react | Adds an integration, React in this case |
Common mistake
People put an image in src/ and write a path like /src/images/cat.jpg in the markup. It sometimes works in development, but after the build the file is not on the site. Put files you reference by a direct address into public/ and write the path without public: /cat.jpg. Images in src/assets/ are brought in with import, as the images lesson shows.