Rewriting in Astro

Recently I decided I needed a better website. I wanted to try my hand at some technologies that I have yet to try. Therefore I chose to create my website in Astro using tailwind for styling. The results? I love working with Astro and would happily do it in the future. Tailwind was a challenge to get used to but I quite enjoy having my styles with my markup, although I don’t think I would wish it on someone who is using pure html.

The syntax of astro components is like JSX/TSX so I felt quite at home writing in it. The only thing I had to get used to was the way the script logic is separated from the template ui code. The script is separated like you would separate the front-matter in a markdown file. The only problems I encountered were due to me preemptively jumping to the code without reading the needed documentation fully.

Astro has so many awesome features for instance, if your company has multiple teams all using different web ui frameworks/libraries they can all work together on the same website (even the same webpage) as Astro allows you to use the ui framework you are comfortable with inside the astro code as if it were astro code. Of course there are some rules to how this works and sometimes a page will basically just be fully written in React or Vue.js in order to gain the benefits of using one of those frameworks. One of the rules is that React’s context API may not work as expected.

Another great feature is Astro Collections. They are incredible, I use one for my blog where each entry in the collection is a markdown file with certain content in the front-matter that uses ZOD for validating front-matter. Astro goes a step further with your front-matter by generating typescript types for your editor. With the newest update to Astro added a rework of collections allowing you to define your own content layers which is how a collection gets its entries meaning you can write a content layer to fetch entires from other websites and servers which you can then combine with local content into pages or content on your site. I have barely scratched the surface with what I could do with this primitive.

I don’t enjoy reading documentation who does? but Astro’s documentation is the most helpful documentation I have ever had the pleasure of reading. The Astro team have created a section for common recipes and guides on almost anything you will need to do with the framework. I barely touched my search engine of choice, Duckduckgo, while writing my website apart from the tailwind stuff because thats how good the Astro docs are.

Astro is mostly a static site generator however like I mentioned earlier you can use other ui frameworks and libraries inside of Astro. In order to do this Astro has a concept of Islands. Islands allow you to have a static page where some of the components are not static which is how Astro allows you to have other frameworks work on the same page.

Astro also has on demand server side rendering for making sites dynamic but I have not looked at that yet.

If you haven’t heard of Astro or haven’t had the chance to try it I highly recommend it even if it is just to see their cute CLI init process. Here is the link for their website