Kembali ke Beranda

🌐 Panduan DNS Netlify

Pelajari cara mengonfigurasi DNS untuk proyek Netlify Anda dengan mudah

🎯 Apa itu DNS?

DNS (Domain Name System) adalah sistem yang menerjemahkan nama domain yang mudah diingat (seperti example.com) menjadi alamat IP yang dapat dipahami komputer.

Contoh: Ketika Anda mengetik "google.com", DNS menerjemahkannya menjadi alamat IP seperti "172.217.14.206"

🚀 Netlify & DNS

Netlify menyediakan hosting gratis dengan subdomain otomatis, tetapi Anda juga bisa menggunakan domain custom dengan konfigurasi DNS yang tepat.

Subdomain gratis: yoursite.netlify.app
Custom domain: yourdomain.com

📝 Jenis-jenis DNS Record

A Record

Mengarahkan domain ke alamat IPv4

example.com → 192.168.1.1

CNAME

Mengarahkan subdomain ke domain lain

www → example.com

MX Record

Untuk konfigurasi email server

mail.example.com

TXT Record

Untuk verifikasi dan konfigurasi

SPF, DKIM, dll

⚙️ Langkah-langkah Setup DNS

1

Deploy ke Netlify

Pertama, deploy proyek Anda ke Netlify melalui Git atau drag & drop.

Tips: Pastikan build command dan publish directory sudah benar di pengaturan build.

2

Beli Domain

Beli domain dari registrar seperti Namecheap, GoDaddy, atau Cloudflare.

Namecheap

Populer & murah

Cloudflare

DNS gratis

GoDaddy

Banyak pilihan

3

Konfigurasi DNS Records

Tambahkan DNS records di panel kontrol domain Anda:

A Record:
Name: @ (atau kosong)
Value: 75.2.60.5
CNAME Record:
Name: www
Value: yourdomain.com

🔗 Menambahkan Custom Domain

Di Dashboard Netlify:

  1. 1 Masuk ke dashboard Netlify
  2. 2 Pilih site yang ingin dikonfigurasi
  3. 3 Klik "Domain settings"
  4. 4 Klik "Add custom domain"
  5. 5 Masukkan domain Anda

Opsi Konfigurasi:

✅ Netlify DNS (Recommended)

Biarkan Netlify mengelola DNS Anda. Mudah dan otomatis.

🔧 External DNS

Gunakan DNS provider lain seperti Cloudflare atau registrar domain.

⚠️ Penting!

Propagasi DNS bisa memakan waktu 24-48 jam. Bersabarlah!

🔒 SSL Certificate

Netlify secara otomatis menyediakan SSL certificate gratis dari Let's Encrypt untuk semua domain.

✅ Otomatis

  • • SSL gratis dari Let's Encrypt
  • • Renewal otomatis
  • • HTTPS redirect
  • • Tidak perlu konfigurasi manual

🔧 Custom Certificate

  • • Upload certificate sendiri
  • • Untuk kebutuhan enterprise
  • • Wildcard certificates
  • • Extended validation

🔧 Troubleshooting DNS

❌ Domain tidak bisa diakses

Kemungkinan penyebab dan solusi:

  • • Cek DNS records sudah benar (A record ke 75.2.60.5)
  • • Tunggu propagasi DNS (24-48 jam)
  • • Pastikan domain sudah ditambahkan di Netlify
  • • Cek status domain tidak expired

⚠️ SSL Certificate Error

Jika muncul warning SSL:

  • • Tunggu beberapa menit setelah domain aktif
  • • Cek di Netlify dashboard apakah SSL sudah provisioned
  • • Pastikan DNS sudah propagasi dengan benar
  • • Coba renew SSL certificate manual

🔄 Redirect Issues

Masalah redirect www/non-www:

  • • Set primary domain di Netlify settings
  • • Pastikan CNAME record www sudah benar
  • • Cek _redirects file di root project
  • • Gunakan netlify.toml untuk konfigurasi

💻 Command Line Tools

Perintah berguna untuk debugging DNS:

Cek DNS Records:

nslookup yourdomain.com
dig yourdomain.com
dig www.yourdomain.com

Cek SSL Certificate:

openssl s_client -connect yourdomain.com:443
curl -I https://yourdomain.com

💰 Apakah Netlify Gratis Selamanya?

✅ Jawaban Singkat: YA!

Netlify memiliki paket gratis yang bisa digunakan selamanya untuk proyek personal dan small business dengan batasan tertentu.

🆓 Paket Gratis Termasuk:

  • 100GB bandwidth per bulan
  • 300 build minutes per bulan
  • Unlimited personal repositories
  • SSL certificate gratis
  • Custom domain support
  • Deploy previews
  • Form handling (100 submissions/bulan)

⚠️ Batasan Paket Gratis:

  • Maksimal 500 sites per team
  • Build timeout 15 menit
  • Tidak ada serverless functions
  • Tidak ada analytics
  • Community support saja
  • Shared build resources

📊 Perbandingan Paket

Fitur Starter (Gratis) Pro ($19/bulan) Business ($99/bulan)
Bandwidth 100GB 1TB 2.5TB
Build Minutes 300/bulan 25,000/bulan 25,000/bulan
Serverless Functions ❌ ✅ 125K invocations ✅ 2M invocations
Form Submissions 100/bulan 1,000/bulan 10,000/bulan
Analytics ❌ ✅ ✅ Advanced
Support Community Email Priority

✅ Paket Gratis Cocok Untuk:

  • • Portfolio personal
  • • Blog sederhana
  • • Landing page
  • • Proyek pembelajaran
  • • Prototype/MVP
  • • Website dengan traffic rendah-menengah

🚀 Upgrade Jika Butuh:

  • • Serverless functions (API)
  • • Analytics mendalam
  • • Form handling lebih banyak
  • • Build time lebih cepat
  • • Support prioritas
  • • Traffic tinggi (>100GB/bulan)

💡 Tips Mengoptimalkan Paket Gratis

🗜️ Optimasi Build

  • • Gunakan build cache
  • • Optimasi dependencies
  • • Skip unnecessary builds

📦 Optimasi Assets

  • • Compress images
  • • Minify CSS/JS
  • • Gunakan CDN untuk assets besar

⚡ Monitoring Usage

  • • Cek bandwidth usage rutin
  • • Monitor build minutes
  • • Set up alerts jika perlu

🎨 Cara Menambahkan Favicon di Netlify

💡 Jawaban Singkat

Tambahkan file favicon.ico di root folder proyek Anda, atau gunakan tag <link> di HTML untuk format lain seperti PNG/SVG.

1

Buat atau Siapkan Favicon

Siapkan gambar favicon dalam berbagai format dan ukuran:

favicon.ico

16x16, 32x32, 48x48px

Format klasik, kompatibel semua browser

favicon.png

32x32, 192x192px

Kualitas lebih baik, transparan

favicon.svg

Vector scalable

Modern, responsive, file kecil

2

Upload ke Root Folder

Letakkan file favicon di root folder proyek (sama level dengan index.html):

my-project/
├── index.html
├── favicon.ico ← Letakkan di sini
├── favicon.png ← Atau di sini
├── css/
└── js/

✅ Otomatis: Browser akan mencari favicon.ico di root secara otomatis!

3

Tambahkan Tag HTML (Opsional)

Untuk kontrol lebih baik, tambahkan tag link di <head> HTML:

<head>
<!-- Favicon klasik -->
<link rel="icon" type="image/x-icon" href="/favicon.ico">
<!-- PNG favicon -->
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<!-- SVG favicon (modern) -->
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>
4

Deploy ke Netlify

Push perubahan ke Git atau upload ulang ke Netlify:

📁 Drag & Drop

  1. 1. Buka Netlify dashboard
  2. 2. Drag folder proyek ke area deploy
  3. 3. Tunggu build selesai

🔄 Git Deploy

  1. 1. git add favicon.ico
  2. 2. git commit -m "Add favicon"
  3. 3. git push origin main

🛠️ Tools Pembuat Favicon

Favicon.io

Generator favicon dari text, emoji, atau gambar

Gratis

RealFaviconGenerator

Generator lengkap untuk semua platform

Gratis

Canva Favicon

Desain favicon dengan template siap pakai

Freemium

⚡ Quick Emoji Favicon

Buat favicon sederhana dari emoji:

🔧 Troubleshooting Favicon

❌ Favicon tidak muncul

  • • Pastikan file favicon.ico ada di root folder
  • • Cek nama file harus persis "favicon.ico"
  • • Clear browser cache (Ctrl+F5)
  • • Tunggu beberapa menit setelah deploy
  • • Cek di browser incognito/private

⚠️ Favicon blur atau pecah

  • • Gunakan ukuran yang tepat (16x16, 32x32px)
  • • Pastikan gambar tidak di-resize paksa
  • • Gunakan format PNG untuk kualitas lebih baik
  • • Hindari detail terlalu kecil pada favicon

💡 Best Practices

  • • Gunakan desain sederhana dan kontras tinggi
  • • Test di berbagai browser dan device
  • • Sediakan multiple ukuran untuk kompatibilitas
  • • Gunakan SVG untuk favicon modern
  • • Pertimbangkan dark mode dengan media query

🛠️ DNS Checker Tool

🔗 Link Berguna

What's My DNS

Cek propagasi DNS global

DNS Checker

Tool lengkap untuk cek DNS

SSL Labs

Test SSL certificate

Netlify Docs

Dokumentasi resmi

Cloudflare Learning

Pelajari DNS lebih dalam

MX Toolbox

Network diagnostic tools