**Astro** adalah framework web modern yang dirancang untuk membangun website yang sangat cepat. Astro mengambil pendekatan yang unik dibandingkan framework lain seperti React atau Next.js dengan mengirimkan **Nol JavaScript (Zero JS)** ke browser secara default. Dalam tutorial ini, kita akan belajar cara menginstal Astro, memahami struktur proyeknya, dan membuat halaman web pertama Anda.

Mengapa Memilih Astro?

1. **Zero JavaScript by Default:** Astro merender halaman Anda menjadi HTML statis murni di server. Ini berarti waktu muat yang jauh lebih cepat.
2. **Astro Islands:** Jika Anda butuh interaktivitas (seperti tombol like atau slider), Anda dapat menyisipkan komponen interaktif (React, Vue, Svelte, dll.) hanya di bagian yang membutuhkan.
3. **Agnostik Framework:** Anda bisa menggunakan komponen UI dari framework favorit Anda (React, Vue, Svelte, Solid, atau Preact) di dalam satu proyek Astro.

Prasyarat

Sebelum memulai, pastikan Anda telah menginstal: * **Node.js** (versi 18.14.1 atau lebih baru). * Code editor seperti **Visual Studio Code**. * Terminal / Command Prompt.

Langkah 1: Membuat Proyek Astro Baru

Buka terminal Anda dan jalankan perintah berikut untuk menginisialisasi proyek Astro baru menggunakan *create-astro* wizard: ```bash npm create astro@latest

``` Ikuti instruksi di layar:

1. **Where should we create your new project?** Ketik nama folder, misalnya ./proyek-astro-saya.
2. **How would you like to start your new project?** Pilih Include sample files untuk kemudahan belajar.
3. **Install dependencies?** Pilih Yes.
4. **Do you plan to write TypeScript?** Anda bisa memilih Yes atau No (dalam tutorial ini, kita asumsikan menggunakan JavaScript/TypeScript dasar). Setelah proses selesai, masuk ke direktori proyek Anda: ```bash cd proyek-astro-saya

``` Jalankan server pengembangan: ```bash npm run dev

``` Buka browser dan akses http://localhost:4321. Anda akan melihat halaman selamat datang dari Astro!

Langkah 2: Memahami Struktur Proyek

Buka proyek Anda di code editor. Berikut adalah struktur folder utama yang perlu Anda ketahui: * src/: Tempat Anda akan menulis sebagian besar kode. * src/pages/: Setiap file .astro atau .md di sini akan otomatis menjadi sebuah rute (halaman) di website Anda (contoh: src/pages/about.astro menjadi /about). * src/components/: Tempat menyimpan komponen-komponen UI yang bisa digunakan kembali (seperti Header, Footer, Tombol). * public/: Direktori untuk file statis seperti gambar, font, atau favicon.svg. File di sini tidak akan diproses oleh Astro. * astro.config.mjs: File konfigurasi utama proyek Astro Anda.

Langkah 3: Membuat Halaman Baru

Mari kita buat halaman “Tentang Kami”. Buat file baru bernama about.astro di dalam folder src/pages/. ```astro

// Bagian Frontmatter: Kode JavaScript/TypeScript di sini hanya berjalan di server (saat build). // Tidak akan dikirim ke browser! const pageTitle = “Tentang Kami”;

{pageTitle}

Selamat datang di halaman tentang kami. Kami sedang belajar menggunakan Astro!

``` Simpan file tersebut, lalu buka http://localhost:4321/about di browser. Halaman baru Anda sudah langsung bisa diakses!

Langkah 4: Membuat dan Menggunakan Komponen

Salah satu kekuatan utama Astro adalah kemampuannya membuat komponen UI. Mari kita buat komponen navigasi sederhana. Buat file baru bernama Navigasi.astro di dalam folder src/components/. ```astro

// src/components/Navigasi.astro

``` Sekarang, mari kita gunakan komponen ini di halaman about.astro yang tadi kita buat. Ubah file src/pages/about.astro menjadi seperti ini: ```astro

// Impor komponen yang baru dibuat import Navigasi from ’../components/Navigasi.astro’;

const pageTitle = “Tentang Kami”;

<h1>{pageTitle}</h1>
<p>Selamat datang di halaman tentang kami. Kami sedang belajar menggunakan Astro!</p>

<Card 
  judul="Kenapa Belajar Astro?" 
  deskripsi="Karena Astro sangat cepat dan menyenangkan untuk digunakan." 
/>

<Card 
  judul="Framework Agnostik" 
  deskripsi="Anda bisa menggunakan React, Vue, atau Svelte di dalam Astro." 
/>