Cara Membuat Website dengan Svelte & SvelteKit: Panduan Lengkap 2026

Pendahuluan: Mengapa Belajar Cara Membuat Website dengan Svelte?

Cara membuat website dengan Svelte semakin populer di kalangan developer web modern karena Svelte menawarkan pendekatan yang benar-benar berbeda dari framework JavaScript lainnya seperti React atau Vue. Svelte adalah compiler, bukan library atau framework yang berjalan di browser - artinya Svelte mengubah kode Anda menjadi JavaScript murni yang sangat efisien saat proses build, bukan saat runtime.

Hasilnya? Website yang jauh lebih ringan, lebih cepat, dan dengan bundle size yang jauh lebih kecil. Menurut survei State of JS 2024, Svelte secara konsisten mendapatkan tingkat kepuasan tertinggi di antara semua framework JavaScript. Developer yang mencoba Svelte hampir selalu ingin terus menggunakannya.

SvelteKit adalah meta-framework resmi di atas Svelte - setara dengan Next.js untuk React atau Nuxt.js untuk Vue. SvelteKit menyediakan routing, Server-Side Rendering (SSR), Static Site Generation (SSG), API routes, dan semua yang Anda butuhkan untuk membangun aplikasi web lengkap. Dalam panduan ini, Anda akan belajar cara membuat website dengan Svelte dan SvelteKit dari nol hingga siap deploy ke hosting.

Kelebihan Svelte Dibanding Framework Lain

Sebelum masuk ke langkah teknis, penting memahami mengapa Svelte layak dipelajari di tahun 2026:

• Bundle size minimal - tidak ada framework runtime yang dikirim ke browser; hanya kode Anda
• Reaktivitas tanpa boilerplate - cukup deklarasikan variabel biasa, Svelte akan melacak perubahannya
• Sintaks intuitif - kode Svelte terasa seperti HTML, CSS, dan JavaScript standar
• Performa luar biasa - tidak ada Virtual DOM yang perlu di-diff; update DOM langsung dan efisien
• CSS scoped otomatis - setiap komponen memiliki CSS terisolasi tanpa konfigurasi tambahan
• Kurva belajar landai - developer berpengalaman HTML/CSS/JS bisa produktif dalam hitungan hari

Prasyarat Sebelum Belajar Svelte

Svelte dirancang agar mudah dipelajari, tetapi beberapa fondasi tetap diperlukan:

• HTML dasar - struktur halaman, tag semantik, atribut, dan form
• CSS dasar - selector, box model, flexbox/grid, dan responsiveness
• JavaScript ES6+ - variabel, fungsi, array, objek, module import/export, dan async/await

Jika Anda sudah nyaman dengan ketiganya, Anda siap belajar Svelte. Tidak seperti React, Anda tidak perlu memahami konsep Virtual DOM, JSX, atau hooks sebelum memulai.

Langkah 1: Menyiapkan Environment Development

Install Node.js

Svelte memerlukan Node.js versi 18 atau lebih baru. Unduh versi LTS dari nodejs.org. Verifikasi instalasi dengan:

node --version
npm --version

Install VS Code dan Extension

Visual Studio Code adalah editor terbaik untuk Svelte. Install extension berikut:

• Svelte for VS Code - syntax highlighting, intellisense, dan error detection untuk file .svelte
• Prettier - Code formatter - format kode otomatis
• Tailwind CSS IntelliSense - jika menggunakan Tailwind CSS

Langkah 2: Membuat Proyek SvelteKit Baru

SvelteKit adalah cara yang direkomendasikan untuk memulai proyek Svelte. Jalankan perintah berikut:

npm create svelte@latest nama-website-anda
cd nama-website-anda
npm install
npm run dev

Saat proses pembuatan proyek, Anda akan ditanyai beberapa pilihan konfigurasi. Berikut rekomendasi pilihan untuk pemula:

• Template: Skeleton project (mulai dari kosong)
• TypeScript: Yes (sangat direkomendasikan)
• ESLint: Yes
• Prettier: Yes

Struktur Folder Proyek SvelteKit

nama-website-anda/
├── src/
│   ├── lib/              ← komponen dan utilities reusable
│   │   └── components/
│   ├── routes/           ← sistem routing berbasis file
│   │   ├── +page.svelte  ← halaman beranda (/)
│   │   ├── +layout.svelte ← layout global
│   │   └── about/
│   │       └── +page.svelte  ← halaman /about
│   └── app.html          ← template HTML dasar
├── static/               ← aset statis (favicon, robots.txt)
├── svelte.config.js
├── vite.config.ts
└── package.json

Buka browser di http://localhost:5173 untuk melihat website SvelteKit Anda berjalan.

Langkah 3: Memahami Komponen Svelte

File komponen Svelte menggunakan ekstensi .svelte dan memiliki tiga bagian utama: script (logika), markup (template), dan style (CSS).

<!-- src/lib/components/Greeting.svelte -->
<script lang="ts">
  export let name: string;
  export let role: string = "Pengunjung";
</script>

<div class="greeting">
  <h1>Halo, {name}!</h1>
  <p>Selamat datang sebagai {role}.</p>
</div>

<style>
  .greeting {
    padding: 1rem;
    background-color: #f0f9ff;
    border-radius: 8px;
  }
  h1 {
    color: #0369a1;
  }
</style>

Gunakan komponen ini di halaman lain:

<!-- src/routes/+page.svelte -->
<script lang="ts">
  import Greeting from '$lib/components/Greeting.svelte';
</script>

<main>
  <Greeting name="Budi" role="Developer" />
  <Greeting name="Siti" />
</main>

Perhatikan beberapa hal penting:

• Props dideklarasikan dengan kata kunci export let
• Alias $lib menunjuk ke folder src/lib/
• CSS di dalam <style> otomatis di-scope ke komponen tersebut
• Ekspresi JavaScript ditulis dalam kurung kurawal: {variabel}

Langkah 4: Reaktivitas di Svelte

Inilah salah satu hal paling memukau dari Svelte: reaktivitas terasa alami dan tidak memerlukan boilerplate khusus seperti useState di React.

Variabel Reaktif

<script lang="ts">
  let count = 0;
  let nama = '';

  function tambah() {
    count += 1;
  }
</script>

<p>Jumlah klik: <strong>{count}</strong></p>
<button on:click={tambah}>Tambah</button>
<button on:click={() => count--}>Kurangi</button>

<input bind:value={nama} placeholder="Masukkan nama..." />
<p>Halo, {nama || 'tamu'}!</p>

Pernyataan Reaktif dengan $:

Gunakan label $: untuk membuat pernyataan atau variabel yang otomatis dihitung ulang ketika dependensinya berubah:

<script lang="ts">
  let harga = 100000;
  let jumlah = 1;

  $: total = harga * jumlah;
  $: diskon = total > 500000 ? total * 0.1 : 0;
  $: totalAkhir = total - diskon;

  $: if (jumlah < 1) jumlah = 1; // efek samping reaktif
</script>

<input type="number" bind:value={jumlah} min="1" />
<p>Total: Rp {totalAkhir.toLocaleString('id-ID')}</p>
<p>{diskon > 0 ? `Diskon 10%: -Rp ${diskon.toLocaleString('id-ID')}` : ''}</p>

Langkah 5: Logika Template (If, Each, Await)

Kondisional dengan {#if}

<script lang="ts">
  let isLogin = false;
  let username = 'Budi';
</script>

{#if isLogin}
  <p>Selamat datang, {username}! <button on:click={() => isLogin = false}>Logout</button></p>
{:else}
  <p>Silakan <a href="/login">login</a> untuk melanjutkan.</p>
{/if}

Perulangan dengan {#each}

<script lang="ts">
  const paketHosting = [
    { id: 1, nama: 'Starter', harga: 15000, disk: '5 GB' },
    { id: 2, nama: 'Business', harga: 35000, disk: '20 GB' },
    { id: 3, nama: 'Pro', harga: 75000, disk: 'Unlimited' },
  ];
</script>

<ul>
  {#each paketHosting as paket (paket.id)}
    <li>
      <strong>{paket.nama}</strong> - Rp {paket.harga.toLocaleString('id-ID')}/bln | Disk: {paket.disk}
    </li>
  {/each}
</ul>

Async/Await dengan {#await}

<script lang="ts">
  async function ambilArtikel() {
    const res = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    if (!res.ok) throw new Error('Gagal memuat data');
    return res.json();
  }

  const promise = ambilArtikel();
</script>

{#await promise}
  <p>Memuat artikel...</p>
{:then artikel}
  {#each artikel as item (item.id)}
    <article>
      <h3>{item.title}</h3>
      <p>{item.body}</p>
    </article>
  {/each}
{:catch error}
  <p>Error: {error.message}</p>
{/await}

Langkah 6: Routing di SvelteKit

SvelteKit menggunakan sistem routing berbasis file yang intuitif. Setiap folder di dalam src/routes/ merepresentasikan segmen URL, dan file +page.svelte adalah halaman yang dirender untuk rute tersebut.

Membuat Halaman Baru

# Struktur untuk website company profile
src/routes/
├── +page.svelte          → /
├── +layout.svelte        → layout global
├── tentang/
│   └── +page.svelte      → /tentang
├── layanan/
│   └── +page.svelte      → /layanan
├── blog/
│   ├── +page.svelte      → /blog
│   └── [slug]/
│       └── +page.svelte  → /blog/[slug] (halaman dinamis)
└── kontak/
    └── +page.svelte      → /kontak

Layout Global

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
</script>

<nav>
  <a href="/" class:active={$page.url.pathname === '/'}>Beranda</a>
  <a href="/tentang" class:active={$page.url.pathname === '/tentang'}>Tentang</a>
  <a href="/layanan" class:active={$page.url.pathname === '/layanan'}>Layanan</a>
  <a href="/kontak" class:active={$page.url.pathname === '/kontak'}>Kontak</a>
</nav>

<main>
  <slot />
</main>

<footer>
  <p>© 2026 Website Saya. All rights reserved.</p>
</footer>

<style>
  nav a.active { font-weight: bold; color: #0369a1; }
</style>

Mengambil Data dengan load()

<!-- src/routes/blog/[slug]/+page.ts -->
import type { PageLoad } from './$types';

export const load: PageLoad = async ({ params, fetch }) => {
  const res = await fetch(`/api/artikel/${params.slug}`);
  if (!res.ok) throw new Error('Artikel tidak ditemukan');
  const artikel = await res.json();
  return { artikel };
};

<!-- src/routes/blog/[slug]/+page.svelte -->
<script lang="ts">
  import type { PageData } from './$types';
  export let data: PageData;
</script>

<article>
  <h1>{data.artikel.judul}</h1>
  <p>{data.artikel.isi}</p>
</article>

Langkah 7: Store Svelte untuk State Global

Svelte menyediakan sistem store bawaan yang ringan untuk berbagi state antar komponen tanpa library tambahan seperti Redux atau Pinia.

<!-- src/lib/stores/keranjang.ts -->
import { writable, derived } from 'svelte/store';

export interface Produk {
  id: number;
  nama: string;
  harga: number;
  jumlah: number;
}

export const keranjang = writable<Produk[]>([]);

export const totalItem = derived(keranjang, ($keranjang) =>
  $keranjang.reduce((sum, item) => sum + item.jumlah, 0)
);

export const totalHarga = derived(keranjang, ($keranjang) =>
  $keranjang.reduce((sum, item) => sum + item.harga * item.jumlah, 0)
);

export function tambahKeKeranjang(produk: Omit<Produk, 'jumlah'>) {
  keranjang.update((items) => {
    const ada = items.find((i) => i.id === produk.id);
    if (ada) return items.map((i) => i.id === produk.id ? { ...i, jumlah: i.jumlah + 1 } : i);
    return [...items, { ...produk, jumlah: 1 }];
  });
}

<!-- Di komponen manapun -->
<script lang="ts">
  import { keranjang, totalItem, totalHarga, tambahKeKeranjang } from '$lib/stores/keranjang';
</script>

<p>Keranjang: {$totalItem} item | Total: Rp {$totalHarga.toLocaleString('id-ID')}</p>

Langkah 8: Styling dengan Tailwind CSS di SvelteKit

Tailwind CSS bekerja sangat baik bersama SvelteKit. Install dengan cara berikut:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Konfigurasi tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

Tambahkan direktif Tailwind di src/app.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import di src/routes/+layout.svelte:

<script>
  import '../app.css';
</script>

Langkah 9: Build dan Deploy Website SvelteKit

SvelteKit menggunakan konsep adapters untuk deploy ke berbagai platform. Pilih adapter sesuai target hosting Anda:

Adapter Node.js (untuk VPS)

npm install -D @sveltejs/adapter-node

// svelte.config.js
import adapter from '@sveltejs/adapter-node';
export default {
  kit: { adapter: adapter() }
};

npm run build
node build/index.js   # jalankan server

Adapter Static (untuk Shared Hosting)

Jika website Anda tidak memerlukan SSR (blog, company profile, portfolio), gunakan adapter static untuk menghasilkan file HTML statis yang bisa di-upload ke shared hosting biasa:

npm install -D @sveltejs/adapter-static

// svelte.config.js
import adapter from '@sveltejs/adapter-static';
export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build',
      fallback: '404.html'
    })
  }
};

npm run build
# Upload seluruh isi folder 'build/' ke public_html/ via FTP atau cPanel

Deploy ke Vercel (Paling Mudah)

1. Push kode ke GitHub
2. Masuk ke vercel.com dan hubungkan repository
3. Vercel otomatis mendeteksi SvelteKit dan mengkonfigurasi build settings
4. Klik Deploy - website Anda live dalam hitungan menit

FAQ: Cara Membuat Website dengan Svelte

Kesimpulan

Belajar cara membuat website dengan Svelte adalah pilihan cerdas di tahun 2026. Svelte menawarkan Developer Experience (DX) yang luar biasa - kode lebih sedikit, sintaks lebih bersih, performa lebih baik, dan hasil bundle yang jauh lebih ringan dibanding framework lainnya. SvelteKit melengkapi Svelte dengan semua fitur yang dibutuhkan untuk membangun website production-ready: routing, SSR, SSG, dan API.

Mulailah dengan proyek sederhana - landing page atau blog pribadi - untuk memahami konsep dasar komponen, reaktivitas, dan routing SvelteKit. Setelah nyaman, tantang diri Anda dengan proyek yang lebih kompleks seperti toko online atau aplikasi dashboard.

Saat website Svelte Anda siap dipublikasikan, pilih layanan hosting yang sesuai dengan kebutuhan. Untuk website statis, shared hosting Indonesia sudah lebih dari cukup. Untuk aplikasi SvelteKit dengan SSR dan fitur dinamis, pertimbangkan VPS atau Node.js hosting agar mendapat performa dan kontrol penuh.