Awesome Astro

Curated resources on building sites with Astro, a brand new way to build static and server rendered sites, with cross-framework components, styling and reactive store support. If you appreciate the content 📖, support projects visibility, give 👍| ⭐| 👏.

Astro is super duper new, improving, and becoming more expressive + powerful, but few of the APIs are still evolving. This page aspires to collect all the valauble references out there, and be a useful go-to resource when astro hits it's first stable version.

Official Docs | Launch a new project , or use Code Sandbox

✍️ Blogs

Look for NEW against the post titles to find the blogs published after Astro 1.0

• Introducing Astro: Ship Less JavaScript - Fred K. Schott
• A Look at Building with Astro - Chris Coyier
• Thoughts on Astro - Chris Coyier
• Our experience with Astro - Georges
• Astro with Netlify CMS, Forestry CMS(re-visited), and Snipcart - Navillus
• How to Use Astro to Build React Apps without JavaScript - Colby Fayock
• Build wicked fast sites with Astro: An Introduction - Cassidy Williams
• A first look at Astro, astronomical results
• Why Astro matters
• SvelteKit to Astro
• Getting Started With Astro — The Innovative Static Site Generator
• Astro Will Become Your Favorite Static Site Generator
• Build a Recipe collection website with Astro - Parts → 1 - 2 - 3 - 4 - 5
• Astro: Build faster apps with less JavaScript
• Series - Learn Astro while building Ink - Get Up & Running
• Series - Learn Astro while building Ink - Astro and Site Structure
• Series - Learn Astro while building Ink - Astro and Data
• Series - Learn Astro while building Ink - Astro and Interactivity
• Series - Learn Astro while building Ink - Astro and Dynamic Pages
• Getting started with Astro
• Migrating from SvelteKit to Astro
• Personal website with Astro, Tailwind CSS, and Nx
• Astro on Cloudflare Workers
• The case about Astro
• Explore the Benefits of Astro.js by Building a Quick App NEW
• Experiments with Astro and the Shared Element Transition API NEW
• Building serverless applications with Fauna + GraphQL + Astro NEW

📹 Videos/Screencasts/Twitch

• Astro just Launched.... Could it be the ultimate web framework?
• Brad Traversy's Astro Crash Course
• What’s New in Astro v1?
• I Try Astro For the First Time!
• Astro and Svelte
• Modern Websites with CSS Cascade Layers and Astro
• The Next Wave of Web Frameworks is BYOJS
• Taking Astro for a ride - portfolio edition

Pre 1.0

• Ship Less JavaScript with Astro - Fredd K. Schott & Jason Lengstorf
• Speakeasy JS – Astro: A New Architecture for the Modern Web - Fred K. Schott (YouTube - Speakeasy JS)
• Astro in 100 Seconds - Jeff Delaney (Fireship)
• Yapping About Astro - Chris Coyier (CSS Tricks)
• Astro FTW! Vue and React can work together in the same app - Jamstack Fridays
• Learning Astro with Nate Moore - Nate Moore (YouTube - React Wednesdays)
• Ship less JS with Astro - Jamstack Training
• Create template layouts for your HTML with Astro SSG - Kevin Powell
• Build faster websites with Astro
• Add comments with Airtable and Netlify
• Grow Community Through Open Source | Fred K. Schott of Astro| The Secret Sauce

🧶 Condensed Thought-pieces (Twitter Threads)

• Georges on Astro as a meta web framework
• Nate Moore on Incremental Framework adoption, Solid.js support, and a future without import React from 'react' for components.
• Matthew Phillips on Astro for Web Components, lit and server-rendered custom elements
• Matthew Phillips on Astro Loading
• Nate Moore on baseline JS bundle size
• Build a landing page in 30 seconds
• Client-side routing experience with Shared Element Transitions API

ℹ️ Repositories/Starter Kits/Components

• Astro-react-vue-demo
• Astro-netlify-starter
• Astro Ink - Crisp, minimal, personal blog theme for Astro
• Astro Me - Crisp, minimal, personal portfolio theme for Astro
• Astro Starter Kit
• Astro Static Tweet
• Astro Translation Example
• Astro Ghost CMS Starter - A Ghost CMS starter for Astro
• Astro Theme - Creek - A Blog theme for Astro
• Astro Theme - Odessey - A marketing website theme built with Astro and carefully crafted for startups and businesses
• Astro Theme - Sarissa Blog - A responsive blog theme for Astro
• Astro Theme - Cactus - Simple, opinionated starter built with the Astro framework for blog or website
• Astro Theme - AstroWind - Started template to make a website using Astro and Tailwind CSS.
• Astro TAP Stack - Opinionated astro starter kit (Typescript & Tailwind + Astro + Prisma & Planet scale)
• Astro Deno Starter
• Astro + Supabase + Vercel
• Astro + Snipcart

Astro Packages/Libraries

• Astro SEO - Better SEO with Astro
• Astro Stylesheet Component - Abstract the monotony of adding stylesheets to any Astro project
• Astro Command - Statically render commands and build components in any language
• Astro Pandoc - Pandoc rendering for Astro
• Astro SPA - The SPA library for Astro that will turn your website into a Single Page Application
• Astro Icon - Straight-forward Icon component for Astro
• Astro ImageTools - Image Optimization tools for the Astro JS framework
• Accessible Astro Components
• Astro Eleventy Image
• Astro Forms - Forms in Astro made easy
• Astro Auto-import - Auto-import components in Astro projects
• Astro Collection - An Astro components and configurations collection
• Astro Link - Detects external / anchor / same domain / mail / telephone href, and apply optimizations accordingly
• Sarissa Pagination - Add page number buttons for pagination. Automatically add and disable numbers as current page number.
• Astro Google Fonts Optimizer - An Astro integration to optimize the Google Fonts loading performance
• Astro SEO Meta - Astro component to add tags that are relevant for search engine optimization (SEO) to your pages.

Astro Integrations

• Astro Content - A text based, structured content manager, for edition and consumption — AstroJS Integration
• @storyblok/astro - Astro module for the Storyblok, Headless CMS
• @unocss/astro - The UnoCSS integration for Astro
• Google Font Optimizer - An Astro integration to optimize the Google Fonts loading performance
• Astro Firebase - Deploy your server-side rendered (SSR) Astro app to Firebase

Built with Astro

• https://astro.build/showcase/ (Official Showcase Directory)
• Designcember
• Serverless(CSS Tricks)
• Trivago - Tech Blog
• Rokt
• Backlight
• Apparently.cz
• Replicant.band
• animerdesateliers.com
• reindeere.ca
• Opensauced
• T3 Tools
• Easybank Landing Page(source)
• Humnutrition
• leosvel.dev
• eriksolsen.com
• hexarolls.com
• jadezak.com
• okikio.dev
• bowling-reference.com
• component-party.dev
• linkhub.online (Source)
• firefla.me
• jmae.xyz
• meteor10
• Astro Hackathon Showcase
• andri.dk/
• alchemycodelab.com
• petar.radojevic.rs
• theuprising.syncore.llc
• coolify.io
• zapp.run
• jamstacker.studio
• openspartan.com/