What Astro is

Astro is a framework for sites where content comes first: blogs, documentation, landing pages, portfolios. It builds pages into ready HTML ahead of time, during the build, and by default sends not a single line of JavaScript to the browser. That is why such sites open very fast. This course covers Astro 5.

Three key ideas

An island is a small interactive piece of a page: a "Like" button, a search form, a slider. Everything else is static HTML. Islands can be written in React, Vue, Svelte and other libraries, and you can even mix them on one site.

What a component looks like

Astro code lives in .astro files. Here is the page src/pages/index.astro:

---
const title = 'My blog';
---
 
<h1>{title}</h1>
<p>Posts will appear here.</p>

The code between the --- lines is called the frontmatter; it runs during the build, and the markup follows below. The browser receives only <h1>My blog</h1> and a paragraph, with no script.

Static and server

By default Astro builds a static site: a folder of HTML files you can upload to any hosting. If you need pages generated on every request (an account area, search), you add a server adapter. That is covered in the "Data and server" chapter.

What you need

You need Node.js 18.20 or newer (20 or 22 is better) and a terminal. Check the version:

node -v

The command prints something like v22.11.0. You already know JavaScript from the tutorial; in this course it is used for the code inside components.

The course project

One example runs through the whole course: a blog with posts in Markdown, a post page, tags, an About page, an RSS feed and, later, comments through a form. Each lesson adds one piece to it.

Common mistake

Beginners expect Astro to behave like a React app and write an onclick handler that calls a function from the frontmatter. Frontmatter code runs during the build, not in the browser, so such a button does nothing. For interactivity you need a <script> tag or an island, each covered in its own lesson.