BeginnerAstro45 menit10 Jun 2026

Ship Situs Astro Pertamamu

Dari nol ke situs statis ter-deploy dalam 45 menit — content collections, islands, dan mental model yang bikin Astro 'klik'.

Kenapa Astro

Astro secara default ship zero JavaScript. Kontenmu di-render ke HTML biasa di server, dan island interaktif hanya di-hydrate di tempat yang kamu minta. Untuk situs personal yang padat konten — blog, research, galeri — itu trade-off yang pas.

Jalur 45 menit

  1. npm create astro@latest — pilih template blog, TypeScript strict.
  2. Definisikan content collection di src/content.config.ts dengan zod schema.
  3. Tulis post .mdx pertamamu — frontmatter divalidasi saat build.
  4. Tambahkan halaman [slug].astro dengan getStaticPaths() + render().
  5. Deploy: astro build menghasilkan dist/ yang sepenuhnya statis, bisa di-host di mana saja.

Islands: bagian yang sering dilewatkan

<Hero client:load />        <!-- hydrate langsung -->
<Chart client:visible />    <!-- hydrate saat ke-scroll -->
<Comments client:idle />    <!-- hydrate saat browser idle -->

Pakai client:visible untuk apa pun di bawah fold. Skor Lighthouse-mu akan berterima kasih.

Selanjutnya apa

Tambahkan i18n dengan route dinamis [locale] — itu pelajaran terpisah.

Tutorial