Astro Website Build Tool
repository·main·Indexed 13 days ago
https://github.com/withastro/astroA modern website build tool designed for a powerful developer experience and high-performance output. Astro supports multiple UI frameworks including React, Preact, Svelte, Vue, and Solid.js, and provides various project templates for blogs, component libraries, and advanced routing using SSR.
What's inside Astro
- Starlog is a release notes theme built specifically for Astro. It is designed to showcase release notes and supports both light and dark modes. The theme is implemented using Astro and Sass.
Overview of Astro Assets
mainThe Astro Assets system is responsible for optimizing images and managing how they are served across different Astro execution modes, including Static Site Generation (SSG), Server-Side Rendering (SSR), development mode, and production builds. It provides the underlying logic for image processing and asset delivery.What is vite-plugin-scripts?
mainvite-plugin-scriptsis an internal utility used by Astro to resolve and load custom scripts. It handles scripts that are either explicitly defined by Astro or injected into the build process by various Astro integrations.Use Vue 3 components in Astro with @astrojs/vue
mainThe@astrojs/vueintegration allows you to use Vue 3 components within an Astro project. It enables both server-side rendering (SSR) and client-side hydration, allowing your Vue components to be interactive on the client while benefiting from Astro's performance-oriented architecture.Add Markdown support to Vite with vite-plugin-markdown
mainThevite-plugin-markdownplugin enables Vite to process and support.mdfiles within your project. This allows you to import Markdown files directly into your JavaScript/TypeScript modules, treating them as part of your application's dependency graph.Use MDX in Astro with @astrojs/mdx
mainThe@astrojs/mdxintegration allows you to use MDX components within your Astro project and create pages using the.mdxfile extension. This enables you to combine the power of Markdown with the flexibility of JSX/Astro components.Use SolidJS in Astro with @astrojs/solid-js
mainThe
@astrojs/solid-jsintegration allows you to use SolidJS components within an Astro project. It enables both server-side rendering (SSR) and client-side hydration, allowing your SolidJS components to be interactive on the client while benefiting from Astro's performance on the server.To use this integration, you must follow the standard Astro integration setup process, which typically involves adding the package to your project and registering it in your
astro.config.mjsfile.// Example of how an integration is typically added to astro.config.mjs import { defineConfig } from 'astro/config'; import solidJs from '@astrojs/solid-js'; export default defineConfig({ integrations: [solidJs()], });Use Markdoc with Astro via @astrojs/markdoc
mainThe
@astrojs/markdocintegration (currently experimental) allows you to use Markdoc within an Astro project. This enables you to create components, pages, and content collection entries using Markdoc syntax instead of standard Markdown or MDX.To use this integration, you must follow the official integration guide to install and configure it in your
astro.config.mjsfile. Detailed setup instructions and usage patterns can be found in the official documentation.Use @astrojs/cloudflare for Cloudflare Workers SSR
mainThe@astrojs/cloudflareadapter enables Server-Side Rendering (SSR) for Astro projects targeting Cloudflare Workers. It allows you to write your application using Astro and JavaScript and deploy it directly to the Cloudflare Workers runtime.Use the @astrojs/node adapter for SSR deployment
mainThe
@astrojs/nodeadapter enables Astro to deploy Server-Side Rendered (SSR) sites to Node.js environments. This allows your Astro project to run on any server or platform that supports a Node.js runtime.To use this adapter, you must configure your Astro project to use
output: 'server'oroutput: 'hybrid'in yourastro.config.mjsfile and then add the Node adapter.// astro.config.mjs import { defineConfig } from 'astro/config'; import node from '@astrojs/node'; export default defineConfig({ output: 'server', adapter: node({ mode: 'standalone', }), });Use @astrojs/partytown to enable Partytown in Astro
mainThe
@astrojs/partytownintegration allows you to use Partytown within an Astro project. Partytown enables you to offload intensive third-party scripts to a web worker, improving main thread performance and site speed.For detailed setup instructions and configuration options, refer to the official Astro Partytown documentation.
Add .astro support to Vite with vite-plugin-astro
mainThevite-plugin-astroplugin enables Vite to process and understand.astrofiles. This is the core mechanism that allows Astro to leverage Vite's build pipeline and development server for handling Astro components.