DEV Community

Kunal
Kunal

Posted on

My Experience with AstroJS

I wanted to migrate my site to something simpler from Gatsby. Gatsby uses a ton of configuration files and maintaining GraphQL queries for a simple blog doesn't make much sense.

I wanted support for markdown everywhere and less config for running TailwindCSS.

I tried out NextJS & Eleventy.

NextJS seems like a very heavy framework for maintaining a simple blog.

And, I found Eleventy hard to configure for things beyond the suggested path. Plus, the starter projects didn't seem very helpful for my use case.

I remembered seeing Astro a few months back and thought I'd try it out.

Astro has a great site for starter templates. I could just go and see the live version with code. I checked out both it's Tailwind & Markdown starters and they had minimal config compared to other frameworks.

Astro supports Markdown out of the box. But what I really liked is how easy it makes importing markdown in templates. You can write text in Markdown and import it like a component.

import { Content as About} from '../snippets/about.md';
Enter fullscreen mode Exit fullscreen mode

Even Syntax Highlighting works out of the box.

With a lot of other templating frameworks, you need to install third-party extensions for formatting and syntax highlighting in your editor which don't work properly every-time. But turns out, Astro has official extensions for VSCode (the editor I use) and a few other platforms too.

Astro also supports using vanilla JS for dynamic HTML which seems great coming from the React ecosystem.

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul> {items.map((item) => (<li>{item}</li>) )} </ul>
Enter fullscreen mode Exit fullscreen mode

Overall, I had a really great experience with Astro.

Note:

Examples have been adapted from the AstroJS Docs site.

Astro is relatively new compared to other frameworks & I just wanted to make a simple blog with it. It might not be stable for more use-cases yet.

Discussion (0)