Pengenalan Astro

Astro adalah builder situs statis modern yang menghadirkan performa sangat cepat dengan pengalaman developer yang modern. Berbeda dengan framework JavaScript tradisional, Astro tidak mengirim JavaScript secara default, menghasilkan waktu muat halaman yang sangat cepat.

Mengapa Memilih Astro?

**Zero JavaScript secara default**: Astro menghilangkan JavaScript yang tidak digunakan, hanya mengirim HTML dan CSS

**Framework agnostik**: Gunakan React, Vue, Svelte, atau framework lain yang Anda sukai

**Arsitektur Islands**: Komponen interaktif hanya hidrasi saat diperlukan

**Fokus konten**: Sempurna untuk blog, dokumentasi, dan situs portofolio

Menyiapkan Proyek Pertama Anda

Memulai dengan Astro sangat mudah. Buka terminal Anda dan jalankan:

```bash

npm create astro@latest blog-saya

cd blog-saya

npm run dev

```

Ini akan membuat scaffold proyek Astro baru dengan semua file dan konfigurasi penting.

Struktur Proyek

```

blog-saya/

├── src/

│ ├── components/

│ ├── layouts/

│ ├── pages/

│ └── styles/

├── public/

├── astro.config.mjs

└── package.json

```

Membuat Halaman Pertama Anda

Astro menggunakan routing berbasis file. Buat file di direktori `src/pages/`, dan secara otomatis menjadi route:

```astro

---

// src/pages/index.astro

import Layout from '../layouts/Layout.astro'

const title = "Blog Astro Pertama Saya"

---

Selamat Datang di Blog Saya

Ini adalah halaman Astro pertama saya!

```

Bekerja dengan Komponen

Komponen Astro adalah unit UI yang dapat digunakan ulang. Berikut cara membuat komponen kartu blog:

```astro

---

// src/components/BlogCard.astro

interface Props {

title: string

excerpt: string

date: string

}

const { title, excerpt, date } = Astro.props

---

{title}

{excerpt}

{date}

```

Deploy Situs Anda

Situs Astro dapat di-deploy ke berbagai platform:

**Vercel**: `npm run build` menghasilkan file statis

**Netlify**: Drag and drop folder `dist/`

**GitHub Pages**: Gunakan GitHub Actions untuk deployment otomatis

Kesimpulan

Astro memberikan keseimbangan yang sangat baik antara pengalaman developer dan performa. Dengan mengirim lebih sedikit JavaScript dan fokus pada konten, website Anda memuat lebih cepat dan memberikan pengalaman pengguna yang lebih baik.

Mulai bangun dengan Astro hari ini dan rasakan perbedaannya!