Play · 1 h
Pages, layouts and components
Lesson 2 of 4 · 1 h · with Marco Bellini
Every file in src/pages becomes a page. We add a layout and split the page into components.
In Astro, a file in src/pages is a page. about.astro becomes /about, and
blog/index.astro becomes /blog. There is no router to configure.
One layout for every page
A layout holds what every page shares: the <head>, the navigation and the
footer. Pages wrap their content in it, so a change to the navigation happens
in one place.
Components
Anything you repeat becomes a component: a project card, a button, a section heading. Components take props, just like HTML attributes, and render plain HTML.
By the end of this lesson the site has three pages that share one layout and five small components.