Astro
Astro is one of many Static Site Generators (SSG) developers can choose from today.
Concepts
Build faster websites with less client-side Javascript
The general idea of an “Islands” architecture is deceptively simple: render HTML pages on the server, and inject placeholders or slots around highly dynamic regions. These placeholders/slots contain the server-rendered HTML output from their corresponding widget. They denote regions that can then be "hydrated" on the client into small self-contained widgets, reusing their server-rendered initial HTML.
Use Any JavaScript or Framework with Built-in TypeScript Support
- Vanilla JS - FTW!
- React
- Svelte
- Vue
- Solid
By default, zero developer generated JavaScript is shipped to the client. However, a small loader script will be downloaded for all pages.
The loader script allows for hydrating client components as needed and only when they are visible using the intersection observer.
This is an Example Astro Site
The presentation you're viewing was generated using Astro. You can find the source code for it here .
After the next release of Astro (SOON TM), I'll strip all of my own content out and make it available as an OSS project called astro-presents .
Astro Ecosystem
The Astro Discord server is very active with a diverse group of core team and community members. The community has created some great additions to Astro to help make working with Astro even easier. Here are some examples.
- astro.new: A starting point to try out different Astro templates for the current release of Astro
- * astro.new/next: A starting point to try out different Astro templates for the very soon to be released version of Astro
- accessible-astro-components: A set of accessible front-end components for the Astro static site builder
- astro-command: Run commands as Astro components
- astro-ink: Crisp, minimal, personal blog theme for Astro
- astro-katex: Astro Component for rendering LaTex via KaTeX
- astro-meta: Add a title and description to a page
- astro-modal: A modal for use in Astro
- astro-og-image: Open Graph images for Astro sites
- astro-pandoc: Astro component for using pandoc to convert content
- astro-script: A simple script management component for Astro
- astro-seo: Makes it easy to add SEO relevant tags to your Astro app
- astro-spa: An Astro JS component that turns a website into an SPA and boost performance using various techniques
- astro-starter-ghost: A starter template to build lightning fast websites with Ghost and Astro
- Astro-Theme-Creek: A theme for Astro
- AVPlayer
- MediaPlayer
- Stylesheet: Simple component to help abstract the monotony of adding stylesheets to any Astro page
- XElement: Generate any type of specialised Web Component from within Astro from a single interface
- XHooks
- astro-youtube-component: Astro implementation of Lite YouTube Embed
- radix-icons-in-astro: Radix Icons in Astro