dhairyashah
Portfolio

Aug 7th, 2022

Getting started with Astro

Author Picture

Dhairya Shah

Software Engineer

I’ve got to hear about Astro from various places, and I decided to check it out and share it with you.

The problem of creating and managing modern static sites like Hugo, Svelte, Jekyll, and Next.js is a bit difficult to learn. But if you are a simple HTML folk with little Javascript knowledge then Astro will be an interesting thing for you. If you are already familiar with advanced Javascript frameworks like React and Angular, then this will be something great to know about.

While using Astro, I took note of a few of its key focus points:

The most appealing aspect to me is that the Astro is framework agnostic. It is most likely unique in the market and is not dependent on any other Javascript framework. Next.js and Gatsby, on the other hand, rely on frameworks such as React and Vue.

Astro gives the flexibility in creating websites with your favorite frameworks including React, Vue, Svelte, etc.

Astro has an approach toward the More HTML, Less JavaScript

The final build will only be a static HTML site and will not require the browser to run any Javascript libraries.

It’s a great time to start with Astro.

Let’s see how Astro works.

Creating Astro project

Go to your project directory and run

$ npm create astro@latest

Creating Astro Project I will choose basics option Once it finishes, run

$ npm install

and then run,

$ npm run dev

Template starter

Project structure of the Astro Project,

Project structure

To apply syntax highlight to the .astro files, you need this VS Code extension to be installed,

Extension

We put pages inside src/pages and components inside src/components.

There are numerous things that can be done with Astro, but I don’t want to spoil everything in one article. They will be covered in my subsequent articles. Follow my newsletter to be notified when I publish an article.

Follow me on Twitter

Liked my content? Buy me a coffee to fuel my work. Thanks for reading!