pengembangan-web • 9 Maret 2024 • 1 menit baca

Memulai dengan Astro: Generator Situs Statis Modern

Pelajari cara membangun website super cepat dengan Astro, generator situs statis modern yang memungkinkan Anda menggunakan framework JavaScript favorit sambil mengirimkan zero JavaScript secara default.

Rio Astamal

Full Stack Developer & Tech Enthusiast

Memulai dengan Astro

Astro adalah generator situs statis modern yang memungkinkan Anda membangun website super cepat menggunakan framework JavaScript favorit Anda sambil mengirimkan zero JavaScript secara default.

Mengapa Astro?

Astro menonjol dari generator situs statis lainnya karena beberapa alasan:

Component Islands: Gunakan komponen React, Vue, Svelte, atau framework lainnya sesuai kebutuhan
Zero JavaScript secara Default: Tidak mengirimkan JavaScript ke client kecuali diperlukan
Pengalaman Developer yang Sangat Baik: Hot module reloading, dukungan TypeScript, dan banyak lagi
Content Collections yang Powerful: Dukungan kelas satu untuk manajemen konten

Menyiapkan Proyek Astro Pertama Anda

Memulai dengan Astro sangat mudah. Berikut caranya:

# Buat proyek baru dengan npm
npm create astro@latest

# Atau dengan pnpm
pnpm create astro@latest

# Atau dengan yarn
yarn create astro

Struktur Proyek

Struktur proyek Astro yang tipikal terlihat seperti ini:

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

Membangun Halaman

Di Astro, halaman dapat dibuat menggunakan file .astro, .md, .mdx, atau bahkan .html:

---
// src/pages/index.astro
---

<html lang="id">
  <head>
    <title>Situs Astro Saya</title>
  </head>
  <body>
    <h1>Selamat datang di Astro!</h1>
  </body>
</html>

Menggunakan Komponen

Komponen Astro sangat powerful dan fleksibel:

---
// src/components/Card.astro
interface Props {
  title: string;
  body: string;
}

const { title, body } = Astro.props;
---

<div class="card">
  <h2>{title}</h2>
  <p>{body}</p>
</div>

<style>
  .card {
    border: 1px solid #ccc;
    padding: 1rem;
    border-radius: 0.5rem;
  }
</style>

Kesimpulan

Astro adalah pilihan yang sangat baik untuk membangun website modern, terutama situs yang berfokus pada konten seperti blog, dokumentasi, dan situs marketing. Pendekatannya yang unik terhadap JavaScript, dikombinasikan dengan pengalaman developer yang sangat baik, menjadikannya alat yang powerful dalam arsenal setiap web developer.

Nantikan tutorial dan tips Astro lainnya!