Astro Structure & Components

Understanding .astro Files

Every Astro component uses the .astro file extension. The file is divided into two sections. The top section between two sets of triple dashes (---) is called the "frontmatter" and is where you write JavaScript that runs at build time. Everything below the frontmatter is the HTML template that gets rendered to the page.

Creating a Base Layout

Inside the src/layouts/ folder, create a new file called BaseLayout.astro. This file will contain the HTML boilerplate that wraps every page on your site. Include the doctype declaration, html tag, head tag with your meta tags and title, and a body tag. Inside the body, place a special <slot /> tag. The slot is where individual page content will be injected.

Building the Header Component

Inside src/components/, create Header.astro. Translate the navigation design from your Figma file into HTML. Use a nav element containing an anchor tag for your logo and an unordered list for the navigation links. Style it with scoped CSS written directly inside a style tag at the bottom of the .astro file.

Building the Footer Component

Create Footer.astro in the same components directory. Add a footer element with your copyright text and social media icon links. These icons should be the SVG files you exported from Figma earlier. Copy them into the public/icons/ folder and reference them with img tags.

Assembling the Homepage

Open src/pages/index.astro. In the frontmatter section, import your BaseLayout, Header, and Footer components. Then in the template section, wrap everything in the BaseLayout component and place the Header at the top, your hero and about section content in the middle, and the Footer at the bottom.

Static File-Based Routing

Astro uses file-based routing. Any .astro file placed inside the src/pages/ directory automatically becomes a URL route. For example, creating src/pages/about.astro creates the /about page. Creating src/pages/contact.astro creates the /contact page. No router configuration is needed.