Panduan Lengkap Deploy Website Modern (2026)

Deploy artinya memindahkan situsmu dari laptop ke internet, supaya orang lain bisa membukanya. Dulu prosesnya berarti menyewa server, mengurus konfigurasi, lalu menyalin berkas lewat FTP. Sekarang untuk sebagian besar situs, prosesnya: push kode ke Git, dan situsmu terbit sendiri.

Halaman ini menjelaskan seluruh alurnya dari awal — apa yang sebenarnya terjadi, apa yang perlu kamu putuskan, dan ke mana harus melangkah untuk kasusmu sendiri.

Apa yang sebenarnya terjadi saat deploy

Empat tahap. Memahami ini membuat sebagian besar error jadi masuk akal.

1. Build

Kode yang kamu tulis bukan kode yang dijalankan browser. Komponen React, berkas TypeScript, template Vue, SCSS — semuanya perlu diterjemahkan lebih dulu jadi HTML, CSS, dan JavaScript biasa.

Itu pekerjaan perintah npm run build. Hasilnya masuk ke satu folder keluaran:

Tooling	Folder keluaran
Vite (React, Vue, Svelte)	`dist`
Create React App	`build`
Astro	`dist`
Hugo	`public`
Eleventy	`_site`
Next.js, Nuxt	ditangani platform

Ini nilai yang paling sering salah diisi, dan gejalanya khas: deploy sukses tapi halamannya kosong atau 404.

Situs HTML dan CSS biasa tidak punya tahap ini sama sekali — berkasnya sudah siap saji.

2. Unggah

Isi folder keluaran dikirim ke jaringan server milik platform. Kamu tidak menyentuh bagian ini.

3. Sebar ke edge

Berkasmu disalin ke banyak lokasi di dunia. Pengunjung dari Jakarta menerimanya dari server terdekat, bukan dari mesin di Virginia. Ini yang membuat situs statis terasa instan di mana pun.

4. Aktifkan

Platform mengarahkan domainmu ke versi baru. Kalau ada yang salah, versi lama masih tersimpan dan bisa dikembalikan sekali klik.

Dua jenis situs, dua kebutuhan berbeda

Sebelum memilih platform, tentukan dulu situsmu masuk yang mana. Ini menentukan segalanya.

Situs statis

Semua halaman sudah jadi berkas HTML sebelum ada yang berkunjung. Isinya sama untuk semua orang.

Blog, dokumentasi, portofolio, landing page, situs perusahaan, katalog. Mayoritas situs di internet sebenarnya masuk kategori ini, termasuk banyak yang dibangun dengan cara yang jauh lebih rumit dari seharusnya.

Situs statis lebih cepat, lebih murah — sering kali gratis selamanya — dan lebih sedikit yang bisa rusak.

Situs dinamis

Halaman disusun saat diminta, karena isinya bergantung pada siapa yang membuka atau data yang berubah tiap detik. Ada login, ada dasbor, ada keranjang belanja.

Ini butuh kode yang berjalan di server. Bukan berarti harus menyewa server sendiri — platform modern menyediakannya sebagai function yang hidup hanya selama permintaan diproses.

Kamu tidak harus memilih satu untuk seluruh situs

Framework modern membiarkan tiap halaman punya mode sendiri. Beranda statis, daftar produk dibangun ulang tiap sepuluh menit, halaman akun dirender per permintaan. Penjelasannya ada di SSG vs SSR vs CSR.

Memilih platform

Ada empat yang layak dipertimbangkan untuk situs modern, dan semuanya punya paket gratis.

Platform	Paling cocok untuk	Catatan penting
Netlify	Situs statis, SSG, form	Paket gratis boleh untuk komersial
Vercel	Next.js, aplikasi React	Paket gratis non-komersial saja
Cloudflare	Lalu lintas besar, situs statis	Permintaan aset statis tidak dihitung
GitHub Pages	Dokumentasi, blog Hugo/Jekyll	Tidak ada redirect, function, atau preview

Kalau kamu ingin dituntun sampai satu jawaban, ada alat bantu memilih platform deploy. Kalau kamu ingin membandingkan dua-dua, mulai dari Vercel vs Netlify.

Satu hal yang sering terlewat

Paket Hobby Vercel tidak boleh dipakai untuk situs komersial — toko, situs perusahaan, apa pun yang menghasilkan pendapatan. Tidak ada peringatan otomatis, jadi banyak orang baru tahu setelah situsnya jalan berbulan-bulan.

Alur deploy dari Git

Ini pola yang dipakai keempat platform, dan yang sebaiknya kamu pakai sejak awal.

Taruh kodemu di Git — GitHub, GitLab, atau Bitbucket.
Hubungkan repositori ke platform pilihanmu.
Isi setelan build — perintah build dan folder keluaran. Platform biasanya menebaknya dengan benar.
Deploy pertama berjalan otomatis.
Sejak itu, tiap push jadi deploy.

Yang kamu dapat dari pola ini, selain kenyamanan:

Riwayat lengkap. Tiap versi situsmu tersimpan dan bisa dikembalikan.
Preview per pull request. Tiap perubahan dapat URL sendiri sebelum di-merge — lihat apa itu deploy preview.
Tidak ada langkah manual yang bisa terlupa.

Alur ini punya nama: continuous deployment. Cara menyusunnya dengan pengaman yang benar ada di panduan continuous deployment.

Menaruh konfigurasi di repositori

Kamu bisa mengisi setelan build lewat dashboard, tapi menaruhnya sebagai berkas di repositori lebih baik: ikut ter-versi, dan berlaku sama untuk siapa pun yang meng-clone project-mu.

Netlify — netlify.toml:

[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

Vercel — vercel.json:

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Cloudflare — wrangler.jsonc:

{
  "name": "situs-saya",
  "compatibility_date": "2026-03-01",
  "assets": { "directory": "./dist" }
}

Panduan per framework

Langkah persisnya berbeda-beda. Ini yang sudah ditulis lengkap:

React dan Vue

Framework dengan sisi server

Generator situs statis

HTML biasa

Upload website HTML/CSS ke Netlify

Setelah deploy pertama berhasil

Pasang domain sendiri

Alamat .netlify.app atau .vercel.app berfungsi, tapi domain sendiri lebih layak untuk apa pun yang serius. Prosesnya: daftarkan domain di dashboard platform, lalu tambahkan record DNS yang mereka tunjukkan. Sertifikat SSL diterbitkan otomatis dan gratis.

Bagian yang paling sering menyulitkan adalah domain root, karena aturan DNS lama melarang CNAME di sana. Penjelasannya lengkap di panduan custom domain dan SSL.

Atur environment variable

Berkas .env lokalmu tidak ikut ter-deploy — dan memang tidak boleh. Daftarkan ulang nilainya di dashboard platform.

Perhatikan prefiksnya, karena inilah yang menentukan variabel mana yang sampai ke browser:

Tooling	Prefiks publik
Vite	`VITE_`
Next.js	`NEXT_PUBLIC_`
Create React App	`REACT_APP_`
Vue CLI	`VUE_APP_`
Astro	`PUBLIC_`

Apa pun yang berprefiks itu ikut ter-bundle dan bisa dibaca siapa pun lewat DevTools. Jangan pernah menaruh kunci rahasia di sana.

Coba rollback sekali

Cari tombolnya sekarang, saat kamu tidak sedang panik. Di Netlify: Deploys, pilih versi lama, Publish deploy. Di Vercel: Deployments, pilih, Promote to Production.

Lima kesalahan yang paling sering terjadi

Folder keluaran salah. Gejalanya deploy sukses tapi halaman kosong. Cek: dist, build, public, atau _site.
Lupa aturan SPA. Aplikasi dengan routing sisi klien akan 404 saat di-refresh sampai kamu menambahkan aturan yang mengembalikan index.html untuk semua rute.
Kapitalisasi nama berkas. Server build memakai Linux yang membedakan Header.jsx dan header.jsx. Laptopmu tidak. Ini penyebab nomor satu build yang jalan di lokal tapi gagal di server.
Environment variable tidak didaftarkan ulang. Berkas .env tidak ikut. Dan setelah menambahkannya, kamu harus deploy ulang.
Versi Node berbeda. Kunci dengan berkas .nvmrc berisi satu baris nomor versi.

Daftar lengkapnya, dengan pesan error aslinya, ada di 15 error deploy paling umum.

Uji build produksi sebelum push

Kebiasaan yang menghemat banyak waktu. npm run dev berperilaku berbeda dari build produksi — banyak error hanya muncul di yang kedua.

npm run build
npx serve dist

Kalau ini jalan di laptopmu, kemungkinan besar deploy-nya juga akan jalan.

Ke mana selanjutnya

Belum tahu pilih platform mana? → Platform deploy mana yang cocok
Ingin memahami arsitekturnya? → Apa itu Jamstack
Bingung mode rendering? → SSG vs SSR vs CSR
Membandingkan hosting statis? → Panduan memilih hosting statis
Deploy-mu gagal? → 15 error deploy paling umum