Cara Membuat Website dengan Astro: Static Site Framework Terbaik 2026

Pendahuluan: Mengapa Belajar Cara Membuat Website dengan Astro?

Cara membuat website dengan Astro menjadi topik yang semakin panas di kalangan developer web di tahun 2026. Astro adalah static site framework yang dirancang dengan satu misi utama: menghasilkan website yang secepat mungkin dengan mengirimkan sesedikit mungkin JavaScript ke browser.

Apa yang membuat Astro revolusioner? Astro adalah salah satu framework pertama yang mempopulerkan konsep Islands Architecture - sebuah pendekatan di mana sebagian besar halaman Anda adalah HTML statis yang cepat, dan hanya bagian-bagian interaktif tertentu (disebut "islands") yang memuat JavaScript. Hasilnya adalah website dengan skor Lighthouse mendekati sempurna secara default.

Astro juga unik karena bersifat agnostik terhadap framework UI: Anda bisa menggunakan komponen React, Vue, Svelte, Solid, atau bahkan mencampurnya dalam satu proyek! Ini menjadikan Astro pilihan ideal untuk konten-heavy websites seperti blog, dokumentasi, landing page, portofolio, dan website marketing. Dalam panduan ini, Anda akan belajar cara membuat website dengan Astro dari awal hingga siap online.

Kapan Harus Menggunakan Astro?

Astro sangat cocok untuk jenis website berikut:

• Blog dan website berita - konten statis yang perlu SEO optimal
• Dokumentasi teknis - Astro digunakan oleh proyek-proyek besar seperti dokumentasi resmi berbagai framework
• Landing page dan marketing site - performa tinggi meningkatkan konversi
• Website portofolio - tampilan mengesankan dengan performa luar biasa
• Website company profile - profesional, cepat, dan mudah di-maintain
• E-commerce statis - dengan integrasi ke layanan seperti Shopify atau Snipcart

Astro kurang ideal untuk aplikasi web yang sangat dinamis dengan state kompleks (seperti aplikasi SaaS, dashboard real-time, atau media sosial). Untuk kasus tersebut, React/Next.js atau SvelteKit lebih sesuai.

Prasyarat Sebelum Belajar Astro

• HTML dasar - Astro menggunakan sintaks yang sangat mirip HTML
• CSS dasar - styling, flexbox, dan responsiveness
• JavaScript ES6+ - variabel, fungsi, module, dan async/await
• Opsional: pengetahuan dasar tentang framework UI (React, Vue, atau Svelte) jika ingin menggunakan Islands interaktif

Langkah 1: Menyiapkan Environment dan Membuat Proyek Astro

Install Node.js

Astro memerlukan Node.js versi 18.17.1 atau lebih baru. Unduh dari nodejs.org dan pastikan terinstall dengan benar:

node --version   # harus v18.17.1+
npm --version

Membuat Proyek Astro Baru

Gunakan wizard CLI resmi Astro untuk membuat proyek baru:

npm create astro@latest nama-website-anda

Wizard akan memandu Anda melalui beberapa pilihan konfigurasi. Rekomendasi untuk pemula:

• Template: Blog (jika membuat blog) atau Empty (untuk mulai dari kosong)
• TypeScript: Yes, Strict (direkomendasikan)
• Install dependencies: Yes

cd nama-website-anda
npm run dev

Buka http://localhost:4321 di browser Anda.

Struktur Folder Proyek Astro

nama-website-anda/
├── public/              ← aset statis (favicon, robots.txt, font)
├── src/
│   ├── components/      ← komponen .astro dan komponen framework UI
│   ├── layouts/         ← layout wrapper untuk halaman
│   ├── pages/           ← setiap file = satu rute URL
│   │   ├── index.astro  ← halaman beranda (/)
│   │   ├── tentang.astro ← halaman /tentang
│   │   └── blog/
│   │       ├── index.astro   ← halaman /blog
│   │       └── [slug].astro  ← halaman dinamis /blog/[slug]
│   └── content/         ← koleksi konten (Markdown/MDX)
│       └── blog/
│           └── artikel-pertama.md
├── astro.config.mjs
├── tsconfig.json
└── package.json

Langkah 2: Memahami Komponen Astro (.astro)

File .astro adalah unit dasar Astro. Strukturnya terdiri dari dua bagian yang dipisahkan oleh garis tiga tanda hubung (---): frontmatter (kode JavaScript/TypeScript yang berjalan di server saat build) dan template (markup HTML yang dirender).

<!-- src/components/KartuProduk.astro -->
---
interface Props {
  nama: string;
  harga: number;
  deskripsi: string;
}

const { nama, harga, deskripsi } = Astro.props;
const hargaFormatted = harga.toLocaleString('id-ID');
---

<div class="kartu">
  <h3>{nama}</h3>
  <p class="harga">Rp {hargaFormatted}/bulan</p>
  <p>{deskripsi}</p>
  <a href="/daftar" class="btn">Pilih Paket</a>
</div>

<style>
  .kartu {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.5rem;
    transition: box-shadow 0.2s;
  }
  .kartu:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
  .harga { font-size: 1.5rem; font-weight: bold; color: #0369a1; }
  .btn {
    display: inline-block;
    background: #0369a1;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
  }
</style>

Gunakan komponen ini di halaman:

<!-- src/pages/index.astro -->
---
import Layout from '../layouts/Layout.astro';
import KartuProduk from '../components/KartuProduk.astro';

const paket = [
  { nama: 'Starter', harga: 15000, deskripsi: 'Cocok untuk blog pribadi dan portofolio' },
  { nama: 'Business', harga: 35000, deskripsi: 'Ideal untuk website bisnis dan UKM' },
  { nama: 'Pro', harga: 75000, deskripsi: 'Untuk website traffic tinggi dan e-commerce' },
];
---

<Layout title="Paket Hosting Terbaik Indonesia">
  <h1>Pilih Paket Hosting Anda</h1>
  <div class="grid">
    {paket.map((p) => (
      <KartuProduk nama={p.nama} harga={p.harga} deskripsi={p.deskripsi} />
    ))}
  </div>
</Layout>

Langkah 3: Membuat Layout

Layout adalah komponen wrapper yang mendefinisikan struktur HTML dasar yang digunakan oleh banyak halaman.

<!-- src/layouts/Layout.astro -->
---
interface Props {
  title: string;
  description?: string;
}
const { title, description = 'Website Saya - Powered by Astro' } = Astro.props;
---

<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content={description} />
    <title>{title}</title>
    <link rel="sitemap" href="/sitemap-index.xml" />
  </head>
  <body>
    <header>
      <nav>
        <a href="/">Beranda</a>
        <a href="/blog">Blog</a>
        <a href="/tentang">Tentang</a>
        <a href="/kontak">Kontak</a>
      </nav>
    </header>
    <main>
      <slot />
    </main>
    <footer>
      <p>© {new Date().getFullYear()} Website Saya</p>
    </footer>
  </body>
</html>

Langkah 4: Content Collections untuk Blog

Astro menyediakan fitur Content Collections yang sangat powerful untuk mengelola konten berbasis Markdown atau MDX dengan type safety penuh.

Konfigurasi Content Collection

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

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.date(),
    author: z.string().default('Admin'),
    tags: z.array(z.string()).default([]),
  }),
});

export const collections = { blog };

Membuat Artikel Blog (Markdown)

<!-- src/content/blog/cara-memilih-hosting.md -->
---
title: "Cara Memilih Hosting yang Tepat untuk Website Anda"
description: "Panduan lengkap memilih hosting terbaik sesuai kebutuhan."
pubDate: 2026-05-30
author: "Tim HostingEkspres"
tags: ["hosting", "tips", "pemula"]
---

## Pendahuluan

Memilih hosting yang tepat adalah keputusan penting...

## Jenis-jenis Hosting

### Shared Hosting
Cocok untuk website kecil dengan traffic rendah...

Halaman Blog Index

<!-- src/pages/blog/index.astro -->
---
import { getCollection } from 'astro:content';
import Layout from '../../layouts/Layout.astro';

const artikelBlog = await getCollection('blog');
artikelBlog.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
---

<Layout title="Blog - Tips Web Development & Hosting">
  <h1>Artikel Terbaru</h1>
  <ul>
    {artikelBlog.map((artikel) => (
      <li>
        <a href={'/blog/' + artikel.slug}>
          <h2>{artikel.data.title}</h2>
          <p>{artikel.data.description}</p>
          <time>{artikel.data.pubDate.toLocaleDateString('id-ID')}</time>
        </a>
      </li>
    ))}
  </ul>
</Layout>

Halaman Detail Artikel

<!-- src/pages/blog/[slug].astro -->
---
import { getCollection, getEntry } from 'astro:content';
import Layout from '../../layouts/Layout.astro';

export async function getStaticPaths() {
  const artikelBlog = await getCollection('blog');
  return artikelBlog.map((artikel) => ({
    params: { slug: artikel.slug },
    props: { artikel },
  }));
}

const { artikel } = Astro.props;
const { Content } = await artikel.render();
---

<Layout title={artikel.data.title} description={artikel.data.description}>
  <article>
    <h1>{artikel.data.title}</h1>
    <p>Oleh {artikel.data.author} | {artikel.data.pubDate.toLocaleDateString('id-ID')}</p>
    <Content />
  </article>
</Layout>

Langkah 5: Islands Architecture - Interaktivitas Selektif

Salah satu fitur paling powerful Astro adalah kemampuan untuk mengintegrasikan komponen dari framework UI manapun dan mengontrol kapan JavaScript di-load menggunakan client directives.

Install Integrasi React

npx astro add react

Membuat Komponen React Interaktif

// src/components/PenghitungHarga.tsx
import { useState } from 'react';

export default function PenghitungHarga({ hargaDasar }: { hargaDasar: number }) {
  const [bulan, setBulan] = useState(1);
  const total = hargaDasar * bulan;
  const diskon = bulan >= 12 ? 0.2 : bulan >= 6 ? 0.1 : 0;
  const hargaAkhir = total * (1 - diskon);

  return (
    <div>
      <label>Durasi Langganan:</label>
      <select value={bulan} onChange={(e) => setBulan(Number(e.target.value))}>
        <option value={1}>1 Bulan</option>
        <option value={6}>6 Bulan (hemat 10%)</option>
        <option value={12}>12 Bulan (hemat 20%)</option>
      </select>
      <p>Total: Rp {hargaAkhir.toLocaleString('id-ID')}</p>
    </div>
  );
}

Menggunakan Island di Halaman Astro

---
import PenghitungHarga from '../components/PenghitungHarga.tsx';
---

<!-- Dirender hanya di server, tidak ada JS dikirim ke browser -->
<PenghitungHarga hargaDasar={35000} />

<!-- Dirender di server + dihydrate di browser saat visible -->
<PenghitungHarga hargaDasar={35000} client:visible />

<!-- Dihydrate segera saat halaman dimuat -->
<PenghitungHarga hargaDasar={35000} client:load />

<!-- Dihydrate saat browser idle -->
<PenghitungHarga hargaDasar={35000} client:idle />

Langkah 6: SEO Optimal dengan Astro

Astro didesain dengan SEO sebagai prioritas utama. Beberapa praktik terbaik SEO di Astro:

Komponen SEO Reusable

<!-- src/components/SEO.astro -->
---
interface Props {
  title: string;
  description: string;
  canonicalURL?: string;
  ogImage?: string;
}
const {
  title,
  description,
  canonicalURL = Astro.url.href,
  ogImage = '/og-default.jpg'
} = Astro.props;
---

<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={ogImage} />
<meta property="og:url" content={canonicalURL} />
<meta name="twitter:card" content="summary_large_image" />

Sitemap Otomatis

npx astro add sitemap

// astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://websiteanda.com',
  integrations: [sitemap()],
});

Langkah 7: Styling dengan Tailwind CSS

npx astro add tailwind

Perintah di atas secara otomatis menginstall dan mengkonfigurasi Tailwind CSS di proyek Astro Anda. Tidak perlu konfigurasi manual tambahan - langsung gunakan kelas Tailwind di file .astro.

Langkah 8: Build dan Deploy Website Astro

Astro secara default menghasilkan output statis yang bisa di-deploy ke mana saja:

npm run build
# Hasilnya ada di folder 'dist/'

Deploy ke Shared Hosting Indonesia

1. Jalankan npm run build di komputer lokal Anda
2. Upload seluruh isi folder dist/ ke direktori public_html/ via FTP atau File Manager cPanel
3. Website Anda langsung online tanpa perlu konfigurasi server tambahan

Deploy ke Vercel

1. Push kode ke GitHub
2. Hubungkan repository di vercel.com
3. Vercel otomatis mendeteksi Astro dan mengatur build settings
4. Klik Deploy

Mode SSR (Server-Side Rendering)

Jika Anda butuh SSR (misalnya untuk form dinamis atau API routes), aktifkan mode hybrid:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import node from '@astrojs/node';

export default defineConfig({
  output: 'hybrid',  // atau 'server' untuk full SSR
  adapter: node({ mode: 'standalone' }),
});

FAQ: Cara Membuat Website dengan Astro

Kesimpulan

Belajar cara membuat website dengan Astro adalah investasi yang sangat menguntungkan, terutama jika Anda sering membangun website konten seperti blog, dokumentasi, landing page, atau company profile. Astro menawarkan performa kelas dunia secara default, Developer Experience yang menyenangkan, dan fleksibilitas luar biasa melalui dukungan multi-framework.

Filosofi "ship less JavaScript" yang dipegang Astro bukan hanya soal performa teknis - ini langsung berdampak pada pengalaman pengguna, SEO ranking, dan tingkat konversi bisnis Anda. Website yang lebih cepat menghasilkan bounce rate lebih rendah dan lebih banyak pengunjung yang bertahan.

Setelah website Astro Anda siap, proses deployment sangat mudah. Karena output Astro adalah file HTML statis, Anda cukup upload ke hosting Indonesia pilihan Anda tanpa konfigurasi server yang rumit. Pilih shared hosting berkualitas dengan uptime tinggi dan server Indonesia untuk memastikan website Anda diakses dengan cepat oleh pengguna lokal.