Hello World, again! I’ve rewritten this website using the Astro web framework. Astro’s very new — it had its 1.0 release just under two months ago. There’s three things that got me excited enough about it to rewrite my whole site.
- JSX. JSX is best known as the templating syntax that powers React. While Astro can integrate with React, Vue, Svelte, or any other framework from a growing list ,
.astrotemplates are written with a mix of TypeScript and JSX and are rendered directly to vanilla HTML with no JavaScript at runtime. TypeScript is written in a preamble section that looks similar to Markdown frontmatter and sets up the scope for the rest of the template. I found Hugo’s templating system that is built directly on Go’s templating library to be very limiting by contrast. At this point, I definitely believe the adage that “any powerful templating language eventually grows into an awkward programming language” — I’d much rather use a full programming language as my templating language. - Scoped CSS. CSS written in
.astrotemplates are scoped to that template only. I’m not a fan of dogmatic separation of concerns in CSS. I also don’t have much experience with Tailwind, and I enjoy writing SCSS. So scoped styles in all my templates is a happy medium where my styles live close to my templates while I can write in a familiar syntax. - Lightweight. With everything from archetypes to taxonomies, Hugo is really a static CMS more than a blog generator. It’s a much more general system than I need. Astro is a bit “closer to the metal” in that respect. When I’ve had to write some helpers that I took for granted in Hugo, writing custom helpers is much easier since it can be accomplished in a few lines of Typescript.