Netlify Drop Nedir? Sürükle-Bırak ile Site Yayınlama Rehberi

Netlify Drop nedir? Build edilmiş bir web sitesi klasörünü tarayıcıdaki yükleme alanına sürükleyerek Netlify üzerinde deploy etmenizi sağlayan hızlı yayınlama yöntemidir. Basit bir HTML, CSS ve JavaScript sitesi için Git deposu kurmadan paylaşılabilir bir URL oluşturabilir. Vite, React veya başka bir build aracı kullanıyorsanız kaynak kod klasörünü değil, npm run build sonrasında oluşan yayın çıktısını yüklemeniz gerekir.

Netlify Drop’ın güçlü yanı hızıdır; sınırı ise build ve güncelleme sürecinin büyük ölçüde manuel kalmasıdır. Bu nedenle prototip, portföy ve kısa ömürlü microsite için çok pratik olabilirken, sık güncellenen ekip projelerinde Git tabanlı deploy daha sürdürülebilir olur.

Netlify Drop Nasıl Çalışır?

Netlify Drop, gönderdiğiniz klasördeki dosyaları yeni bir deploy olarak işler ve Netlify’nin dağıtım ağı üzerinden sunar. Klasör içinde bir giriş sayfası varsa site birkaç adımda erişilebilir hâle gelir. Kullanıcı açısından süreç basittir:

1. Yayınlanabilir site klasörünü hazırlayın. 2. Netlify Drop sayfasını açın. 3. Klasörü belirtilen alana sürükleyin. 4. Yükleme ve deploy tamamlandığında oluşan URL’yi kontrol edin. 5. Gerekirse projeyi adlandırın, görünürlüğünü değiştirin veya özel domain ekleyin.

Bu işlem kaynak kodu derlemek zorunda değildir. Drop’a src, Sass kaynakları, TypeScript dosyaları veya henüz build edilmemiş React bileşenleri bırakırsanız tarayıcı bunları çalışan uygulamaya dönüştürmez. Netlify, manuel deploy için kendisine verilen nihai dosyaları yayınlar.

Hangi Klasör Netlify Drop’a Yüklenir?

Doğru klasör, açıldığında içinde tarayıcının sunacağı index. html ve ona bağlı asset’leri barındıran klasördür.

Basit HTML sitesi

``text portfolio/ ├── index.html ├── about.html ├── css/ │ └── style.css ├── js/ │ └── main.js └── images/ └── profile.webp ``

Bu örnekte portfolio klasörü doğrudan yüklenebilir. index. html içindeki yollar klasör yapısıyla uyumlu olmalıdır.

Vite projesi

Kaynak proje genellikle şöyle görünür:

``text vite-project/ ├── src/ ├── public/ ├── package.json └── vite.config.js ``

Önce build alın:

``bash npm install npm run build ``

Daha sonra oluşan dist klasörünü yükleyin:

``text dist/ ├── index.html └── assets/ ├── index-[hash].js └── index-[hash].css ``

Eski Create React App projesi

Create React App tabanlı eski projelerde çıktı klasörü çoğunlukla build adını taşır. Ancak yeni React projesi kurarken güncel framework yaklaşımını kullanmak ve proje script’lerini esas almak daha sağlıklıdır. İnternetteki “React için her zaman build klasörünü yükleyin” önerisi Vite projelerinde yanlıştır.

Netlify Drop ile Site Yayınlama Adımları

1. Yerel dosya yollarını kontrol edin

CSS ve görsel yollarının yalnız kendi bilgisayarınızda çalışan mutlak dosya konumlarına bağlı olmadığından emin olun. Şu tür yol production’da çalışmaz:

``html <img src="C:\Users\Name\Desktop\site\images\hero.jpg" alt="Hero"> ``

Bunun yerine proje içindeki göreli yolu kullanın:

``html <img src="./images/hero.jpg" alt="Hero"> ``

Büyük-küçük harf farkına da dikkat edin. Yerel işletim sistemi Logo. png ile logo. png farkını tolere edebilir; deploy ortamında dosya bulunamayabilir.

2. Siteyi yerelde açın veya build’i doğrulayın

Basit statik projeyi yerel bir HTTP sunucusunda test etmek, file:// davranışıyla production davranışını karıştırmayı önler. Örneğin:

``bash npx serve . ``

Vite projesinde build’den sonra preview komutu kullanılabilir:

``bash npm run build npm run preview ``

Bu komutların varlığı ve biçimi package. json dosyanıza bağlıdır.

3. Drop sayfasına doğru klasörü bırakın

Klasörü sürükledikten sonra yüklemenin tamamlanmasını bekleyin. Büyük medya dosyaları işlemi uzatabilir ve sonraki bandwidth tüketimini artırabilir. Video gibi ağır varlıklar için web’e uygun sıkıştırma veya özel medya hizmeti değerlendirin.

4. Deploy URL’sini kontrol edin

Oluşan netlify. app URL’sinde yalnız ana sayfayı değil aşağıdakileri de açın:

• İkinci HTML sayfası,
• Menü bağlantıları,
• Görseller ve fontlar,
• Formlar,
• Mobil görünüm,
• Tarayıcı konsolu ve Network sekmesi.

Kredi tabanlı yeni hesaplarda proje görünürlüğü private başlayabilir. Bu durumda link sizin oturumunuzda açılırken başka bir ziyaretçide erişim isteyebilir. Proje görünürlüğünü bilinçli biçimde public yapın; preview ve production erişimini ayrı değerlendirin.

5. Proje adını ve domain’i düzenleyin

Rastgele üretilen alt alan adı yerine uygun bir proje adı seçebilirsiniz. Daha sonra özel alan adı bağlanabilir ve DNS doğrulaması tamamlandığında HTTPS sertifikası sağlanabilir. Domain bağlamak Drop yöntemini Git tabanlı projeye dönüştürmez; güncellemeler yine manuel deploy ile yapılır.

Netlify Drop ile Site Nasıl Güncellenir?

Aynı projeyi güncellemek için yeni yayın çıktısını ilgili projenin deploy alanına tekrar yükleyin. Her yükleme yeni ve atomik bir deploy oluşturur. Başarılı sürüm production olarak yayınlanır; eski deploy kayıtları rollback için kullanılabilir.

Güncelleme öncesinde üç şeyi kaydedin:

1. Hangi kaynak sürümden build aldığınız,
2. Build komutu ve kullanılan Node sürümü,
3. Yüklediğiniz çıktı klasörünün checksum veya tarih bilgisi.

Git bağlantısı olmadığında Netlify deploy’u ile kaynak koddaki commit arasında otomatik iz bulunmaz. Tek kişi için bu sorun olmayabilir; ekipte “hangi dosya canlıya çıktı? ” sorusunu büyütebilir. En azından release notu veya sürüm dosyası kullanın.

Netlify Drop ile Git Deploy Arasındaki Farklar

Kriter	Netlify Drop	Git tabanlı deploy
İlk kurulum	Çok hızlı	Repo yetkilendirme ve build ayarı gerekir
Build	Genellikle yerelde	Netlify build sisteminde
Güncelleme	Yeni klasörü manuel yükleme	Commit/push ile otomatik
Deploy logu	Build logu yerelde kalır	Install ve build logu platformda
Pull request preview	Doğal akışın parçası değil	Deploy Preview ile desteklenir
Kaynak sürüm izlenebilirliği	Manuel tutulur	Commit ile ilişkilidir
Ekip çalışması	Sınırlı	Review ve branch akışına daha uygun

Drop’ı “Git’in basitleştirilmiş aynısı” olarak değil, hazır dosyalar için ayrı bir yayınlama yolu olarak görmek gerekir.

Netlify Drop Hangi Projeler İçin Uygundur?

Aşağıdaki projelerde güçlü bir başlangıç seçeneğidir:

• HTML/CSS dersi veya workshop çıktısı,
• Kişisel portföy ve özgeçmiş sitesi,
• Etkinlik için tek sayfalık microsite,
• Tasarım prototipinin paylaşılabilir sürümü,
• Müşteriye statik demo gösterimi,
• Build çıktısının hızlı smoke testi.

Aşağıdaki durumlarda Git bağlantısı veya başka bir deployment yöntemi daha mantıklıdır:

• Birden fazla geliştirici düzenli değişiklik yapıyorsa,
• Her pull request için ayrı preview gerekiyorsa,
• Server-side build, test ve lint adımları otomatik çalışmalıysa,
• Environment variables ve deploy context’leri yoğun kullanılıyorsa,
• Kaynak commit ile canlı sürüm arasında güçlü audit trail gerekiyorsa.

SPA ve Client-Side Routing Sorunu

React Router gibi client-side router kullanan bir uygulama ana sayfada çalışıp /about adresi doğrudan açıldığında 404 verebilir. Tarayıcı, sunucudan fiziksel /about dosyasını ister; uygulamadaki route’u henüz JavaScript çalışmadan bilemez.

Netlify’de yaygın çözüm, publish klasörüne _redirects dosyası eklemektir:

``text /* /index.html 200 ``

Bu bir 301 yönlendirme değil, rewrite/fallback davranışıdır. İstek URL’si korunur ve index. html sunulur. Ancak her projede bu kuralı körü körüne kullanmayın. Gerçek statik sayfalar, API yolları veya framework adapter’ı olan uygulamalarda işlem sırası farklı olabilir.

Vite kullanıyorsanız _redirects dosyasını public klasörüne koymak, build sırasında dist içine kopyalanmasını sağlayabilir:

``text public/_redirects ``

Yayın öncesinde dist/_redirects dosyasının gerçekten oluştuğunu kontrol edin.

Formlar Drop ile Çalışır mı?

Statik HTML formu Netlify Forms işaretlemesi içeriyorsa ve form detection etkinse build/deploy sırasında algılanabilir:

``html <form name="contact" method="POST" data-netlify="true"> <label> E-posta <input type="email" name="email" required> </label> <label> Mesaj <textarea name="message" required></textarea> </label> <button type="submit">Gönder</button> </form> ``

Formun name özelliği ve input adları önemlidir. JavaScript ile sonradan render edilen formda build sistemi formu göremeyebilir; gizli statik form veya uygun SSR yaklaşımı gerekir. Form verisi kişisel bilgi içeriyorsa erişim, saklama, spam ve bildirim ayarları ayrıca yapılandırılmalıdır.

Yaygın Netlify Drop Hataları ve Çözümleri

Site yerine dosya listesi veya 404 görünüyor

Yüklenen klasörün kökünde index. html olmayabilir. Bir üst klasörü değil, gerçek publish dizinini seçin.

CSS ve görseller görünmüyor

Dosya yolları yanlış, base path uyumsuz veya büyük-küçük harf farklı olabilir. Network sekmesindeki 404 isteklerini kontrol edin.

React kaynak kodu açılmıyor

src veya proje kökü yüklenmiş olabilir. Önce npm run build, sonra dist yükleyin.

İç sayfaya doğrudan gidince 404 oluyor

SPA fallback eksik olabilir. _redirects dosyasını publish çıktısına ekleyin ve gerçekten deploy edildiğini doğrulayın.

Link yalnız kendi hesabımda açılıyor

Proje private olabilir. Production ve preview visibility ayarlarını kontrol edin; hassas içerik yoksa bilinçli biçimde public yapın.

Güncelleme görünmüyor

Yanlış projeye deploy etmiş, eski deploy URL’sini açmış veya service worker cache’ine takılmış olabilirsiniz. Production deploy ID’sini ve tarayıcı cache’ini kontrol edin.

Güvenlik ve Maliyet Açısından Bilinmesi Gerekenler

Drop’ın kolay olması, yüklenen her dosyanın güvenli olduğu anlamına gelmez. Publish klasörüne . env, kaynak haritası, yedek ZIP, müşteri verisi veya private belge koymayın. Statik olarak yayınlanan dosyaya URL bilen herkes erişebilir; JavaScript içine konan API key gizli kalmaz.

Kredi tabanlı planlarda production deploy, bandwidth ve web request gibi kullanım kalemleri vardır. Çok büyük asset’ler veya beklenmedik trafik aylık krediyi etkileyebilir. Siteyi public yapmadan önce dosya boyutlarını, cache davranışını ve usage bildirimlerini kontrol edin.

Netlify Drop Test Tablosu

Aşağıdaki test, yayından önce aynı statik proje ile doldurulmalıdır:

Kontrol	Beklenen	Gerçek sonuç
index.html açılışı	HTTP 200	Test edilmedi
CSS/JS asset’leri	404 olmamalı	Test edilmedi
İç HTML sayfası	Doğru URL’de açılmalı	Test edilmedi
SPA iç rotası	Fallback sonrası açılmalı	Test edilmedi
Güncelleme deploy’u	Yeni içerik production’da	Test edilmedi
Rollback	Önceki sürüm geri gelmeli	Test edilmedi

> Editör notu — zorunlu özgün kanıt: Bu taslak için gerçek klasör Drop’a yüklenmedi. Yayından önce basit HTML sitesi ve Vite build çıktısı ayrı ayrı yüklenmeli; klasör boyutu, toplam adım, deploy süresi, ilk URL, güncelleme ve rollback ekran görüntüleri kaydedilmelidir. Test edilmemiş süreler yazıya sayı olarak eklenmemelidir.

> Görsel notu: “Yanlış: proje kökü/src” ve “Doğru: index. html içeren dist/build klasörü” karşılaştırmasını gösteren iki panelli özgün görsel hazırlanmalıdır.

> İç link editör notu: HTML/CSS/JS Drop rehberi, GitHub deploy ve redirects yazıları yayınlandıktan sonra bu bölümlere bağlantı eklenmelidir.

Sık Sorulan Sorular

Netlify Drop ücretsiz mi?

Netlify’nin Free planında kullanılabilir; ancak hesap ve kullanım kredi sınırları vardır. Güncel plan kapsamı ve production deploy tüketimi yayın tarihinde pricing sayfasından kontrol edilmelidir.

ZIP dosyası mı, klasör mü yüklenir?

En güvenli başlangıç, publish klasörünü doğrudan yüklemektir. Desteklenen yükleme biçimleri değişebileceğinden Drop ekranındaki güncel yönergeyi izleyin; asıl kriter kökte çalışır index. html bulunmasıdır.

Netlify Drop React sitesini çalıştırır mı?

Evet, React uygulamasının build edilmiş statik çıktısı çalışabilir. Kaynak JSX dosyaları doğrudan çalışmaz. Vite projesinde çoğunlukla dist klasörü yüklenir.

Netlify Drop ile özel domain bağlanabilir mi?

Evet. Proje oluşturulduktan sonra özel domain ve SSL ayarları yapılabilir. Güncelleme yöntemi yine manuel deploy olarak kalır.

Drop ile yüklenen site sonradan Git’e bağlanabilir mi?

Projenin ve dashboard’un güncel seçeneklerine göre Git tabanlı akışa geçiş yapılabilir; geçişten önce production branch, build ayarları ve mevcut domain ilişkisinin nasıl korunacağını kontrol edin.

Kaynaklar

• Netlify Drop quickstart
• Create deploys
• Choose your Netlify path
• Redirects overview
• Netlify Forms setup
• Project visibility

Sonuç

Netlify Drop nedir sorusunun cevabı basittir: hazır web dosyalarını Git ve CI kurulumu olmadan hızla yayınlayan manuel deploy yoludur. En iyi sonucu almak için index. html içeren gerçek publish klasörünü seçin, asset yollarını ve SPA fallback’i kontrol edin, hassas dosyaları çıktının dışında bırakın ve her güncellemede hangi build’i yüklediğinizi kaydedin. Düzenli ekip geliştirmesi başladığında Git tabanlı deploy’a geçmek çoğu zaman daha izlenebilir olur.

Hazır site klasörünüzü sürükle-bırak yöntemiyle yayınlamak için [Netlify Drop’u açabilirsiniz](https://join. netlify. com/dk9a4ck38mdc-96ld6). Bu bir iş ortaklığı bağlantısıdır; bağlantı üzerinden kayıt olmanız veya ücretli plana geçmeniz halinde Ortak Alan komisyon kazanabilir.