I’ve been using Astro for a little while now—built my first portfolio with it—and overall, it’s been pretty straightforward. What I like about Astro is how simple it makes building static sites. You handle your logic and imports at the top of the file, then just focus on writing your HTML. It’s clean and to the point, which is exactly what I needed for a project like a portfolio.
One of the things that stood out to me is how you can control how components are loaded. For instance, you can decide whether a component should be static, only load on the client, or even load only when it’s visible on the page. It’s not complicated at all to set up, and this flexibility helps keep things fast. Here’s an example:
---
import StaticComponent from './components/StaticComponent.astro';
import ClientComponent from './components/ClientComponent.astro';
---
<html>
<body>
<StaticComponent /> <!-- Static component -->
<ClientComponent client:load /> <!-- Client-side only -->
<ClientComponent client:visible /> <!-- Loads when visible on screen -->
</body>
</html>
For my portfolio, I used this to keep things lightweight and added some dynamic components only where necessary. This way, the site stays fast, but I can still add interactivity.
Another thing I really liked was how simple it is to create new pages. Instead of dealing with a bunch of routing configurations, you just create a new .astro file in the src/pages folder, and it’s automatically treated as a page. For example:
- If you create a file
src/pages/about.astroand add this content:
---
---
<html>
<body>
<h1>About Me</h1>
<p>This is the about page of my portfolio.</p>
</body>
</html>
That automatically creates the /about page on your site. No fuss, no routing configuration needed.
Astro works a little differently compared to frameworks like Vue. For building a portfolio site, Astro was a great choice for me at least.