Dhairya Shah
Dhairya Shah's Blog

Dhairya Shah's Blog

Getting started with Astro

Getting started with Astro

Dhairya Shah's photo
Dhairya Shah
·Aug 6, 2022·

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Play this article

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:

  • It seems very simple, and most of us love simple things
  • It generates static sites without having to worry about server management.
  • It prioritizes site performance by sending as little Javascript as possible to the client.

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!

 
Share this