Tutorial Step by Step Deploy Project ke Netlify - Perwira Learning Center

1. Apa itu Netlify?

    Netlify adalah platform hosting untuk website statis dan aplikasi web yang sangat populer di kalangan developer. Bayangkan Netlify seperti "Rumah untuk website kamu" yang:

• Gratis untuk project pribadi
• Langsung terintegrasi dengan GitHub
• Auto-deploy setiap kali kamu push code
• SSL/HTTPS gratis (biar website kamu aman)
• CDN global (website cepat diakses dari mana saja)

Kelebihan Netlify:

Fitur	Keuntungan
Continuous Deployment	Update otomatis setiap push ke GitHub
Preview Deploys	Lihat hasil sebelum publish ke production
Custom Domain	Bisa pake domain sendiri (www.namakamu.com)
HTTPS gratis	Gak perlu bayar untuk SSL

---

2. Persiapan Sebelum Deploy

Checklist yang Harus Disiapkan:

No	Kebutuhan	Keterangan
1	Akun GitHub	Punya repositori project yang mau di-deploy
2	Akun Netlify	Daftar gratis di https://app.netlify.com
3	File index.html	Pastikan file utama ada di project
4	Struktur project jelas	Tahu folder mana yang akan di-publish

Struktur Project yang Ideal:

text

project-anda/
├── index.html          ← WAJIB ADA! (halaman utama)
├── style.css           ← file CSS
├── script.js           ← file JavaScript
├── images/             ← folder gambar
└── (file lainnya)

PENTING: Netlify mencari file index.html sebagai halaman utama. Kalau gak ada, website kamu error 404! 

---

3. Cara 1: Deploy via GitHub (Rekomendasi)

    Ini adalah cara paling umum dan recommended karena setiap kali kamu push code ke GitHub, website otomatis update! 

Langkah 1: Push Project ke GitHub

bash

# 1. Inisialisasi git di folder project
git init

# 2. Tambah semua file
git add .

# 3. Commit pertama
git commit -m "Initial commit"

# 4. Hubungkan ke repository GitHub (ganti dengan URL repo kamu)
git remote add origin https://github.com/username/nama-repo.git

# 5. Push ke GitHub
git branch -M main
git push -u origin main

Langkah 2: Login atau Daftar ke Netlify

1. Buka https://app.netlify.com  
   
   
   
2. Klik "Sign up" atau "Log in" (bisa pake akun GitHub)  
    
3. Jika klik daftar, maka akan diarahkan untuk data pendaftaran

Langkah 3: Import Project dari GitHub

1. Di dashboard Netlify, klik tombol "Add new site" → pilih "Import From Git / Import an existing project" 
   
2.  Pilih GitHub sebagai Git provider   
   
3. Authorize Netlify untuk mengakses repositori GitHub kamu, pilih all repository 
   

Langkah 4: Pilih Repository

1. Cari dan pilih repository yang mau di-deploy 
   
2. Klik nama repository tersebut 
   

Langkah 5: Konfigurasi Build Settings

Di halaman "Review configuration", isi sesuai jenis project kamu, tapi biasanya udah terisi secara otomatis : 

Jenis Project	Build Command	Publish Directory
HTML/CSS/JS biasa	(kosongkan)	. atau ./
React / Vue / SPA	npm run build	build atau dist
Next.js	npm run build	out
Hugo / Jekyll	hugo / jekyll build	public / _site

Untuk project HTML biasa:

• Build command: biarkan KOSONG 
• Publish directory: . (titik) atau nama folder tempat file HTML kamu 

Langkah 6: Deploy!

1. Klik tombol "Deploy site" 
2. Tunggu proses build & deploy selesai (biasanya 1-2 menit)

Langkah 7: Lihat Hasil!

Setelah deploy selesai, kamu akan dapat URL seperti:

text

https://nama-project.netlify.app

Klik URL tersebut untuk melihat website kamu sudah online! 🎉 

Cara Kerja Auto-Deploy:

Setiap kali kamu push perubahan ke GitHub:

bash

git add .
git commit -m "Update fitur baru"
git push

Netlify otomatis rebuild dan deploy versi terbaru! 

---

4. Cara 2: Deploy Manual (Drag & Drop)

Cara ini cocok untuk:

• Project kecil / demo cepat
• Testing tanpa perlu Git
• Gak mau ribet setup repository 

Langkah-langkah:

1. Siapkan folder project kamu (pastikan ada index.html) 
2. Login ke Netlify → dashboard
3. Scroll ke bawah sampai nemu kotak "Drag and drop your site folder here" 
4. Drag folder project kamu ke kotak tersebut 
5. Tunggu proses upload selesai
6. Dapat URL! Website langsung online 

KEKURANGAN Cara Manual:

• Gak auto-update kalau ada perubahan file
• Harus drag & drop ulang setiap update
• Gak bisa kolaborasi tim via Git

Cocok untuk: Demo kilat, testing, project sekali jadi 

---

5. Cara 3: Deploy via Netlify CLI

Buat yang suka main di terminal, ini cara paling keren! 

Langkah 1: Install Netlify CLI

bash

# Install global
npm install -g netlify-cli

Langkah 2: Login ke Netlify

bash

netlify login

Ini akan membuka browser untuk login.

Langkah 3: Inisialisasi Project

bash

# Di dalam folder project kamu
netlify init

Ikuti instruksi yang muncul:

• Pilih "Create & configure a new site"
• Pilih tim (biasanya pilih default)
• Beri nama site (opsional)

Langkah 4: Deploy ke Production

bash

# Build dulu (kalo pake React/Vue)
npm run build

# Deploy ke production
netlify deploy --prod --dir=build
# Untuk HTML biasa: netlify deploy --prod --dir=.

Perintah CLI Berguna Lainnya:

Perintah	Fungsi
netlify deploy	Deploy ke draft (preview)
netlify deploy --prod	Deploy ke production
netlify open	Buka site di browser
netlify dev	Run project locally dengan fungsi Netlify

---

6. Konfigurasi Tambahan

File netlify.toml

Buat file netlify.toml di root project untuk konfigurasi :

toml

[build]
  command = "npm run build"       # build command
  publish = "build"               # folder yang di-publish

[build.environment]
  HUGO_VERSION = "0.155.3"        # versi framework (opsional)

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200                     # untuk SPA routing [citation:8]

Redirects untuk SPA (React/Vue)

Buat file _redirects di folder public atau build:

text

/*    /index.html    200

Ini penting agar routing React/Vue gak error 404. 

Environment Variables

Untuk menyimpan API Key, database URL, dll:

1. Di dashboard Netlify → Site settings → Environment variables 
2. Tambah variable seperti: 
• REACT_APP_API_URL
• STRIPE_KEY
3. Di kode, akses dengan process.env.REACT_APP_API_URL 

Custom Domain

Pengen pake domain sendiri? Gampang:

1. Di dashboard → Domain settings
2. Add custom domain
3. Ikuti instruksi untuk set DNS (biasanya tambah CNAME ke [site].netlify.app)

---

7. Troubleshooting

Error: "Page Not Found" setelah deploy

Penyebab: Netlify gak nemu file index.html 

Solusi:

• Pastikan ada file index.html di folder yang di-publish
• Cek Publish directory sudah benar (. atau build atau dist)
• Perhatikan huruf besar/kecil: Index.html berbeda dengan index.html 

Error: "CSS/JS/Image not loading" (404)

Penyebab: Path file aset salah 

Solusi:

• Gunakan root-relative path: /style.css (bukan ./style.css atau ../style.css)
• Di browser: buka DevTools → Network tab, lihat file mana yang 404 

Error: "React Router 404"

Penyebab: Routing di SPA gak dikenali server

Solusi: Tambah file _redirects di folder public dengan isi:

text

/*    /index.html    200

Build Failed di React/Next.js

Penyebab: Dependency error atau versi Node.js tidak cocok

Solusi:

• Pastikan semua dependency terinstall (npm install berhasil di lokal)
• Cek Node version di Netlify (Settings → Build & Deploy → Environment)

---

8. Tips & Best Practice

Tips dari Pro:

1. Gunakan Git dari awal - Biar bisa auto-deploy 
2. Buat branch untuk fitur baru - Setiap PR akan dapat preview URL otomatis 
3. Cek dulu di lokal sebelum push - Pastikan npm run build berhasil
4. Manfaatkan Deploy Previews - Setiap pull request dapat link preview, bagus buat testing 
5. Rollback mudah - Kalau update bermasalah, tinggal pilih deploy sebelumnya di dashboard 

Fitur Keren Netlify yang Bisa Dicoba:

Fitur	Fungsi
Deploy Previews	Setiap PR dapat URL preview sendiri
Branch Deploys	Setiap branch bisa jadi site terpisah
Split Testing	A/B testing untuk production
Forms	Handle form submission tanpa backend
Functions	Backend serverless tanpa setup server

Checklist Sebelum Deploy:

text

File index.html ada
Semua aset (CSS, JS, gambar) pakai path yang benar
Build sukses di lokal (npm run build)
Publish directory sudah benar
File _redirects sudah dibuat (untuk SPA)
Environment variables sudah di-set

---

🎉 Selamat! Website Kamu Sudah Online!

Sekarang website kamu bisa diakses dari seluruh dunia dengan URL:

text

https://nama-project.netlify.app

Next Steps:

• Ganti ke custom domain
• Tambah fitur dengan Netlify Functions
• Setup form submissions
• Optimasi performance

Referensi:

1. Netlify Docs: Get Started Guide 

2. Netlify Docs: Add New Project 

3. CoreUI: Deploy React to Netlify 

4. Hugo: Host on Netlify 

5. Bit: Deploy JavaScript with Netlify