Astro Learning-What I learned So Far

Written by Madhu Dath

I learned that astro is great for content first websites, where interactivity takes place at the back. You can simply write blog posts in markdown and add details about the post in YAML in it’s “frontmatter,” which is the name of the area. Besides this, I also learned about:

  1. Components
  2. Layouts
  3. Scripts
  4. Styles

Components

Components are *.astro files where which are reusable code. For example, I made the following components:

I can use these components in any other .astro files. This allows me to avoid duplicating code. For example, I can use the footer section in any page to add details about my page. Or the navigation component to show the navigation buttons.

However, I still need to make it pretty. This is where layouts come in.

Layouts

Layouts are also .astro files where I can import components and decide where what things will go. Then instead of using the components on my pages. I can use the layouts. Therefore, layouts contain a compbination of the reusable components…and some extras.

Scripts && Styles

Scripts and styles are the usual *.js and *.css files. You can write them and simply import them into the pages.

Pages vs Components and Laouts

Though pages, components, and layouts are written with *.astro extension, only the *.astro files inside the pages directoy become a page of your website. The components remain hidden.

So…

Astro is great! You can build a website quickly using it’s components, layouts, and markdown support.

Published on: 2025-03-30

astro

learning

components

layouts

scripts

styles