📁 zero konfiguracji
Routing oparty na plikach
Każdy plik .astro lub .md w src/pages/ staje się stroną. Ten plik to src/pages/index.astro → /.
Astro v6.2.1
Demo możliwości Astro
Framework do budowania szybkich, treściwych stron. Zero JavaScript domyślnie — interaktywność dodajesz tylko tam, gdzie jej potrzebujesz. Teraz na dev.boczar.net
⏱ Strona zbudowana: 30 kwi 2026, 22:21
Kluczowe funkcje frameworka
🧩 składnia
Komponenty .astro
Blok frontmatter (---) to JS/TS wykonywany na serwerze. Poniżej — szablony HTML z wyrażeniami {}.
🎁 kompozycja
Layouty i sloty
Reużywalne opakowania stron z <slot />. Strona /about używa też nazwanego slotu <slot name="head" />.
🎨 style
Scoped CSS
Style w <style> są automatycznie scopowane do komponentu — nie "wyciekają" na inne elementy strony.
🔷 typowanie
Props z TypeScript
Komponenty deklarują interface Props {}. Pełne wsparcie TypeScript — błędy wykrywane podczas budowania.
⚡ interakcja
Skrypty klienckie
Tagi <script> są bundlowane przez Vite i uruchamiane w przeglądarce. Niżej liczniki jako przykład.
📝 content
Markdown jako strony
Pliki .md w src/pages/ są renderowane jako strony HTML. Obsługują frontmatter i własne layouty.
🔍 vite
import.meta.glob()
Importuj wiele plików jednocześnie wzorcem glob. Blog /blog używa tego do listowania postów.
🚀 wydajność
SSG domyślnie
Statyczny HTML generowany w czasie budowania — błyskawiczne ładowanie, zero JS po stronie serwera.
Interaktywność: <script> w Astro
Poniższe liczniki działają dzięki czystemu JavaScript w tagu <script>
komponentu Counter.astro. Dwie niezależne instancje — każda zarządza własnym stanem.
Licznik A
Licznik B
Strony w tym projekcie
/ src/pages/index.astro Komponenty, routing, skrypty /blog src/pages/blog/index.astro import.meta.glob() — listing postów /blog/witaj-w-astro src/pages/blog/witaj-w-astro.md Post Markdown z layoutemaa /blog/routing-w-astro src/pages/blog/routing-w-astro.md Post Markdown z layoutem /blog/komponenty src/pages/blog/komponenty.md Post Markdown z layoutem /about src/pages/about.astro Named slots, slot name="head"