Membuat Website Tanpa Hosting Berbayar dengan Netlify

Pendahuluan

Netlify menerbitkan website statis dan aplikasi Jamstack dengan sangat mudah — bahkan bisa melalui "drag and drop" berkas tanpa Git. Sama seperti Vercel, hosting dan CDN-nya gratis untuk penggunaan pribadi.

Cara Kerja Netlify

Alur kerjanya kurang lebih sebagai berikut:

  1. Kode website disimpan di Git atau diunggah langsung ke dashboard.
  2. Netlify menarik kode, menjalankan perintah build, dan menempatkan hasilnya di CDN.
  3. Tiap perubahan di repositori memicu deploy otomatis.
  4. Pengunjung dilayani dari node CDN terdekat.

Tidak perlu VPS maupun konfigurasi server manual.

File yang Harus Dipersiapkan

Minimal Anda membutuhkan:

  • Kode website (HTML, CSS, JS, atau generator statis).
  • Repositori Git (opsional, tetapi disarankan).
  • berkas netlify.toml untuk konfigurasi build dan redirect:
toml
[build]
  command = "npm run build"
  publish = "public"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
  • package.json bila memakai Node.js.
  • Domain (opsional; Netlify memberikan *.netlify.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 (atau cukup seret folder tersebut ke Netlify bila tidak ingin memakai Git).

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 Netlify.</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 Netlify mengenali proyek (untuk situs statis murni, perintah build boleh kosong):

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

netlify.toml — sudah dijelaskan pada bagian sebelumnya.

Jika memakai Git, unggah ke GitHub:

bash
git init
git add index.html styles.css package.json netlify.toml
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 Netlify pada Step 1. Tanpa berkas-berkas ini, Netlify tidak memiliki kode untuk dibangun dan ditayangkan. Sebagai alternatif tanpa Git, Anda cukup menyeret folder berisi index.html dan styles.css ke area "Drop" di dashboard Netlify.

Step 1: Daftar dan Hubungkan

Daftar di netlify.com, pilih "Add new site → Import from Git", lalu hubungkan repositori GitHub Anda.

Step 2: Atur Build

Tentukan:

  • Build command: npm run build (atau kosong untuk statis murni).
  • Publish directory: public, dist, atau build.

Cara paling cepat: cukup seret folder website ke area "Drop" di dashboard Netlify — tidak memerlukan Git sekalipun.

Step 3: Deploy

Klik "Deploy site". Website langsung tayang di https://nama.netlify.app.

Step 4: Domain dan HTTPS

Tambahkan domain di menu "Domain settings", arahkan DNS ke Netlify, dan HTTPS otomatis (Let's Encrypt) aktif tanpa biaya tambahan.

Kelebihan Netlify

  • Gratis dengan SSL otomatis dan CDN global.
  • Dapat dideploy hanya dengan drag-and-drop (tanpa Git).
  • Deploy otomatis tiap kali push.
  • Netlify Forms untuk menangani kiriman form tanpa backend.
  • Netlify Functions untuk kebutuhan serverless ringan.

Kekurangan Netlify

  • Kuota gratis terbatas (bandwidth, menit build).
  • Tidak cocok menjalankan service long-running.
  • Beberapa fitur canggih (misal perutean lanjut) butuh konfigurasi ekstra.
  • Ada batasan pada fungsi serverless di tier gratis.

Hal Penting Lainnya

  • Environment Variables: diatur di dashboard (Site settings → Environment), jangan hardcode rahasia di repositori.
  • Netlify Forms: cukup menambahkan atribut netlify pada elemen <form> untuk menerima kiriman tanpa server.
  • Redirect & Rewrite: diatur lewat netlify.toml atau berkas _redirects.
  • Cache: konten statis disimpan di CDN; perubahan membutuhkan deploy ulang.
  • Apabila kelak membutuhkan server penuh, pelajari panduan VPS Debian 13.

Kesimpulan

Netlify cocok untuk siapa saja yang ingin website cepat tanpa repot mengelola server, termasuk pemula yang cukup menyeret berkas ke dalam browser.

Artikel Terkait