Selamat! Anda telah menyelesaikan seluruh materi HTML Dasar. Sekarang Anda memiliki website yang sudah siap, tapi sayangnya hanya bisa diakses dari komputer Anda sendiri. Agar website bisa diakses oleh seluruh dunia, kita perlu mendeploy (mengunggah) website ke hosting. Di artikel ini, kita akan belajar cara mendeploy website HTML statis secara GRATIS menggunakan Netlify dan Vercel.
Apa Itu Deployment?
Deployment adalah proses mengunggah file website (HTML, CSS, JavaScript, gambar) ke server hosting sehingga bisa diakses oleh siapa saja melalui internet. Tanpa deployment, website hanya bisa dibuka di komputer Anda sendiri (localhost).
- Localhost: Website hanya bisa diakses dari komputer Anda (URL:
http://localhost/... atau file:///C:/.../index.html) - Hosting (Online): Website bisa diakses dari mana saja, oleh siapa saja (URL:
https://namasite.netlify.app)
Pilihan Hosting Gratis untuk HTML Statis
| Platform | Kelebihan | Domain Hasil | Cocok untuk |
|---|---|---|---|
| Netlify | Mudah, drag-and-drop, form handling, SSL gratis | namasite.netlify.app |
Pemula, portofolio, landing page |
| Vercel | Integrasi Git bagus, cepat, support framework | namasite.vercel.app |
Developer yang pakai Git |
| GitHub Pages | Gratis, integrasi dengan GitHub | username.github.io |
Pengguna GitHub |
| Render | Simple, SSL gratis | namasite.onrender.com |
Alternatif Netlify |
Netlify adalah pilihan paling mudah untuk pemula. Cukup drag-and-drop folder website Anda, dan dalam hitungan detik website sudah online!
Cara 1: Deploy ke Netlify (Drag and Drop - Termudah)
Langkah 1: Buka netlify.com dan klik "Sign up" (Daftar) menggunakan email atau akun GitHub/GitLab.
Langkah 2: Setelah login, Anda akan melihat dashboard Netlify.
Langkah 3: Drag and drop folder website Anda (folder yang berisi file index.html) ke area "Drag and drop your site folder here".
Langkah 4: Tunggu proses upload selesai (beberapa detik).
Langkah 5: Website Anda sudah online! Klik link yang diberikan (contoh: https://namasite.netlify.app).
Ilustrasi Proses Drag and Drop Netlify:
Drag and drop folder website Anda ke sini
Folder harus berisi index.html
⬇️ Setelah upload, Netlify akan memberikan URL seperti:
https://namasite.netlify.app
Cara 2: Deploy ke Netlify Melalui Git (GitHub)
Cara ini lebih profesional dan memungkinkan update otomatis saat Anda push ke GitHub.
Langkah 1: Upload file website Anda ke repository GitHub.
Langkah 2: Login ke Netlify dan klik "Add new site" -> "Import an existing project".
Langkah 3: Pilih GitHub dan authorize Netlify.
Langkah 4: Pilih repository yang berisi website Anda.
Langkah 5: Klik "Deploy site".
Langkah 6: Website Anda online! Setiap kali Anda push perubahan ke GitHub, Netlify akan otomatis memperbarui website.
Cara 3: Deploy ke Vercel
Langkah 1: Buka vercel.com dan daftar menggunakan akun GitHub/GitLab/Email.
Langkah 2: Install Vercel CLI (opsional) atau upload langsung melalui dashboard.
Langkah 3: Klik "Add New" -> "Project".
Langkah 4: Pilih repository GitHub yang berisi website Anda, atau drag-and-drop folder.
Langkah 5: Vercel akan otomatis mendeteksi dan mendeploy website.
Langkah 6: Website Anda online di https://namasite.vercel.app.
Mengubah Domain (Custom Domain)
Anda bisa menggunakan domain sendiri (misal: www.namasite.com) dengan cara:
- Beli domain di provider seperti Niagahoster, Namecheap, atau Cloudflare
- Di Netlify: Settings -> Domain Management -> Add custom domain
- Ikuti instruksi untuk mengarahkan DNS ke Netlify
Netlify menyediakan SSL gratis (HTTPS) untuk custom domain!
Contoh Proyek: Website Portofolio Sederhana
Berikut contoh website portofolio minimalis yang siap dideploy:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portofolio Saya - Web Developer</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
}
.hero {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-align: center;
padding: 80px 20px;
}
.hero h1 {
font-size: 48px;
margin-bottom: 15px;
}
.hero p {
font-size: 18px;
max-width: 600px;
margin: 0 auto;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 40px 20px;
}
.section-title {
text-align: center;
margin-bottom: 40px;
color: #1e293b;
}
.projects {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
.card {
background: #f8fafc;
border-radius: 12px;
padding: 20px;
text-align: center;
transition: transform 0.3s;
}
.card:hover {
transform: translateY(-5px);
}
.card h3 {
margin-bottom: 10px;
}
.btn {
display: inline-block;
background: #3b82f6;
color: white;
padding: 10px 20px;
border-radius: 8px;
text-decoration: none;
margin-top: 15px;
}
.btn:hover {
background: #2563eb;
}
footer {
background: #1e293b;
color: #94a3b8;
text-align: center;
padding: 30px;
margin-top: 40px;
}
@media (max-width: 768px) {
.hero h1 {
font-size: 32px;
}
}
</style>
</head>
<body>
<section class="hero">
<h1>Halo, Saya Andi</h1>
<p>Web Developer yang suka membuat website menarik dan responsif</p>
</section>
<div class="container">
<h2 class="section-title">Proyek Saya</h2>
<div class="projects">
<div class="card">
<h3>Website Portofolio</h3>
<p>Website portofolio pribadi yang responsif.</p>
<a href="#" class="btn">Lihat Demo</a>
</div>
<div class="card">
<h3>Landing Page</h3>
<p>Landing page modern untuk produk digital.</p>
<a href="#" class="btn">Lihat Demo</a>
</div>
<div class="card">
<h3>To-Do App</h3>
<p>Aplikasi daftar tugas sederhana dengan JavaScript.</p>
<a href="#" class="btn">Lihat Demo</a>
</div>
</div>
</div>
<footer>
<p>© 2024 - Portofolio Andi | Dibuat dengan HTML & CSS</p>
</footer>
</body>
</html>
Hasil visual portofolio:
Checklist Sebelum Deploy
Pastikan hal-hal berikut sudah siap sebelum mendeploy:
- File utama bernama index.html (wajib, ini yang akan dibuka pertama kali)
- Semua file (HTML, CSS, JS, gambar) sudah dalam satu folder
- Tautan ke file CSS dan JS menggunakan path relatif (bukan absolute seperti C:/Users/...)
- Gunakan huruf kecil untuk nama file (hindari spasi dan huruf kapital)
- Uji website di localhost sebelum deploy (buka index.html di browser)
- Pastikan semua link internal menggunakan path yang benar
- Lupa mengganti path file (misal:
src="/images/logo.png"seharusnyasrc="images/logo.png") - Nama file menggunakan huruf kapital atau spasi
- Tidak ada file
index.htmldi root folder - Link ke halaman lain menggunakan path absolut lokal (C:/...)
Mengupdate Website Setelah Deploy
Untuk Netlify (Drag and Drop): Cukup drag and drop folder yang sama lagi, Netlify akan otomatis mengganti file lama.
Untuk Netlify + GitHub: Push perubahan ke GitHub, Netlify akan otomatis mendeploy ulang.
Untuk Vercel + GitHub: Push perubahan ke GitHub, Vercel akan otomatis mendeploy ulang.
Perbandingan Netlify vs Vercel vs GitHub Pages
| Fitur | Netlify | Vercel | GitHub Pages |
|---|---|---|---|
| Kemudahan | Sangat mudah (drag and drop) | Mudah (integrasi Git) | Mudah (perlu Git) |
| SSL (HTTPS) | Gratis | Gratis | Gratis |
| Custom Domain | Gratis | Gratis | Gratis |
| Form Handling | Ada (gratis 100 submission/bulan) | Tidak ada | Tidak ada |
| Auto Deploy dari Git | Ya | Ya | Ya |
Selamat! Anda Telah Menyelesaikan Seri HTML Dasar
Anda telah mempelajari:
- Struktur dasar HTML dan berbagai tag penting
- CSS untuk mempercantik tampilan (inline, internal, external)
- Flexbox dan Grid untuk layout modern
- JavaScript dasar untuk interaktivitas (alert, prompt, event klik, dll)
- Responsive design dengan media query dan viewport
- Membuat navbar responsif dengan hamburger menu
- Mendeploy website ke hosting gratis (Netlify/Vercel)
Apa Selanjutnya? Lanjut ke Seri CSS!
Anda sudah memiliki fondasi HTML yang kuat. Sekarang saatnya mendalami CSS (Cascading Style Sheets) untuk membuat website yang lebih cantik, modern, dan profesional.
Materi yang akan dipelajari di seri CSS:
- CSS Selector (Tag, Class, ID) lebih dalam
- Pseudo-class dan Pseudo-element
- CSS Variables (Custom Properties)
- CSS Transitions dan Animations
- CSS Transform (scale, rotate, translate)
- Positioning (relative, absolute, fixed, sticky)
- CSS Grid Lanjutan
- Flexbox Lanjutan
- Responsive Design dengan media query
- CSS Framework (Tailwind CSS) - pengenalan
- Dan masih banyak lagi...
Link untuk melanjutkan ke seri CSS:
Lihat Seri CSS Dasar
Rekomendasi Sumber Belajar Lanjutan
- MDN Web Docs - Dokumentasi resmi dari Mozilla (referensi terbaik)
- freeCodeCamp - Kursus interaktif gratis dengan sertifikasi
- W3Schools - Tutorial singkat dan contoh kode
- YouTube: Web Programming UNPAS, BuildWith Angga - Tutorial video bahasa Indonesia
- Frontend Mentor - Latihan membuat website dari desain yang diberikan
Artikel Sebelumnya: HTML Dasar #41 - Meta Tag untuk SEO dan Sosial Media (Open Graph)
Artikel Selanjutnya: [Selesai] Terima kasih telah mengikuti seri HTML Dasar!
Selamat! Anda Lulus Seri HTML Dasar
Sekarang Anda memiliki kemampuan untuk membuat website sendiri dari nol.
Teruslah berlatih dan jangan berhenti belajar!