A next-generation static-site generator with partial hydration. Use your favorite JS framework and ship bare-minimum JS (or none at all!).

npm install astro

TODO: astro boilerplate

Add a dev npm script to your /package.json file:

{
  "scripts": {
    "dev": "astro dev ."
  }
}

Then run:

npm run dev

By default, Astro outputs zero client-side JS. If you'd like to include an interactive component in the client output, you may use any of the following techniques.

• MyComponent:load will render MyComponent on page load
• MyComponent:idle will use requestIdleCallback to render MyComponent as soon as main thread is free
• MyComponent:visible will use an IntersectionObserver to render MyComponent when the element enters the viewport

If you‘ve used Svelte’s styles before, Astro works almost the same way. In any .astro file, start writing styles in a <style> tag like so:

<style>
.scoped {
  font-weight: bold;
}
</style>

<div class="scoped">I’m a scoped style</div>

Astro also supports Sass out-of-the-box; no configuration needed:

<style lang="scss">
@use "../tokens" as *;

.title {
  color: $color.gray;
}
</style>

<h1 class="title">Title</h1>

Supports:

• lang="scss": load as the .scss extension
• lang="sass": load as the .sass extension (no brackets; indent-style)

We also automatically add browser prefixes using Autoprefixer. By default, Astro loads the default values, but you may also specify your own by placing a Browserslist file in your project root.

Add a build npm script to your /package.json file:

{
  "scripts": {
    "dev": "astro dev .",
    "build": "astro build ."
  }
}

Then run:

npm run build

Now upload the contents of /_site_ to your favorite static site host.