Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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.
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 />
```
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 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 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.
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.
With Astro, you can use your favorite JavaScript framework and automatically ship the bare-minimum amount of JavaScriptβby default, it's none at all!
npm init astro ./my-astro-project
# then... cd => install => start
cd ./my-astro-project
npm install
npm start
The default Astro project has the following scripts
in the /package.json
file:
{
"scripts": {
"start": "astro dev .",
"build": "astro build ."
}
}
For local development, run:
npm run start
To build for production, run the following command:
npm run build
To deploy your Astro site to production, upload the contents of /dist
to your favorite static site host.
Even though nearly-everything is configurable, we recommend starting out by creating an src/
folder in your project with the following structure:
βββ src/
β βββ components/
β βββ pages/
β βββ index.astro
βββ public/
βββ package.json
src/components/*
: where your reusable components go. You can place these anywhere, but we recommend a single folder to keep them organized.src/pages/*
: this is a special folder where your routing lives.Routing happens in src/pages/*
. Every .astro
or .md
file in this folder corresponds with a public URL. For example:
Local file | Public URL |
---|---|
src/pages/index.astro | /index.html |
src/pages/post/my-blog-post.md | /post/my-blog-post/index.html |
Static assets should be placed in a public/
folder in your project. You can place any images, fonts, files, or global CSS in here you need to reference.
Astro introduces a special .astro
format, which combines the best of HTML with the best of JavaScript.
To learn more about .astro
files, read our complete Syntax Guide.
Spend less time configuring your tooling and more time writing content. Astro has phenomenal Markdown support (powered by remark
) baked in!
Not only can you use local .md
files as pages, but Astro also comes with a <Markdown>
component to turn every page into a Markdown file. Using the <Markdown>
component in an .astro
file should feel very similar to MDX, but with the ability to use components from any framework (with partial hydration, too)!
To learn more about use Markdown in Astro, read our Markdown Guide.
TODO: Astro dynamic components guide
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 />
will render an HTML-only version of MyComponent
(default)<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 viewportFrontend state management depends on your framework of choice. Below is a list of popular frontend state management libraries, and their current support with Astro.
Our goal is to support all popular state management libraries, as long as there is no technical reason that we cannot.
react-redux
support requires the ability to set a custom <Provider>
wrapper to every component island. Planned.)vuex
support requires the ability to set a custom vue.use(store)
call to every component island. Planned.)Are we missing your favorite state management library? Add it to the list above in a PR (or create an issue)!
Styling in Astro is meant to be as flexible as youβd like it to be! The following options are all supported:
Framework | Global CSS | Scoped CSS | CSS Modules |
---|---|---|---|
Astro (.astro ) | β | β | N/AΒΉ |
React / Preact | β | β | β |
Vue | β | β | β |
Svelte | β | β | β |
ΒΉ .astro
files have no runtime, therefore Scoped CSS takes the place of CSS Modules (styles are still scoped to components, but donβt need dynamic values)
To learn more about writing styles in Astro, see our Styling Guide.
π Styling
Fetching data is what Astro is all about! Whether your data lives remotely in an API or in your local project, Astro has got you covered.
For fetching from a remote API, use a native JavaScript fetch()
(docs) as you are used to. For fetching local content, use Astro.fetchContent()
(docs).
// src/components/MyComponent.Astro
---
// Example 1: fetch remote data from your own API
const remoteData = await fetch('https://api.mysite.com/v1/people').then((res) => res.json());
// Example 2: load local markdown files
const localData = Astro.fetchContent('../post/*.md');
---
Astro will automatically create a /sitemap.xml
for you for SEO! Be sure to set buildOptions.site
in your Astro config so the URLs can be generated properly.
β οΈ Note that Astro wonβt inject this into your HTML for you! Youβll have to add the tag yourself in your <head>
on all pages that need it:
<link rel="sitemap" href="/sitemap.xml" />
Fetching data is easy in Astro. But what if you wanted to make a paginated blog? What if you wanted an easy way to sort data, or filter data based on part of the URL? Or generate an RSS 2.0 feed? When you need something a little more powerful than simple data fetching, Astroβs Collections API may be what you need.
π Collections API
Using Astro components in your project allows you to break up your pages into small reuseable units of functionality. If you want to share your Astro components you can do so by publishing them to npm.
π Publishing Astro components guide
Configuration for Astro is done through the astro.config.mjs
file at the root of your project. To learn more:
π astro.config.mjs
Reference
Astro uses Snowpack for module resolution. You can configure Snowpack by adding a snowpack.config.mjs
file in the root of your project. You might need this to add loader plugins, for example. To learn more:
π snowpack.config.mjs
Reference
Astro is able to render React, Svelte, Vue, and Preact components out of the box. If you'd like to add support for another framework, you can build a renderer plugin using the same interface as Astro's official renderers.
π Renderer Docs
π Full API Reference
π Command Line Docs
π Dev Server Docs
FAQs
Astro is a modern site builder with web best practices, performance, and DX front-of-mind.
The npm package astro receives a total of 244,759 weekly downloads. As such, astro popularity was classified as popular.
We found that astro demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago.Β It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.