Astro is a website-building tool that makes your website load super fast. It does this by sending very little code (JavaScript) to your visitor's browser. Think of your website like a newspaper: Astro makes most of the page like printed text, and only adds the fancy interactive parts where you really need them.

Table of contents

1. Why Astro ?

   1. Astro's Strengths: A Blend of the Best

2. How to get started with Astro ?

3. Understanding Astro structure

   1. File structure
   2. Modifying the Structure
   3. Things to note

4. Conclusion

Why Astro ?

The world of static site generators (SSGs) offers a wealth of choices, with established players like Jekyll, Eleventy, Gatsby, Hugo, and NextJS dominating the landscape. Yet, a newcomer named Astro is rapidly gaining traction, garnering attention and enthusiasm within the development community.

Astro's Strengths: A Blend of the Best

Astro cleverly integrates the most desirable aspects of these popular frameworks:

Jekyll-like Simplicity: Mimicking Jekyll's intuitive approach, Astro allows you to effortlessly transform Markdown files into polished web pages. This streamlined process fosters a content-first development experience.

Gatsby-inspired Reactivity: Astro, like Gatsby, is rooted in React. This empowers you to incorporate dynamic, interactive React components seamlessly throughout your site, enhancing user engagement.

Performance by Design: Astro prioritizes lightning-fast performance. Its unique "islands architecture" intelligently hydrates only the necessary JavaScript components, minimizing the JavaScript burden and leading to exceptional Core Web Vitals scores.

Framework Flexibility: Astro offers remarkable flexibility by being framework-agnostic. Bring your preferred tools—React, Svelte, Vue, or others—and integrate them effortlessly into your Astro projects.

Growing Community: Astro is supported by a vibrant and expanding community of developers, ensuring ongoing support, resources, and a rich ecosystem of plugins and integrations.

How to get started with Astro ?

You can host Astro based site on Vercel for free. It is very simple. Visit the official theme gallery here. Every theme here has instructions to deploy that theme on Vercel. Often this is as simple as pressing a button on the github repository that says "Deploy to Vercel".

For example you can take this astro theme.

Understanding Astro structure

File structure

• src/: The core of your Astro project. Contains:
  • components/: Houses reusable Astro components (files with the .astro extension).
  • pages/: The .astro files defining your website's individual pages. Your site's routes are derived from their file and directory names.
  • layouts/: Holds Astro layouts (.astro), which provide reusable structural templates.
• public/: Stores unprocessed assets (e.g., images, fonts, videos). Its contents are directly copied into the final build.
• astro.config.mjs: Astro's configuration file, where you customize its behavior and manage integrations.
• package.json: The project's manifest file, listing dependencies and scripts.
• tsconfig.json (optional): If you're using TypeScript, this is where your TS configuration lives.

Modifying the Structure

• Creating Pages: Add a new .astro file inside src/pages. The file's name determines its route (e.g., src/pages/blog.astro creates a page at the /blog URL).
• Creating Components: Place new .astro files within src/components. You can use these within pages or even other components.
• Adding Layouts: To define reusable page structures, create new .astro files inside src/layouts.
• Managing Assets: Put static assets in public. Use relative paths (e.g., <img src="/images/my-picture.jpg">) in your Astro files to reference them.

Things to note

• Astro Components: The basic building blocks, represented by .astro files. They combine HTML, Astro's special template syntax, and optionally JavaScript within a <script> tag.
• Routing: Astro automatically determines routes based on the file structure within src/pages.
• Frontmatter: The section at the top of an .astro file, enclosed by --- delimiters. This is used to set metadata, import components, and more.

Conclusion

Astro is as good choice as any for a static site generator. It is modern, react based, expressive and has very good community support and a wide variety of very modern themes from which you can start.