Memulai dengan Astro: Framework Modern untuk Static Sites

Apa itu Astro?

Astro adalah framework web modern yang dirancang untuk membangun website yang cepat dan fokus pada konten. Astro menggunakan pendekatan island architecture yang memungkinkan kita mengirim lebih sedikit JavaScript ke browser.

Keunggulan Astro

Zero JS by default — Astro tidak mengirim JavaScript ke browser kecuali diperlukan
Multi-framework — Dapat menggunakan React, Vue, Svelte, dan banyak lagi
Content-focused — Dirancang khusus untuk website berbasis konten
Edge-ready — Bisa di-deploy ke berbagai platform

Instalasi

Untuk memulai proyek Astro baru, jalankan perintah berikut:

npm create astro@latest

Wizard interaktif akan memandu Anda melalui proses setup.

Struktur Proyek

Setelah instalasi, struktur proyek Astro terlihat seperti ini:

├── public/
│   └── favicon.svg
├── src/
│   ├── components/
│   ├── layouts/
│   └── pages/
│       └── index.astro
├── astro.config.mjs
├── package.json
└── tsconfig.json

Membuat Halaman Pertama

File .astro adalah format komponen khusus Astro. Berikut contoh halaman sederhana:

---
// Bagian server-side (frontmatter)
const pageTitle = "Halaman Pertama Saya";
const description = "Ini adalah halaman Astro pertama saya";
---

<html lang="id">
  <head>
    <title>{pageTitle}</title>
  </head>
  <body>
    <h1>{pageTitle}</h1>
    <p>{description}</p>
  </body>
</html>

Content Collections

Astro v5 memperkenalkan Content Collections API yang memudahkan manajemen konten Markdown:

import { defineCollection, z } from 'astro:content';

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

export const collections = { blog };

Kesimpulan

Astro adalah pilihan yang sangat baik untuk website berbasis konten seperti blog, dokumentasi, dan landing page. Dengan pendekatan content-first dan zero JS by default, Astro membantu kita membangun website yang cepat dan efisien.

Di artikel selanjutnya, kita akan membahas cara menggunakan Content Collections lebih dalam dan mengintegrasikan Tailwind CSS ke dalam proyek Astro.

Selamat mencoba! 🚀