Astro adalah framework web modern yang memungkinkan Anda membangun website cepat dengan JavaScript minimal. Dalam tutorial ini, kita akan membuat website statis dari awal.

Mengapa Memilih Astro?

Filosofi Astro

Zero JavaScript by default. Astro merender HTML di server dan hanya mengirimkan JavaScript yang benar-benar dibutuhkan untuk interaktivitas. Ini membuat website sangat ringan dan cepat.

Konsep Island Architecture: Validasi Interaktivitas
graph TD
  A["Request Page"] --> B["Server Renders HTML"]
  B --> C{"Interactive?"}
  C -- Yes --> D["Hydrate Island"]
  C -- No --> E["Pure HTML (Zero JS)"]
  style D fill:#d1fae5,stroke:#059669
  style E fill:#e0f2fe,stroke:#0284c7

Astro memiliki beberapa keunggulan dibanding framework lain:

  • Zero JavaScript by default - Hanya mengirim JavaScript yang benar-benar dibutuhkan
  • Island Architecture - Hanya komponen interaktif yang di-hydrate
  • Framework Agnostic - Bisa menggunakan React, Vue, Svelte, dll
  • Built-in optimizations - Otomatis mengoptimasi gambar, CSS, dan lainnya

Memulai Proyek Baru

Pertama, buat proyek Astro baru dengan perintah berikut:

Terminal
npm create astro@latest my-website
cd my-website
npm run dev

Ikuti wizard instalasi dan pilih template yang sesuai dengan kebutuhan Anda.

Struktur Proyek

TODO: Screenshot struktur folder project di VS Code

Proyek Astro memiliki struktur yang sederhana dan intuitif:

my-website/
├── public/          # Asset statis (gambar, font, dll)
├── src/
├── components/  # Komponen Astro/React/Vue
├── layouts/     # Layout templates
└── pages/       # Halaman-halaman website
├── astro.config.mjs # Konfigurasi Astro
└── package.json

Membuat Halaman Pertama

Buat file src/pages/index.astro:

---
// Frontmatter - kode JavaScript yang berjalan di build time
const title = "Website Saya";
const features = ["Cepat", "Modern", "SEO-friendly"];
---

<html lang="id">
<head>
<meta charset="UTF-8" />
<title>{title}</title>
</head>
<body>
<h1>{title}</h1>
<ul>
{features.map(feature => <li>{feature}</li>)}
</ul>
</body>
</html>

Komponen dan Layout

Buat layout yang bisa digunakan ulang di berbagai halaman:

---
// src/layouts/BaseLayout.astro
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>{title}</title>
</head>
<body>
<header>
<nav><!-- Navigation --></nav>
</header>
<main>
<slot />
</main>
<footer>
<p>&copy; 2026 Website Saya</p>
</footer>
</body>
</html>

Content Collections

Untuk konten seperti blog, gunakan Content Collections:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
type: 'content',
schema: z.object({
title: z.string(),
description: z.string(),
publishedAt: z.date(),
}),
});

export const collections = { blog };

Build dan Deploy

Untuk membuild website:

Build Process
npm run build

Output akan berada di folder dist/ yang siap di-deploy ke hosting statis seperti Netlify, Vercel, atau GitHub Pages.

Kesimpulan

Astro adalah pilihan yang sangat baik untuk website yang mengutamakan performa. Dengan arsitektur island dan support untuk berbagai framework, Astro memberikan fleksibilitas tinggi tanpa mengorbankan kecepatan.

Mulai Project Astro Sekarang

Siap membuat website super cepat? Kunjungi dokumentasi resmi dan mulai coding!

Baca Dokumentasi
Referensi
M

Mas Admin

Penulis Konten

Menyajikan konten terbaik seputar teknologi dan produktivitas.