Introduction to Astro

Wel­come to the Astro Quick-Start Guide!

In this course, we will learn the fun­da­men­tals of Astro and how to use Craft CMS as the con­tent source in a head­less Craft CMS setup.

Before we jump in, let’s set the table on what Astro is and how it works. Dur­ing the course, we’ll cov­er build­ing a site with Astro step-by-step; but let’s review Astro.

Astro is a mod­ern, JS-based frame­work with a mis­sion to build fast, con­tent web­sites. What makes it dif­fer­ent than oth­er frame­works is that it is a mul­ti-page app (or MPA) frame­work. Astro isn’t the only MPA frame­work out there, but you’re prob­a­bly used to them using some serv­er-side lan­guage like PHP. Astro is just HTML, CSS, and JavaScript.

But with Astro you don’t ship any JavaScript; it’s only used for the build, and the out­put from Astro is a sta­t­ic site. How­ev­er, if you want to use JavaScript to hydrate part of your tem­plates dynam­i­cal­ly, you can do that, too. 

Astro also lets you BYOF or ​“Bring Your Own Frame­work.” You can use React, Svelte, Vue, or any mod­ern JS frame­work you’re com­fort­able with. 

But the best thing about Astro, espe­cial­ly for devel­op­ers used to work­ing in Craft CMS, is that it is approach­able and straight­for­ward. The tool­ing isn’t com­plex (built on Vite), and the tem­plat­ing via Astro Com­po­nents can be as sim­ple as you want. The abil­i­ty to choose your con­tent course (from Mark­down to GraphQL) makes it flex­i­ble and the first JavaScript frame­work you should try if you haven’t used one before.

That being said, Astro isn’t a ​“sprin­kle frame­work” like petite-vue or Alpine.js. We’re not using it to add reac­tiv­i­ty to our site or appli­ca­tion pages. Instead, we’re using Astro to build an entire site, ship­ping zero or near-zero JavaScript and hav­ing an enjoy­able devel­op­er expe­ri­ence while we’re doing it.