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 a fresh but familiar approach to building websites. Astro combines decades of proven performance best practices with the DX improvements of the component-oriented era. Use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScript—by default.

Announcement Post →

Full Documentation Site →

Project Status

⚠️ Astro is still an early beta, missing features and bugs are to be expected! If you can stomach it, then Astro-built sites are production ready and several production websites built with Astro already exist in the wild. We will update this note once we get closer to a stable, v1.0 release.

Quick Start

# get started with astro in 3 easy steps:
mkdir new-project-directory
cd new-project-directory
npm init astro

Full Documentation Site →