Now that you’ve installed the basic Astro sample site, it’s time to take a look around in the site structure.
See, we have 2 folders, except for the VS Code configuration
.vscode and the Node packages in
src, and some configuration files.
public is (as in most frameworks) where you store assets like images that do not need any kind of processing and are served as-is. For example
public contains the
favicon.svg file, and you access it using the URL
Configuration files include
astro.config.mjs, which (as we’ll see later) you can extend to add more features (and configuration) to Astro.
Everything else is under
src folder now includes those subfolders:
src/pages contains the Astro page routes.
You now see
src/pages/index.astro. This is the entry point for the
/ route, the one that serves the homepage.
This is an Astro component, as the file ends with the
src/pages makes it special because it’s also a route, so Astro knows this component is what it will serve on that
We’ll see how to add more routes later.
But let’s analyze this component.
We can see 3 parts basically.
The first is the upper part, between the two
--- blocks, called frontmatter:
Since the end result of an Astro site is a static site, it will not have a backend.
So here we can do various things, like fetching data across the network or look for data in the filesystem.
In this case we import a layout, and a component.
The layout is the “outer HTML” that this page will use.
See, inside the “main” part of the component, we don’t define the DOCTYPE, an
<body> and so on.
That’s defined in the layout:
See? That’s defined in the layout:
The layout is the “container”.
We do this so it can be reused by multiple pages, without duplicating the page structure that’s common across the site.
We’ll see more about layouts later.
The last thing I want to show you in the page is the third part, the one wrapped in
This contains CSS that is scoped to the page.
In other words, it’s only applied to the current component, and does not “leak” to other components. This is a nice built-in feature.
You could also add a
Finally the last item in this basic starter kit is an example of separating some piece of UI to a separate component, not a page component, that is defined in
src/components as a convention:
We can define components to create little units of code that we can reuse across the site.
In this example the Card component is used in the
src/pages/index.astro component by first importing it in the component frontmatter:
import Card from '../components/Card.astro';
and then it’s used multiple times to define some HTML markup that would otherwise be duplicated:
This syntax is similar to HTML. There’s a Card component and we use it like an HTML tag:
with some attributes, called props.
Components are great because they avoid duplication.
We’ll talk more about them next, and we’ll see how cool they are.
Lessons this unit:
|1:||Your first Astro site|
|2:||▶︎ The structure of an Astro site|
|4:||Adding more pages|
|6:||Markdown in Astro|
|9:||CSS in Astro|
|11:||Client-side routing and view transitions|
|12:||SSR in Astro|
|13:||API endpoints in Astro|
|14:||Managing forms in Astro COMING SOON|