astro

What is astro?

Astro is a modern static site builder that allows you to build fast, optimized websites using your favorite tools and frameworks. It focuses on delivering a zero-JavaScript runtime by default, making it ideal for performance-focused web projects.

What are astro's main functionalities?

Static Site Generation

Astro allows you to generate static sites with ease. The configuration file specifies the site URL and output directory for the build.

```javascript
// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  site: 'https://example.com',
  build: {
    outDir: 'dist',
  },
});
```

Component Framework Agnostic

Astro supports multiple component frameworks like React, Vue, Svelte, and more. You can use your preferred framework within Astro components.

```jsx
// src/pages/index.astro
---
import React from 'react';
import MyComponent from '../components/MyComponent.jsx';
---

<MyComponent />
```

Markdown Support

Astro has built-in support for Markdown, making it easy to write content for your static site.

```markdown
---
title: 'My Blog Post'
date: '2023-10-01'
---

# Hello, World!

This is a blog post written in Markdown.
```

Partial Hydration

Astro's partial hydration feature allows you to load JavaScript only when necessary, improving performance by reducing the amount of JavaScript sent to the client.

```jsx
// src/components/InteractiveComponent.jsx
import { useState } from 'react';

export default function InteractiveComponent() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

// src/pages/index.astro
---
import InteractiveComponent from '../components/InteractiveComponent.jsx';
---

<InteractiveComponent client:load />
```

Other packages similar to astro

next

Next.js is a popular React framework for building server-side rendered and static web applications. It offers a rich set of features like API routes, dynamic routing, and built-in CSS support. Compared to Astro, Next.js is more focused on server-side rendering and full-stack capabilities.

gatsby

Gatsby is a React-based framework for building static sites and apps. It emphasizes performance and scalability, offering a rich plugin ecosystem and GraphQL data layer. While Gatsby is similar to Astro in terms of static site generation, it is more tightly coupled with React and has a steeper learning curve.

eleventy

Eleventy is a simpler static site generator that focuses on flexibility and minimalism. It supports multiple templating languages and is highly configurable. Unlike Astro, Eleventy does not have built-in support for modern JavaScript frameworks like React or Vue.

README

Astro is the all-in-one web framework designed for speed.
Pull your content from anywhere and deploy everywhere, all powered by your favorite UI components and libraries.

Install

# Recommended!
npm create astro@latest

# Manual:
npm install --save-dev astro

Looking for help? Start with our Getting Started guide.

Looking for quick examples? Open a starter project right in your browser.

Documentation

Visit our official documentation.

Support

Having trouble? Get help in the official Astro Discord.

Contributing

New contributors welcome! Check out our Contributors Guide for help getting started.

Join us on Discord to meet other contributors. We'll help you get your first contribution in no time!

Sponsors

Astro is generously supported by Vercel, storyblok, and several other amazing organizations listed here.

❤️ Sponsor Astro! ❤️