Programowanie statycznych stron z Astro

pt., 10 stycznia 2025 - 1 min read

Astro to rewolucyjny framework do budowania stron statycznych. Pozwala na łączenie różnych frameworków UI (React, Vue, Svelte) i dostarczanie ich jako statycznego HTML.

Dlaczego Astro?

  1. Wydajność: Zero JavaScript domyślnie
  2. Łatwość użytkowania: Składnia podobna do HTML/JavaScript
  3. Elastyczność: Możliwość integracji z ulubionymi narzędziami
  4. Prędkość: Szybki czas budowania i renderowania

Jak zacząć?

Zainstaluj Astro:

npm create astro@latest

Struktura katalogów:

my-blog/
├── src/
│   ├── pages/        # Strony aplikacji
│   ├── layouts/      # Layouty
│   ├── components/   # Komponenty
│   └── content/      # Treść bloga
└── public/           # Pliki statyczne

Content Collections

Astro oferuje potężny system content collections do zarządzania treścią:

const blog = defineCollection({
  loader: glob({ pattern: '**/*.md', base: './src/content/blog' }),
  schema: z.object({
    title: z.string(),
    pubDate: z.coerce.date(),
    description: z.string(),
    // ... więcej pól
  }),
});

Podsumowanie

Astro to doskonały wybór dla blogów i stron wizytówek. Zapewnia najwyższą wydajność przy zachowaniu elastyczności deweloperskiej.

„Astro to przyszłość statycznych stron internetowych.” — Deweloperzy Astro