How to Build a Fast Website with Astro: A Practical Tutorial

Astro is a modern web framework designed for content-driven websites. Its defining characteristic is that it ships zero JavaScript to the browser by default, producing fast, static HTML while still permitting interactivity where it is genuinely required. This tutorial demonstrates how to create a website with Astro, from installation to deployment.

1. Create a project

Astro requires Node.js. With it installed, a new project is created from the terminal:

npm create astro@latest
cd your-project
npm run dev

The development server renders the site locally and reloads automatically as files change.

2. Understand the project structure

An Astro project follows a consistent convention. Three directories carry most of the work:

Directory	Purpose
`src/pages/`	Each file becomes a route; the file path determines the URL
`src/layouts/`	Reusable page shells that wrap content
`src/components/`	Reusable `.astro` building blocks
`public/`	Static assets served directly at the site root

A .astro file consists of a frontmatter section, delimited by ---, which contains JavaScript that runs at build time, followed by an HTML template that may reference the frontmatter values.

3. Create a page

Because routing is file-based, creating a page requires only adding a file to src/pages/:

---
const title = "Hello, Astro";
---
<html lang="en">
  <head><title>{title}</title></head>
  <body><h1>{title}</h1></body>
</html>

A file named about.astro is served at /about. No additional routing configuration is necessary.

4. Manage content with collections

For structured content such as a blog, Astro provides content collections. Markdown files are placed in a collection directory and validated against a schema, which guarantees that every entry contains the required fields. A dynamic route then generates one page per entry. This approach keeps content separate from presentation and scales cleanly as the number of entries grows.

A visual walkthrough of these steps:

5. Build and deploy

The command npm run build compiles the project into static files. Because the output is standard HTML, it may be hosted on any static host. Platforms such as Vercel and Netlify detect Astro automatically and require no additional configuration, making deployment a matter of connecting a repository.

Conclusion

Astro pairs a simple, file-based mental model with excellent performance, which makes it particularly well suited to portfolios, blogs, and documentation. A developer who understands pages, layouts, components, and content collections possesses the entire foundation required to build and maintain a production website.