Upload Website HTML/CSS ke Netlify

Kalau kamu punya folder berisi index.html, beberapa berkas CSS, dan gambar — situsmu bisa online dalam waktu di bawah satu menit, gratis, dengan HTTPS. Tidak perlu beli hosting, tidak perlu cPanel, tidak perlu FTP.

Panduan ini menjelaskan dua cara. Yang pertama tidak butuh pengetahuan Git sama sekali.

Cara 1: Seret dan lepas

Cara tercepat yang ada.

1. Rapikan foldermu

Pastikan strukturnya kira-kira begini, dan yang terpenting: berkas beranda harus bernama index.html dan berada di lapisan paling luar.

situs-saya/
├── index.html
├── tentang.html
├── css/
│   └── style.css
├── js/
│   └── script.js
└── gambar/
    └── foto.jpg

2. Buka Netlify Drop

Kunjungi app.netlify.com/drop. Kamu tidak perlu login untuk mencoba, meski nanti diminta mendaftar kalau ingin situsnya permanen.

3. Seret foldernya

Tarik folder situsmu ke area yang disediakan. Netlify mengunggahnya, dan beberapa detik kemudian memberimu alamat seperti https://sparkly-donut-3f2a1b.netlify.app.

Sudah. Situsmu online, sudah pakai HTTPS, dan bisa dibuka siapa pun.

4. Ganti nama situsnya

Nama acak itu bisa diganti. Di dashboard, buka Site configuration → Change site name, lalu isi sesukamu. Alamatnya jadi https://nama-pilihanmu.netlify.app.

Kekurangan cara ini

Setiap kali kamu mengubah sesuatu, kamu harus menyeret ulang seluruh folder. Tidak ada riwayat, tidak ada cara membatalkan perubahan. Untuk tugas kuliah atau demo cepat, tidak masalah. Untuk situs yang akan kamu urus berbulan-bulan, pakai cara kedua.

Cara 2: Lewat Git

Sedikit lebih panjang di awal, tapi setelahnya setiap perubahan cukup satu perintah — dan kamu punya riwayat lengkap yang bisa dikembalikan kapan saja.

1. Buat repositori

Buat repositori baru di GitHub, lalu dari dalam folder situsmu:

git init
git add .
git commit -m "situs pertama"
git branch -M main
git remote add origin https://github.com/namauser/situs-saya.git
git push -u origin main

2. Hubungkan ke Netlify

1. Di dashboard Netlify, klik Add new site → Import an existing project.
2. Pilih GitHub, lalu pilih repositorimu.
3. Untuk situs HTML biasa, kosongkan build command dan isi publish directory dengan tanda titik (.).
4. Klik Deploy site.

Situs HTML biasa tidak perlu di-build — tidak ada yang perlu dikompilasi. Kalau kamu mengisi build command dengan sesuatu, deploy justru akan gagal.

3. Memperbarui situs

Sejak sekarang, cukup:

git add .
git commit -m "perbarui halaman tentang"
git push

Netlify mendeteksi push itu dan memperbarui situsmu otomatis dalam hitungan detik.

Pasang domain sendiri

Kalau kamu sudah punya domain, buka Domain management → Add a domain, masukkan domainmu, lalu ikuti petunjuk DNS yang ditampilkan. Sertifikat SSL diterbitkan otomatis setelah DNS terverifikasi, jadi situsmu langsung berjalan di HTTPS tanpa biaya tambahan.

Langkah DNS lengkapnya — termasuk beda A record dan CNAME serta cara menangani domain root — ada di panduan custom domain dan SSL.

Masalah yang sering muncul

Halaman 404 padahal sudah ter-upload

Berkas berandamu tidak bernama index.html, atau tidak ada di lapisan paling luar. Nama Index.html dengan I besar juga tidak dihitung — server Netlify membedakan huruf besar-kecil, tidak seperti Windows.

CSS tidak termuat

Periksa penulisan path di tag <link>. Ini yang paling sering: berkas ada di css/style.css, tapi ditulis CSS/Style.css. Di laptopmu jalan, di server tidak.

<link rel="stylesheet" href="css/style.css">

Gambar tidak muncul

Penyebabnya sama — kapitalisasi, atau ekstensi yang salah tulis. foto.JPG dan foto.jpg adalah dua berkas berbeda bagi server.

Perubahan tidak kelihatan

Browsermu menyimpan versi lama. Tekan Ctrl+Shift+R (atau Cmd+Shift+R di Mac) untuk memuat ulang tanpa cache.

Tautan antar halaman rusak

Pakai path relatif tanpa garis miring di depan untuk situs sederhana:

<!-- benar -->
<a href="tentang.html">Tentang</a>

<!-- juga benar, kalau situsmu di root domain -->
<a href="/tentang.html">Tentang</a>

Sedikit tambahan yang membuat situsmu lebih rapi

Buat berkas _redirects (tanpa ekstensi) di folder situsmu untuk membuang akhiran .html dari alamat:

/tentang    /tentang.html    200
/kontak     /kontak.html     200

Setelah itu situsku.com/tentang bekerja, tanpa .html. Untuk halaman 404 yang tidak polos, cukup sediakan berkas bernama 404.html — Netlify memakainya otomatis.

Sebelum upload: enam hal yang layak dicek

Lima menit di sini menghemat banyak kebingungan nanti.

1. Ada tag viewport? Tanpa ini situsmu tampil kekecilan di ponsel.
   <meta name="viewport" content="width=device-width, initial-scale=1">
2. Ada <title> di tiap halaman? Ini yang muncul di tab browser dan di hasil pencarian.
3. Ada atribut lang di tag html? Tulis <html lang="id"> supaya pembaca layar membacanya dengan benar.
4. Gambar sudah dikecilkan? Foto langsung dari kamera bisa 5 MB. Kecilkan sampai di bawah 300 KB — pengunjung dari ponsel akan merasakan bedanya.
5. Semua gambar punya alt? Untuk aksesibilitas, dan supaya ada yang tampil kalau gambarnya gagal dimuat.
6. Tidak ada path dari laptopmu sendiri? Cari file:/// atau C:/Users/ di kodemu. Path seperti itu hanya jalan di komputermu.

Menambahkan halaman baru

Buat berkas HTML baru di folder yang sama, lalu tautkan dari halaman lain. Netlify menerbitkannya tanpa setelan tambahan.

situs-saya/
├── index.html
├── tentang.html      <-- baru
└── css/style.css

Kalau kamu ingin alamatnya rapi seperti /tentang tanpa akhiran .html, ada dua cara. Yang pertama pakai berkas _redirects seperti dijelaskan di bawah. Yang kedua, taruh tiap halaman di foldernya sendiri sebagai index.html:

situs-saya/
├── index.html
└── tentang/
    └── index.html

Cara kedua bekerja di semua hosting statis tanpa konfigurasi apa pun, jadi itu yang saya sarankan kalau situsmu akan berumur panjang.

Batas paket gratis Netlify

Untuk situs HTML biasa, menit build tidak terpakai sama sekali — tidak ada yang perlu di-build. Yang paling mungkin kamu sentuh adalah batas submission form, kalau situsmu ramai.

Ringkasan

Kalau nanti situsmu berkembang dan kamu mulai lelah menyalin header dan footer ke tiap berkas HTML, itu tandanya waktunya pindah ke generator situs statis. Yang paling ringan untuk dipelajari dari HTML biasa adalah Eleventy — langkah deploy-nya ada di cara deploy Eleventy ke Netlify.

Kalau kamu ingin memahami keseluruhan alurnya lebih dulu, mulai dari panduan lengkap deploy website.