Astro is the new static site generator on the scene. This is why I'm so excited about it.
When Astro first appeared on the scene, I rolled my eyes.
Another static site generator. Really? Don't we already have enough to choose from?
At first, it felt like it could have been an Eleventy plugin (similar to what Slinkity is doing). I was frustrated that the Astro team felt like they needed to add a whole new thing to the ecosystem.
But then I started tinkering with it and realized that Astro fills in the gaps that I've found in the other tools I've been working with recently. And that's when I got super excited!
For me, what it boils down to is that I feel like Astro brings the right degree of opinion to its framework. It knows that there are widespread preferences for lower-level tooling, and so it leaves options. But it provides a solid framework for implementing those options.
Now, granted, I've only built a few proofs of concept, but these are the five reasons I'm so excited about Astro:
Let's take a quick look at each of these ideas.
Astro assumes the opposite. It makes you, the developer, tell it when you need interactivity. Otherwise it renders static HTML. That means that even though there is some magic that happens during the build, you are still in control of your HTML code for the most part.
It's unlikely we're going to see one component framework to rule them all. React is hugely popular, yes, but Vue and Svelte have a major following that isn't going away.
Astro doesn't just say you can choose one of these frameworks, but that you can use any of them at any point. Meaning you could have a Vue component and a React component in the same project. That's not necessarily a great idea, but it leaves the developer to make that decision. Astro just provides the foundation.
Pages can be
.astro components or
.md (markdown) files. It also provides a markdown component for use in Astro components, when you only need a little markdown in a larger component.
This feels like an inspiration from Eleventy — which will render markdown pages right out of the box, with the option to inject plugins as necessary.
Like BYOF, Astro provides an array of options for implementing styles in the project, including directly in a component, using CSS modules, PostCSS, Tailwind, Sass, and more.
This is great because, well, CSS is hard. And everyone has their own way of staying organized. And yet, in comparison to Eleventy, which makes no opinion on styling, a foundation of the popular options today is available for you in Astro.
I love that all the logic for Astro components lives in the component. I'm not a Vue guy, and I've only tinkered with Svelte, so the concept was a bit odd to me at first.
While it originally felt to me like Astro used Eleventy as a basis and then built something else on top of it, I'm looking at the relationship of the two differently after working with both.
Eleventy is very much about reducing the amount of code you have to write in general. It supports a number of server-side templating languages, and does not go after front-end component frameworks. There's a lot of power in this simplicity. It makes it a little easier to focus on the content.
But the big remaining benefit of Eleventy is that you have 100% control over the HTML that is rendered to the page. You, the developer, are in absolute control of the performance of your site. And that can't be understated. You'll have to do a bit of work to maintain that and to stay organized as your site grows, but you have the control.
Will I settle on one over the other? Maybe. But I think both have their place for now.
So that's it. Astro provides a foundation that combines popular opinions today. It shows developers what those options are, and then asks the developer to pick one, or more. It says, "Here are three different hammers. You can pick the one that feels right, or you can use all three at different times. You just have to tell me what you want to do."
And that is really exciting!
Netlify forms are easy to use because they are simple in scope. Add a little power with this cool trick.
Learn how to build a static API with Node.js. We'll write a node build script that converts local YAML files into a set of structured JSON output files.
Learn the basics of sending custom email notifications using Netlify functions and your email service of choice.