Membuat Website Tanpa Hosting Berbayar dengan Vercel

Oleh Sugeng 25 Agu 2026

Pendahuluan

Vercel adalah platform yang memungkinkan Anda menerbitkan website statis maupun aplikasi Jamstack tanpa membeli server atau VPS. Anda cukup menghubungkan repositori Git, lalu Vercel yang menangani proses build dan hosting di jaringan CDN global — gratis untuk penggunaan pribadi.

Cara Kerja Vercel

Secara singkat alur kerjanya sebagai berikut:

  1. Anda menyimpan kode website di GitHub, GitLab, atau Bitbucket.
  2. Vercel terhubung ke repositori tersebut.
  3. Setiap ada perubahan (push), Vercel mengambil kode, menjalankan perintah build, lalu menyalurkan hasilnya ke CDN di seluruh dunia.
  4. Pengunjung mendapatkan halaman dari server terdekat sehingga waktu muat sangat cepat.

Tidak ada VPS, tidak ada konfigurasi web server manual, dan tidak ada tagihan selama masih dalam kuota gratis.

File yang Harus Dipersiapkan

Minimal Anda membutuhkan:

  • Kode website (HTML, CSS, JS, atau framework seperti Next.js, Astro, Hugo).
  • Repositori Git (GitHub gratis).
  • berkas vercel.json (opsional, untuk mengatur routing/rewrite). Contoh sederhana:
json
{
  "buildCommand": "npm run build",
  "outputDirectory": "public",
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}
  • package.json bila menggunakan Node.js (berisi script build).
  • Domain (opsional; Vercel memberikan subdomain *.vercel.app secara gratis).

Struktur File Minimum yang Diunggah ke GitHub

Agar website benar-benar bisa diterbitkan, buatlah berkas berikut di dalam satu folder proyek lokal, lalu unggah semuanya ke GitHub.

index.html — halaman utama:

html
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Website Saya</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Halo, ini website gratis!</h1>
  <p>Diterbitkan tanpa hosting berbayar menggunakan Vercel.</p>
</body>
</html>

styles.css — gaya sederhana:

css
body {
  font-family: system-ui, sans-serif;
  margin: 0;
  padding: 40px;
  background: #0d0d12;
  color: #ececf1;
  text-align: center;
}

package.json — agar Vercel mengenali proyek (untuk situs statis murni, perintah build boleh kosong):

json
{
  "name": "website-saya",
  "version": "1.0.0",
  "scripts": {
    "build": "echo 'tanpa proses build'"
  }
}

vercel.json — sudah dijelaskan pada bagian sebelumnya.

Setelah semua berkas siap, unggah ke GitHub:

bash
git init
git add index.html styles.css package.json vercel.json
git commit -m "Website pertama"
git branch -M main
git remote add origin https://github.com/USER/REPO.git
git push -u origin main

Repository inilah yang nanti dihubungkan ke Vercel pada Step 1. Tanpa berkas-berkas ini berada di GitHub, Vercel tidak memiliki kode untuk dibangun dan ditayangkan.

Step 1: Buat Akun dan Hubungkan Repositori

Daftar di vercel.com menggunakan akun GitHub. Klik "Add New → Project", lalu pilih repositori yang ingin diterbitkan.

Step 2: Atur Perintah Build

Pada halaman konfigurasi, tentukan:

  • Build Command: misal npm run build (atau kosongkan untuk website statis murni).
  • Output Directory: public, dist, atau build sesuai hasil build Anda.

Untuk website statis sederhana tanpa proses build, cukup unggah berkas dan Vercel akan mengenalinya secara otomatis.

Step 3: Deploy dan Dapatkan URL

Klik "Deploy". Beberapa detik kemudian website sudah tayang di https://nama.vercel.app. Setiap push berikutnya otomatis diperbarui tanpa langkah tambahan.

Step 4: Pasang Domain Sendiri (Opsional)

Di menu "Domains", tambahkan domain Anda, lalu arahkan DNS (CNAME/A) ke Vercel. Sertifikat HTTPS otomatis via Let's Encrypt aktif tanpa biaya.

Kelebihan Vercel

  • Gratis untuk proyek pribadi dengan SSL otomatis.
  • CDN global, sehingga website sangat cepat di berbagai lokasi.
  • Deploy otomatis tiap kali commit (CI/CD bawaan).
  • Dukungan framework populer (Next.js, Astro, dll.) langsung tersedia.
  • Preview deployment untuk tiap branch atau pull request.

Kekurangan Vercel

  • Kuota gratis terbatas (bandwidth, durasi build, fungsi serverless).
  • Build ulang otomatis dapat terbatas bila dilakukan terlalu sering.
  • Berfokus pada frontend/Jamstack; bukan tempat menjalankan service long-running (bot, database) secara terus-menerus.
  • Biaya naik cukup tinggi bila melewati batas kuota.

Hal Penting Lainnya

  • Environment Variables: rahasia seperti API key diatur di dashboard (Settings → Environment Variables), bukan di dalam repositori.
  • Serverless Functions: Vercel dapat menjalankan fungsi backend tanpa server, cocok untuk form ringan.
  • Hindari salah mengatur outputDirectory — pastikan sesuai hasil build agar tidak muncul halaman 404.
  • Cache: Vercel menyimpan konten statis di CDN secara agresif; mengubah berkas butuh redeploy, bukan sekadar menyimpan.
  • Apabila kelak membutuhkan server penuh, pelajari panduan VPS Debian 13.

Kesimpulan

Vercel adalah cara termudah menerbitkan website modern tanpa hosting berbayar. Sangat cocok untuk portfolio, blog, landing page, hingga aplikasi frontend.

Artikel Terkait