Netlify ile statik siteni yayınlamak: adım adım

Netlify, statik siteleri ve derlenen frontend projelerini bir GitHub deposundan yayına almanın kolay yollarından biri. Depoyu bağlıyorsun, derleme komutunu söylüyorsun; her push'ta site yeniden yayınlanıyor. Üstüne, form gönderimlerini toplamak gibi küçük ama işe yarayan özellikleri var. Bu yazı ücretsiz yayın serimizin Netlify rehberi.

Ne zaman Netlify?

• Statik siteler: portföy, belge sitesi, proje tanıtım sayfası
• Vite, Astro, Hugo, Eleventy gibi araçlarla derlenen projeler
• Bir iletişim formu olan ama backend yazmak istemediğin siteler

Ücretsiz planın kredi sistemi

Netlify'ın ücretsiz planı aylık kredi ile çalışıyor. Netlify'ın fiyat belgesine göre ücretsiz planda ayda 300 kredi var ve kredi bitince ek kredi satın alınamıyor. Harcamalar şöyle:

• Her üretim yayını: 15 kredi
• 1 GB trafik: 20 kredi
• 10.000 istek: 2 kredi

Yani ayda kabaca 20 üretim yayını ya da 15 GB trafik. Önemli bir ayrıntı: deploy önizlemeleri, branch yayınları ve başarısız derlemeler krediye sayılmıyor. Bu yüzden her küçük değişikliği doğrudan main'e push etmek yerine branch'te çalışıp hazır olunca birleştirmek, kredini korumanın en kolay yolu.

Adım adım ilk yayın

1. netlify.com'a GitHub hesabınla kaydol.
2. Panelde yeni bir proje ekle ve var olan bir depoyu içe aktarmayı seç. Git sağlayıcısı olarak GitHub'ı seçip depoya erişim izni ver.
3. Depoyu seç. Netlify yaygın araçları tanıyıp ayarları dolduruyor; doldurmazsa iki alanı kendin gir:
   • Build command: npm run build
   • Publish directory: Derleme çıktısının klasörü. Vite için dist, Create React App için build.
4. Gerekiyorsa ortam değişkenlerini ekle ve yayına al. Site birkaç dakika içinde rastgele-ad.netlify.app gibi bir adreste açılıyor; adı site ayarlarından değiştirebilirsin.

Ayarları koda yaz: netlify.toml

Ayarları panelde tutmak yerine deponun köküne bir netlify.toml dosyası koyabilirsin. Böylece ayarlar da kodla birlikte sürümlenir:

[build]
  command = "npm run build"
  publish = "dist"

# Tek sayfalık uygulama: bilinmeyen her yolu index.html'e yönlendir.
[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Son kural, React Router gibi istemci tarafı yönlendirme kullanan uygulamalar için önemli. O olmadan bir alt sayfayı doğrudan açtığında ya da sayfayı yenilediğinde 404 alırsın.

Backend yazmadan form

Bir iletişim formu için sunucu yazmak zorunda değilsin. HTML formuna bir öznitelik eklemen yeterli:

<form name="iletisim" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="iletisim" />
  <input name="email" type="email" required />
  <textarea name="mesaj" required></textarea>
  <button type="submit">Gönder</button>
</form>

Netlify formu yayın sırasında tanıyor ve gönderimler panelin formlar bölümünde birikiyor. React gibi formu JavaScript ile çizen projelerde Netlify'ın formu görebilmesi için ek bir adım gerekiyor; ayrıntılar Netlify'ın form belgesinde.

Deploy önizlemeleri

Bir pull request açtığında Netlify o değişiklik için ayrı bir önizleme adresi oluşturuyor. Ekip arkadaşların değişikliği birleştirmeden önce deneyebiliyor; üstelik bu önizlemeler krediye sayılmıyor.

Kendi alan adın

Site ayarlarındaki alan adı bölümünden kendi alan adını ekle. Netlify sana DNS'e eklemen gereken kayıtları gösteriyor; kayıtlar doğrulanınca HTTPS sertifikası kendiliğinden kuruluyor.

Sık takılınan yerler

• Sayfa boş geliyor: Publish directory yanlış olabilir. Derleme çıktısının hangi klasöre gittiğini kendi bilgisayarında npm run build ile kontrol et.
• Alt sayfada 404: Yukarıdaki yönlendirme kuralını ekle.
• Krediler bitti: Proje bir sonraki aya kadar duraklıyor. Sık yayın yapıyorsan branch'te çalışıp birleştirmeleri topla.

Serinin diğer yazılarında GitHub Pages, Vercel ve Render'ı anlatıyoruz. Takıldığın bir yer olursa re:make her pazar 15.00'te Buca'da buluşuyor; üye olmadan da gelebilirsin. Yeri ve saati burada.