Jeroen van Wissen

Javascript Developer & Manager Engineering @ Gracenote Sports

Published
Monday, January 2, 2023
Categories
Tech  JavaScript  Astro.build 

In a search of a simple static html page generator framework I stumbled up on Astro.build

Immediately I liked the simplicity and ease of use. And mostly to be able to extend it with other JavaScript frameworks like React and Svelte (and more..)

And being able to use Markdown files as content base was exactly what I was looking for. No need for a CMS when GIT can take over that role.

My setup

For now, I’m only using Astro.build with Tailwind integration and SASS. I haven’t had the need yet to integrate any other UI Framework yet, but that might come at some point.

My basic setup:

Install & Create and Astro.build project:

npm create [email protected]
npm create astro@latest command output

Add the Tailwind CSS integration:

npx astro add tailwind
npx astro add tailwind command output

Install the SASS package:

npm install -D sass

And now we can start using sass inside .astro files style blocks so that we can apply Tailwind classes to parsed Markdown blocks.

<style lang="scss" is:global>
    h2 {
      @apply text-2xl font-bold text-gray-900;
    }
</style>
npm run dev
npx astro add tailwind command output

Load the link localhost:3000 in your browser and start creating :)

v1.0.8 - © 2023 jeroenvanwissen.nl