# Astro | | url:: [Astro](https://astro.build/) | | --- | ----------------------------------- | ## Concepts - Fast like some SSGs, normally only needing to deploy static assets, so compatible with edge deployments like [[Cloudflare]] - Normally, deploys static html (zero js by default) but can use javascript when needed with directives - client:idle - etc. - Server-first design in order to minimize hydration off of user devices - js works via the island architecture, contra, e.g. SPAs where the javascript is run holistically. - Frontend framework agnostic - you can write components in any framework you want: - [[React]] - [[Svelte]] - [[Solid.js]] - [[Vue.js]] - etc. ## Architecture - [Project Structure 🚀 Astro Documentation](https://docs.astro.build/en/core-concepts/project-structure/) - [Configuring Astro (astro.config.mjs)](https://docs.astro.build/en/guides/configuring-astro/) ### Content Collections - [Content Collections 🚀 Astro Documentation](https://docs.astro.build/en/guides/content-collections/) ### Island Architecture (Astro Islands) ### Astro Components ## Astro Templates ### Theme Sites - [Themes | Astro](https://astro.build/themes/) ### Themes - [onwidget/astrowind: 🚀 A template to make your website using Astro + Tailwind CSS.](https://github.com/onwidget/astrowind) - [hellotham/hello-astro: Hello Astro is a full featured Astro corporate/marketing/blog starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.](https://github.com/hellotham/hello-astro) - https://github.com/m6v3l9/astro-theme-stone - https://astro.build/themes/details/foxi/ - [ixartz/Astro-boilerplate: 🚀 Astro boilerplate with responsive blog and portfolio template using TypeScript and React styled with Tailwind CSS ⚡️ Made with developer experience first: TypeScript + ESLint + Prettier + Husky + Lint-Staged + Commitlint + VSCode](https://github.com/ixartz/Astro-boilerplate) - [littlesticksdev/odyssey-theme: A modern business marketing website theme/starter built with Astro](https://github.com/littlesticksdev/odyssey-theme) - [mhyfritz/astro-landing-page: An Astro + Tailwind CSS Example/Template for Landing Pages](https://github.com/mhyfritz/astro-landing-page) - https://astro.build/themes/details/agency-theme/ - https://cosmicthemes.com/themes/ (multiple paid) - https://lexingtonthemes.com/ (multiple paid) - https://github.com/mearashadowfax/ScrewFast - https://github.com/surjithctly/astroship - https://themefisher.com/products/pinwheel-astro?ref=astrobuild - https://astro.build/themes/details/prima-persona/ - https://fitness-astro-template.netlify.app/ - https://astro.build/themes/details/positivus/ - https://astro.build/themes/details/sofidev-garrux-portfolio-template/ #### Portfolio/CV - https://astro.build/themes/details/bento-like-portfolio/ - [dofbi/astro-cv-theme: CV theme for Astro 🚀](https://github.com/dofbi/astro-cv-theme) #### Evan Harmon - [onwidget/astrowind: 🚀 A template to make your website using Astro + Tailwind CSS.](https://github.com/onwidget/astrowind) #### Sommer Lawn - [hellotham/hello-astro: Hello Astro is a full featured Astro corporate/marketing/blog starter theme written in Typescript and TailwindCSS. It supports Markdown and MDX based pages and blog posts.](https://github.com/hellotham/hello-astro) #### H&M Holiday Lighting - https://github.com/m6v3l9/astro-theme-stone #### Yalla Window Cleaning - [onwidget/astrowind: 🚀 A template to make your website using Astro + Tailwind CSS.](https://github.com/onwidget/astrowind) #### Triplicate Group - https://astro.build/themes/details/positivus/ - https://github.com/m6v3l9/astro-theme-stone - https://astro.build/themes/details/foxi/ #### Contraption Labs ## Integrations - [[Tailwind CSS]] - [[MDX]] ## Icons ### Astro-icon package - [natemoo-re/astro-icon: Inline and sprite-based SVGs in Astro made easy!](https://github.com/natemoo-re/astro-icon#readme) - Search for astro icons here: https://icon-sets.iconify.design ## Tools - [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=astro-build.astro-vscode) ## Sources - [Astro Crash Course - YouTube](https://www.youtube.com/watch?v=Oi9z5gfIHJs) - Tutorial ## Inbox - [[Astro DB]]