Introduction to Astro
The Valley of Code
Your Web Development Manual
I’ve heard of Astro being talked a lot recently in various places, and I decided to check it out.
I have this problem: I hate servers. I hate managing servers, I hate creating servers, I hate having to worry about servers. Security, maintenance, upgrades, no thanks unless absolutely necessary.
This is why I love using platforms like Netlify and Vercel. I use a lot static site generators like Hugo, but also Next.js, SvelteKit and ..plain old simple HTML sites.
Astro seems interesting as it goes into this direction, but with a different point of view.
Here are the main selling points of Astro, to me:
- it generates a static site, bonus points as I do not want to manage a server, and I love static sites
- it’s framework-agnostic, which lets me be flexible if I want to use different frameworks for different sites
- it seems very simple, and I like simple
I can use Astro to create a website with React, and then use Svelte or Vue in another site, but reuse my Astro expertise. You can also mix frameworks for different parts of the site, if needed. This is not anything I’d like to do in my sites, but it might be handy for a variety of scenarios.
And it seems to be using a lot of composition, reusing things we build with other libraries (React/Vue/Svelte/*).
Then it gets some of the good ideas that came from other projects, like frontmatter, built-in MDX support, scoped CSS, filesystem-based routing.
Astro has been publicly launched in June 2021 and since then it has generated quite the hype.
Let’s find out what’s it all about.
I’m going to install a few different Astro sites with the Astro installer, so we can see how different sites are built, starting with a very simple one, and getting more complex with other ones.
Create an empty folder and run
npm init astro
This will prompt you to choose a starter template:
Pick Minimal. Once it finishes, run
npm run dev
To start the local development server on http://localhost:3000/
Choosing the Minimal template will generate a site that’s ..minimal.
Let’s now create another site and pick Blog, for example.
Here’s the project structure in Finder:
All the templates default to using Preact, which is like React, just faster and smaller in size. You can choose another framework by using the Starter Kit option. As a second step, you’ll be able to choose React, Solid, Svelte or Vue:
Let’s pick Svelte by pressing space next to its option (notice you can select multiple frameworks). This will generate a simple, one-page site:
Notice the little widget at the bottom, the number with the + and - buttons. That’s a Svelte component.
Let’s take a look at the code that generates those 3 sites. Before doing so, install the Astro extension in VS Code:
This will apply the correct syntax highlighting to your
Did I say
.astro files? Yes, because that’s the building block of any Astro project.
We have 2 different kinds of
.astro files: pages and components.
Pages are anything that’s associated with a route, like
Components are anything that’s used by those pages, to abstract or extract common code.
We put pages in
src/pages and components in
src/components. And as usual, we have a
public folder for anything that needs to be accessed directly, like images or other assets.
.astro file, things are organized in a way that’s.. quite novel.
But I don’t want to spoil too much, we’ll see that in the next blog post, as this is the start of a short series on Astro.
Here are the posts in the Astro series:
- Astro Components
- Building composable layouts in Astro
- Astro Props
- Moving a simple site to Astro
- Fetching data from the network in Astro