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
To configure Astro, add a astro.config.mjs
file in the root of your project. All of the options can be omitted. Here are the defaults:
export default {
/** Where to resolve all URLs relative to. Useful if you have a monorepo project. */
projectRoot: '.',
/** Path to Astro components, pages, and data */
astroRoot: './astro',
/** When running `astro build`, path to final static output */
dist: './_site',
/** A folder of static files Astro will copy to the root. Useful for favicons, images, and other files that don‘t need processing. */
public: './public',
/** Extension-specific handlings */
extensions: {
/** Set this to "preact" or "react" to determine what *.jsx files should load */
'.jsx': 'react',
},
};
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 renderMyComponent
on page loadMyComponent:idle
will userequestIdleCallback
to renderMyComponent
as soon as main thread is freeMyComponent:visible
will use anIntersectionObserver
to renderMyComponent
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
extensionlang="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.
Astro can be configured to use Tailwind easily! Install the dependencies:
npm install @tailwindcss/jit tailwindcss
And also create a tailwind.config.js
in your project root:
module.exports = {
// your options here
}
Note: a Tailwind config file is currently required to enable Tailwind in Astro, even if you use the default options.
Then write Tailwind in your project just like you‘re used to:
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
</style>
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.