Deploy Website ke Vercel dalam 5 Menit (Gratis)

Step-by-step deploy website ke Vercel gratis. Cover: GitHub integration, custom domain, SSL, dan tips optimasi performa. Cocok untuk portfolio dan landing page.

Mengapa Vercel?

Vercel adalah platform deploy yang paling developer-friendly untuk website statis dan Next.js. Gratis untuk penggunaan personal dengan bandwidth 100GB/bulan, SSL otomatis, dan global CDN. Cocok untuk portfolio, landing page, dan company profile.

Step 1: Push ke GitHub

Buat repo baru di GitHub, lalu push kode website kamu:

# Inisialisasi git di folder project
git init
git add .
git commit -m "initial deploy"

# Push ke GitHub
git remote add origin https://github.com/username/my-website.git
git push -u origin main

Step 2: Hubungkan ke Vercel

1. Buka vercel.com dan login dengan GitHub
2. Klik "Add New Project"
3. Pilih repo yang baru kamu push
4. Klik "Deploy" — tunggu 30-60 detik
5. Selesai! Website kamu live di my-website.vercel.app

Step 3: Custom Domain

Kalau punya domain sendiri (misal: bisnis.com):

1. Di Vercel dashboard → Settings → Domains
2. Ketik domain kamu → klik "Add"
3. Vercel kasih DNS record yang perlu ditambah
4. Buka panel DNS domain kamu (Cloudflare/Domainesia/dll)
5. Tambahkan CNAME record: www → cname.vercel-dns.com
6. Tambahkan A record: @ → 76.76.21.21
7. Tunggu 5-30 menit untuk propagasi DNS

Step 4: Auto-Deploy dari Git

Fitur terbaik Vercel: setiap kali kamu git push, website otomatis update. Tidak perlu FTP, tidak perlu build manual.

# Ubah file, commit, push — website langsung update
git add .
git commit -m "update: tambah halaman kontak"
git push

Vercel juga bikin preview deployment untuk setiap branch — cocok untuk testing sebelum merge ke main.

Pitfall Umum

1. cleanUrls dan Path Relatif

Kalau aktifkan cleanUrls di vercel.json, path relatif CSS/JS bisa break. Solusi: gunakan absolute path (/css/style.css) bukan relative (../css/style.css).

2. 404 pada Refresh

SPA (Single Page Application) perlu rewrite rule:

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

3. Environment Variables

Kalau butuh API key atau secret, tambah di Settings → Environment Variables. Jangan pernah hardcode di kode yang di-push ke GitHub.

Performance Tips

• Kompres gambar ke WebP (80% lebih kecil dari PNG)
• Gunakan loading="lazy" pada gambar
• Minify CSS/JS (Vercel auto-minify untuk Next.js)
• Hapus unused CSS (purgecss untuk Tailwind)
• Preload font: <link rel="preload" as="font">

Manday

Founder LYID — Layer Airdrop ID. Membangun bot automasi crypto sejak 2024.