Panduan Lengkap Astro.js untuk Pemula

Astro.js adalah framework modern untuk membangun website yang cepat dan efisien. Dalam panduan ini, kita akan mempelajari dasar-dasar Astro.js dan cara menggunakannya untuk membuat website yang menakjubkan.

Apa itu Astro.js?

Astro.js adalah framework web yang memungkinkan Anda membangun website dengan performa tinggi menggunakan komponen dari berbagai framework seperti React, Vue, Svelte, atau vanilla JavaScript.

Fitur Utama Astro.js

Zero JavaScript by Default: Astro mengirimkan HTML murni tanpa JavaScript kecuali jika diperlukan
Islands Architecture: Komponen interaktif hanya dimuat saat diperlukan
Multi-Framework: Mendukung React, Vue, Svelte, dan lainnya dalam satu proyek
Built-in Optimizations: Optimasi gambar, CSS, dan aset lainnya secara otomatis

Instalasi Astro.js

Untuk memulai proyek Astro baru, jalankan perintah berikut:

npm create astro@latest my-astro-project
cd my-astro-project
npm install
npm run dev

Struktur Proyek

Setelah instalasi, struktur proyek Astro akan terlihat seperti ini:

my-astro-project/
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── public/
├── astro.config.mjs
└── package.json

Membuat Komponen Pertama

Buat file src/components/Header.astro:

---
// Component logic here
const title = "My Website";
---

<header class="header">
  <h1>{title}</h1>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/blog">Blog</a>
  </nav>
</header>

<style>
  .header {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem;
  }
</style>

Content Collections

Astro memiliki fitur Content Collections yang memungkinkan Anda mengelola konten dengan mudah:

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

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    author: z.string(),
    date: z.date(),
    image: z.string().optional(),
    tags: z.array(z.string()),
    published: z.boolean().default(false),
  }),
});

export const collections = {
  'blog': blogCollection,
};

SEO dan Performance

Astro secara otomatis mengoptimalkan website Anda untuk SEO dan performance:

Prerendering: Halaman di-render pada build time
Image Optimization: Gambar dioptimalkan secara otomatis
CSS Scoping: CSS dikapsulasi per komponen
Tree Shaking: Hanya kode yang digunakan yang disertakan

Deployment

Astro dapat di-deploy ke berbagai platform:

Netlify: npm run build lalu upload folder dist/
Vercel: Integrasi otomatis dengan Git
GitHub Pages: Gunakan GitHub Actions
Cloudflare Pages: Deploy langsung dari Git

Kesimpulan

Astro.js adalah pilihan yang sangat baik untuk membangun website modern dengan performa tinggi. Dengan fitur-fitur canggihnya dan kemudahan penggunaan, Astro memungkinkan developer untuk fokus pada konten dan user experience.