Marek Miláček
2nd week with astro

2nd week with astro

Week 2: Multi-page sites

October 20-26, 2025

This week I finally built something that looks like a real website. Portfolio with 4 pages - home, about, projects and contact.

File-based routing

The most surprising thing was how Astro handles pages. You just create a file in src/pages/ and you have a new page:

  • index.astro → /
  • about.astro → /about
  • projects.astro → /projects

No configuration, no routes setup. File = page. Pretty genius.

Layouts

I started repeating the same HTML code on every page (header, footer…) and thought there must be a better way. And there is - layouts.

I created MainLayout.astro with a <slot /> tag where the page content goes. Then I just wrap each page in this layout. Change something in the layout and it applies everywhere.

<MainLayout>
  <h2>Page content</h2>
</MainLayout>

Made a Nav.astro component with all the links. Also learned to highlight the active page using Astro.url.pathname - so you see where you are.

Project organization

Had a mess with files, so I made a proper structure:

src/
├── components/  (Nav, Footer...)
├── layouts/     (MainLayout)
├── pages/       (all pages)
├── styles/      (CSS)
└── data/        (project data, contacts...)

Put project data into a separate JS file instead of writing it directly in the page. Then just import and map through it. Much cleaner.

What didn’t work

  • Took me a while to figure out why some pages weren’t loading - made mistakes in paths
  • Forgot <slot /> in the layout and wondered why nothing showed up
  • Had to rewrite active link highlighting 3 times before it worked properly

What’s next

Next week I’ll be working with data and content. This structure is already a solid foundation for more.

Time invested: about 10 hours