Kalau kamu sudah capek ngoding, bikin landing page keren, atau bahkan bikin web app pakai React, Vue, atau HTML biasa, pasti ada satu pertanyaan penting:
“Gimana caranya supaya website ini bisa diakses orang lain?”
Jawabannya adalah: deploy.
Deploy itu ibarat memindahkan website dari laptop kamu ke internet, supaya bisa diakses siapa saja, kapan saja. Dan kabar baiknya, sekarang deploy website itu jauh lebih gampang dibanding zaman dulu yang harus ribet setting server manual.
Di artikel ini, kita akan bahas cara deploy website ke Vercel atau Netlify tanpa ribet. Cocok banget buat pemula, mahasiswa, peserta bootcamp, atau kamu yang baru belajar frontend.
Kenapa Harus Vercel atau Netlify?
Sebelum masuk ke tutorial, kita bahas dulu kenapa dua platform ini populer banget.
Vercel dan Netlify adalah layanan hosting modern yang dirancang khusus untuk developer frontend. Mereka mendukung:
- Deploy langsung dari GitHub
- Otomatis build project React, Vue, dan framework modern lainnya
- Free SSL (HTTPS)
- Domain gratis bawaan
- Proses deploy super cepat
Dan yang paling penting: ada paket gratis yang cukup banget buat project belajar atau portfolio.
Perbedaan Singkat Vercel dan Netlify
Secara umum, keduanya mirip. Tapi ada beberapa perbedaan kecil:
Vercel:
- Sangat optimal untuk Next.js
- Proses deploy sangat cepat
- UI sederhana
- Cocok untuk project modern berbasis React
Netlify:
- Lebih fleksibel untuk berbagai jenis project
- Punya fitur form handling dan serverless function
- Cocok untuk static site dan SPA
Kalau kamu pakai React atau Next.js, Vercel sangat nyaman.
Kalau kamu bikin landing page HTML biasa atau Vue, Netlify juga sangat enak dipakai.
Sekarang kita masuk ke tutorialnya.
Bagian 1: Cara Deploy Website ke Vercel
Langkah 1: Siapkan Project
Pastikan project kamu sudah:
- Berjalan normal di localhost
- Tidak ada error
- Sudah di-push ke GitHub
Kalau belum punya GitHub, buat dulu akun dan upload project kamu ke sana.
Langkah 2: Login ke Vercel
- Buka vercel.com
- Klik Sign Up
- Login menggunakan GitHub
Setelah login, kamu akan masuk ke dashboard.
Langkah 3: Import Project
- Klik “Add New Project”
- Pilih repository dari GitHub
- Klik Import
Vercel biasanya otomatis mendeteksi framework yang kamu gunakan.
Contoh:
- React (Vite)
- Next.js
- Vue
- Angular
Langkah 4: Klik Deploy
Biasanya kamu tidak perlu setting apa-apa.
Cukup klik Deploy, tunggu proses build selesai (sekitar 1–2 menit).
Kalau berhasil, Vercel akan memberikan URL seperti:
namaproject.vercel.app
Dan website kamu sudah online 🎉
Setiap kali kamu push update ke GitHub, Vercel otomatis deploy ulang. Praktis banget.
Bagian 2: Cara Deploy Website ke Netlify
Sekarang kita coba cara deploy ke Netlify.
Langkah 1: Login ke Netlify
- Buka netlify.com
- Login menggunakan GitHub
Langkah 2: Add New Site
- Klik “Add New Site”
- Pilih “Import an Existing Project”
- Pilih GitHub
- Pilih repository project kamu
Langkah 3: Konfigurasi Build
Kalau kamu pakai Vite misalnya:
Build Command:
npm run build
Publish Directory:
dist
Kalau pakai Create React App:
Build Command:
npm run build
Publish Directory:
build
Biasanya Netlify juga bisa mendeteksi otomatis.
Langkah 4: Deploy
Klik Deploy Site.
Tunggu proses build selesai.
Kalau berhasil, kamu akan dapat URL seperti:
namaproject.netlify.app
Selesai. Website kamu sudah online.
Cara Deploy Website HTML Biasa Tanpa GitHub
Kalau kamu cuma punya file HTML, CSS, dan JavaScript biasa tanpa GitHub, kamu tetap bisa deploy.
Di Netlify:
- Login ke dashboard
- Drag & drop folder project kamu ke halaman Netlify
Dalam hitungan detik, website langsung online.
Ini cocok banget buat pemula yang baru belajar HTML & CSS.
Custom Domain (Opsional)
Kalau kamu sudah punya domain seperti:
namakamu.com
Kamu bisa menghubungkannya ke Vercel atau Netlify.
Langkah umum:
- Masuk ke pengaturan domain di platform
- Tambahkan domain
- Arahkan DNS dari provider domain ke Vercel atau Netlify
Biasanya cuma butuh setting A record atau CNAME.
Tips Agar Deploy Tidak Error
Beberapa masalah yang sering terjadi saat deploy:
- Lupa install dependency
- Versi Node tidak sesuai
- Build error
- Environment variable belum diset
Kalau project pakai API key atau token, jangan lupa set Environment Variable di dashboard hosting.
Kenapa Developer Modern Wajib Bisa Deploy?
Sekarang dunia kerja menuntut developer yang:
- Bisa ngoding
- Bisa push ke GitHub
- Bisa deploy sendiri
Kalau kamu hanya bisa ngoding tapi tidak bisa deploy, kamu akan kesulitan saat kerja tim.
Deploy juga penting untuk:
- Portfolio
- Melamar kerja
- Presentasi ke klien
- Demo project
Bahkan banyak recruiter yang lebih tertarik melihat link project dibanding hanya CV.
Mana yang Sebaiknya Dipilih?
Kalau kamu masih bingung, ini saran simpel:
Pakai Vercel kalau:
- Kamu pakai React atau Next.js
- Ingin proses super simpel
- Fokus frontend modern
Pakai Netlify kalau:
- Kamu punya banyak static site
- Butuh fitur tambahan seperti form handling
- Ingin drag & drop tanpa GitHub
Sebenarnya dua-duanya bagus. Kamu bahkan bisa coba keduanya untuk latihan.
Kesimpulan
Deploy website sekarang bukan lagi hal yang rumit.
Dengan Vercel atau Netlify, kamu bisa:
- Deploy gratis
- Otomatis dari GitHub
- Dapat HTTPS
- Update otomatis setiap push
Untuk pemula, ini adalah langkah penting setelah belajar HTML, CSS, dan JavaScript.
Karena website yang hanya ada di laptop itu belum selesai.
Website baru benar-benar “hidup” ketika sudah online.
Kalau kamu serius ingin jadi frontend atau fullstack developer, kuasai proses deploy dari sekarang. Itu skill kecil tapi berdampak besar untuk karier kamu.