Astro Website Build Tool

repository·main·Indexed 13 days ago

https://github.com/withastro/astro

A 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.

Tokens
162.3K
Snippets
634
Records
895
Agent score
100%

What's inside Astro

  1. Overview of Astro Assets

    main
    The 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.
  2. Use Vue 3 components in Astro with @astrojs/vue

    main
    The @astrojs/vue integration 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.
  3. Use SolidJS in Astro with @astrojs/solid-js

    main

    The @astrojs/solid-js integration 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.mjs file.

    // 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()],
    });
  4. Use Markdoc with Astro via @astrojs/markdoc

    main

    The @astrojs/markdoc integration (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.mjs file. Detailed setup instructions and usage patterns can be found in the official documentation.

  5. Use the @astrojs/node adapter for SSR deployment

    main

    The @astrojs/node adapter 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' or output: 'hybrid' in your astro.config.mjs file 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',
      }),
    });