First thoughts on Astro
I got into this framework thanks to Midudev. He mentioned it throghout his YouTube channel and I decided to give it a try.
What is Astro?
Astro is a new static site generator that allows you to use React, Vue, Svelte or any other framework to build your website. But it’s not only that, it also allows you to use Markdown and CSS to build your website.
Where I came from
I came from React, I had been using it for most of my project throughout last year or so, since I got the hang of it. I loved the javascript first approach, it just seemed rigth to me. But at the same time, when faced with some more minor projects, I did begin to realize that maybe there was some overkill going on. I mean, I was using React for everything, even for the most simple of projects. And that’s when I started to question if there wasn’t a better way to do things for those cases.
That’s when I found Astro. It seemed like the perfect fit for those projects, and I decided to give it a try.
My first impressions
So, the very first thing i like about this framework is that it’s really easy to get started. You just need to install it and you are ready to go. There’s no function declarations or hooks, or anything like that. Simply import the components you need and you are ready to go.
This allows for the very much apreciated feature of components, but with considerably less boilerplate than React. Also, the routing is file based which is a really nice feature. Mybe not as flexible as React, but awesome when you just want a simple static page with a couple of routes.
Now don’t get me wrong, Astro i still capable ( as far as im concerned ) of more than simple static pages. It uses an “islands” approach, whic means that it will only load up javascript on the components that need it. This allows for a really fast initial load, and a really fast navigation between pages.
There’s also supports a hybrid server side and client side rendering, which is really nice. It allows you to use the best of both worlds, and it’s really easy to implement.
My first project
I had been wanting to build my very own personal porfolio website for wuite some time. I then thought that this would be the perfect opportunity to try out Astro. And I was not dissapointed.
I did think of building it from the ground up, but on Astro’s very own website, they list loads of quite great templates. I decided to use one of those as a starting point, and then build on top of it.
I did have some problems with the template, but I was able to solve them quite easily. I did have to do some research, but I was able to solve them in a couple of hours.
I picked Manuel Ernesto’s template called Astrofy. It’s a really nice template, and it’s really easy to customize. I did have to do some research on how to customize it, but it was really easy to do so.
Form then on, I added a few features like View Transitions, which is also one of the features that I really like about Astro. It’s really easy to implement, and it’s really nice to have. Of course, this is a Web Dev thing, but it’s really nice to have it built in.
I also added a few more features, like a Dark Mode toggle, and I plan on adding Language support in the future.
You can judge the results by yourself, since this post is being written on that very same website.
Pros and Cons
What I really liked
- Easy to get started
- Easy to customize
- Easy to create components
- Markdown support - makes writing blogs super easy
- File based routing - makes routing quick and simple
What I didn’t like
Honestly, I still havent found anything that I don’t like about Astro. I’m sure that there are some things that I will find in the future, but for now, I’m really happy with it. I’ll update this post if I find something that I don’t like. Make sure to subscribe to my newsletter to get notified when I do.
Final thoughts
I’m really happy with Astro. I think that it’s a really nice framework, and I’m sure that it will be my go to solution for simple static pages. I’m also sure that I will use it for more complex projects in the future.