HTML, CSS ve JavaScript Sitesi Netlify Drop ile Nasıl Yayınlanır?

HTML site Netlify ile yayınlama işlemi için çalışan dosyalarınızı tek klasörde hazırlayın, index. html dosyasının kökte bulunduğunu doğrulayın ve bu klasörü Netlify Drop alanına sürükleyin. Deploy tamamlandığında Netlify bir proje ve paylaşılabilir URL oluşturur. En çok hata; yanlış klasörün yüklenmesi, yerel dosya yollarının kullanılması ve JavaScript tabanlı iç rotalar için fallback kuralının unutulması nedeniyle yaşanır.

Bu rehber, build aracı kullanmayan sade bir HTML/CSS/JavaScript sitesini sıfırdan hazırlayıp yayınlama akışını anlatır. Vite veya React kullanıyorsanız önce build almanız ve oluşan dist klasörünü yüklemeniz gerekir.

1. Proje Klasörünü Doğru Biçimde Hazırlayın

Başlangıç için aşağıdaki yapı yeterlidir:

``text coffee-site/ ├── index.html ├── menu.html ├── css/ │ └── style.css ├── js/ │ └── app.js └── images/ ├── hero.webp └── logo.svg ``

Netlify Drop’a coffee-site klasörünü verdiğinizde kökteki index. html giriş sayfası olarak sunulur. index. html daha derindeki bir klasördeyse site kök URL’sinde 404 görebilirsiniz.

Dosya isimlerini web ortamına uygun tutun. Boşluk, Türkçe karakter veya farklı büyük-küçük harf kullanımı her zaman sorun çıkarmasa da ekipler ve farklı işletim sistemleri arasında hata riskini artırır. Ana Sayfa. JPG yerine ana-sayfa. jpg gibi tutarlı isimler tercih edin.

2. HTML Dosyanızın Bağlantılarını Kontrol Edin

Temel index. html örneği:

```html <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Kahve Atölyesi</title> <meta name="description" content="Kahve Atölyesi menüsü ve iletişim bilgileri."> <link rel="stylesheet" href="./css/style.css"> <script src="./js/app.js" defer></script> </head> <body> <header class="site-header"> <img src="./images/logo.svg" alt="Kahve Atölyesi"> <nav aria-label="Ana navigasyon"> <a href="./index.html">Ana sayfa</a> <a href="./menu.html">Menü</a> </nav> </header>

<main> <h1>İyi kahve, sade bir menü</h1> <button id="show-hours" type="button">Çalışma saatlerini göster</button> <p id="hours" hidden>Her gün 08. 00–22. 00</p> </main> </body> </html> ```

Buradaki . /css/style. css, . /js/app. js ve . /images/logo. svg yolları proje klasörüne göre göreli tanımlanmıştır. Bilgisayarınızdaki tam yolu kullanmayın:

``html <!-- Yanlış --> <link rel="stylesheet" href="/Users/name/Desktop/coffee-site/css/style.css"> ``

Yerel mutlak yol yalnız sizin bilgisayarınızda anlamlıdır. Deploy edildiğinde ziyaretçinin tarayıcısı bu dosyayı bulamaz.

3. CSS ve JavaScript Dosyalarını Basitçe Test Edin

Örnek CSS:

```css :root { font-family: system-ui, sans-serif; color: #1f1f1f; background: #fffaf3; }

body { max-width: 72rem; margin: 0 auto; padding: 1. 5rem; }

site-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

site-header img { width: 8rem; height: auto; } ```

Örnek JavaScript:

```js const button = document.querySelector("#show-hours"); const hours = document.querySelector("#hours");

button?. addEventListener("click", () => { hours. hidden = ! hours. hidden; }); ```

JavaScript dosyasını defer ile çağırmak, HTML parse edilmeden element arama sorununu azaltır. Yine de browser console’u kontrol edin. Cannot read properties of null, syntax error veya 404 varsa siteyi yüklemeden önce çözün.

4. Siteyi file:// Yerine Yerel Sunucuda Açın

index. html dosyasına çift tıklamak en temel görünümü gösterebilir; ancak modül import’ları, fetch çağrıları ve bazı güvenlik kuralları file:// altında farklı davranır. Küçük bir HTTP sunucusu kullanın:

``bash cd coffee-site npx serve . ``

Ardından terminalin verdiği http://localhost:... adresini açın. Başka seçenekler arasında editör eklentileri veya Python’un basit sunucusu bulunur:

``bash python3 -m http.server 8000 ``

Kontrol listesi:

• Ana sayfa ve menu.html açılıyor mu?
• CSS yükleniyor mu?
• Buton davranışı çalışıyor mu?
• Görsellerde 404 var mı?
• Mobil genişlikte taşma oluyor mu?
• alt, label ve başlık hiyerarşisi yeterli mi?

5. Netlify Drop ile Klasörü Yayınlayın

Netlify Drop sayfasını açın ve index. html içeren ana klasörü yükleme alanına bırakın. İşlem tamamlandığında bir Netlify projesi ve varsayılan alt alan adı oluşur.

Yükleme sonrasında yalnız ilk ekrana bakıp işlemi tamamlanmış saymayın. Production URL’sini yeni bir gizli pencere veya oturum açmadığınız başka bir tarayıcıda deneyin. Yeni kredi tabanlı hesaplarda proje varsayılan olarak private olabilir. Link yalnız sizin hesabınızda açılıyorsa proje visibility ayarını kontrol edin ve hassas içerik bulunmadığından emin olduktan sonra public yapın.

Netlify Drop kaynak kodunuz için build çalıştırmaz. Bu sade örnekte zaten build gerekmiyor. Sass, TypeScript veya paketlenmesi gereken modül kullanıyorsanız bunları önce yerelde CSS ve browser uyumlu JavaScript çıktısına dönüştürün.

6. Yayındaki Dosyaları Sistematik Biçimde Doğrulayın

Tarayıcı geliştirici araçlarında Network sekmesini açıp sayfayı yenileyin. Şunları inceleyin:

İstek	Beklenen durum	Olası sorun
/	200	index.html yanlış yerde
/css/style.css	200	Dosya yolu veya harf farkı
/js/app.js	200	Yanlış dizin veya MIME sorunu
/images/logo.svg	200	Görsel deploy’a dahil değil
/menu.html	200	Link yolu hatalı

Aynı zamanda Console sekmesindeki hataları okuyun. Site görsel olarak açılıyor olsa bile JavaScript hatası veya eksik font isteği kalmış olabilir.

HTTP başlıklarını hızlıca görmek için terminalden şu komut kullanılabilir:

``bash curl -I https://proje-adiniz.netlify.app/ ``

Bu komut yalnız header döndürür. Sonuçtaki status code, content type ve cache bilgileri temel doğrulama sağlar.

7. Siteyi Güncelleyin

HTML, CSS veya JavaScript dosyalarında değişiklik yaptıktan sonra yerel testi tekrar edin. Ardından güncel klasörü aynı Netlify projesinin manuel deploy alanına yükleyin. Yeni yükleme ayrı bir deploy sürümü oluşturur.

Manuel akışta canlı sürüm ile kaynak sürüm arasında otomatik commit bağı yoktur. Aşağıdaki basit sürüm dosyası izlenebilirlik sağlayabilir:

``json { "version": "1.2.0", "builtAt": "2026-08-23T12:00:00+03:00" } ``

Bu dosyada secret veya kişisel veri bulunmamalıdır. Ekipli projede Git repository kullanmak, değişiklik geçmişi ve review için daha güçlü bir çözüm sunar.

8. Özel 404 Sayfası Ekleyin

Klasörün köküne 404. html ekleyebilirsiniz:

``html <!doctype html> <html lang="tr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Sayfa bulunamadı</title> </head> <body> <main> <h1>Bu sayfayı bulamadık</h1> <p>Adres değişmiş veya yanlış yazılmış olabilir.</p> <a href="/">Ana sayfaya dön</a> </main> </body> </html> ``

Sade çok sayfalı HTML sitesinde gerçek olmayan URL’lerin 404 vermesi normal ve doğrudur. Her isteği index. html dosyasına rewrite etmek yalnız client-side router kullanan SPA’larda gerekir.

9. Redirect ve Rewrite Kuralları Ekleyin

Eski bir sayfayı yeni adrese taşımak için kökte _redirects dosyası oluşturabilirsiniz:

``text /eski-menu.html /menu.html 301 ``

Bu kural, ziyaretçiyi ve arama motorunu yeni URL’ye yönlendirir. SPA fallback örneği ise farklıdır:

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

200 kuralı URL’yi değiştirmeden içeriği başka dosyadan sunar. Çok sayfalı HTML sitenizde bunu gereksiz kullanırsanız yazım hatası olan URL’ler 404 yerine ana sayfayı gösterebilir. Kural sırası da önemlidir; özel yönlendirmeleri geniş wildcard kuralından önce yazın.

10. Basit İletişim Formu Ekleyin

Form detection etkin bir Netlify projesinde sade HTML formu şu şekilde işaretlenebilir:

```html <form name="contact" method="POST" data-netlify="true" action="/tesekkur.html"> <input type="hidden" name="form-name" value="contact">

<label> Adınız <input type="text" name="name" autocomplete="name" required> </label>

<label> E-posta <input type="email" name="email" autocomplete="email" required> </label>

<label> Mesaj <textarea name="message" required></textarea> </label>

<button type="submit">Gönder</button> </form> ```

Formu deploy ettikten sonra sentetik veriyle gönderim yapın ve dashboard’da göründüğünü doğrulayın. Gerçek kullanıcı verisine geçmeden önce gizlilik metni, saklama ihtiyacı, erişim yetkileri, spam koruması ve bildirim alıcılarını belirleyin.

Netlify Forms’un kredi tabanlı planlarda submission açısından ücretsiz ve sınırsız olarak belgelenmesi, kötüye kullanım riskini ortadan kaldırmaz. Honeypot veya uygun CAPTCHA, rate limiting ve veri minimizasyonu düşünülmelidir.

11. Özel Alan Adı ve HTTPS Ekleyin

Proje çalıştıktan sonra domain’i Netlify’ye ekleyebilirsiniz. DNS’i Netlify’de yönetebilir veya mevcut DNS sağlayıcınızda gerekli kayıtları tanımlayabilirsiniz. Apex ve www kayıtları sağlayıcının ALIAS/CNAME flattening desteğine göre farklılaşır; proje ekranındaki güncel yönergeleri kullanın.

DNS doğrulandıktan sonra Netlify TLS sertifikası sağlayabilir. DNS yayılımı hemen tamamlanmayabilir. Bu sırada:

• Eski ve yeni kayıtların çakışmadığını,
• AAAA kaydının yanlış hedefe gitmediğini,
• Nameserver değişikliğinin doğru registrar’da yapıldığını,
• CAA kayıtlarının sertifika üretimini engellemediğini

kontrol edin.

12. Güvenlik ve Performans Kontrolleri

Statik site basit olsa da şu dosyaları asla public klasöre koymayın:

• .env dosyaları,
• API private key’leri,
• Müşteri listeleri,
• Yedek arşivler,
• Taslak sözleşmeler,
• Sunucu yapılandırma dosyaları,
• Gereksiz source map’ler.

Client-side JavaScript içindeki her değer ziyaretçi tarafından görülebilir. Bir üçüncü taraf API secret gerektiriyorsa doğrudan browser’dan çağırmak yerine server-side Function kullanın.

Performans için görselleri web formatına dönüştürün, boyutlarını ihtiyaca göre küçültün, gereksiz kütüphaneleri kaldırın ve Lighthouse gibi bir araçla ölçüm alın. Netlify’nin edge cache’i kötü optimize edilmiş 12 MB hero görselini otomatik olarak iyi tasarlanmış bir asset’e dönüştürmez.

Yayın Öncesi Test Matrisi

Test	Yöntem	Sonuç
Ana sayfa	Gizli pencerede URL açma	Uygulanmadı
CSS/JS	Network sekmesi	Uygulanmadı
İkinci sayfa	Doğrudan /menu.html	Uygulanmadı
404	Rastgele URL	Uygulanmadı
Form	Sentetik submission	Uygulanmadı
Mobil	360 px viewport	Uygulanmadı
HTTPS	Sertifika ve mixed content	Uygulanmadı
Güncelleme	İkinci manuel deploy	Uygulanmadı

> Editör notu — yayın öncesi test: Bu taslaktaki kod örnekleri bu oturumda gerçek Netlify projesine deploy edilmedi. Yayından önce örnek klasör oluşturulmalı, HTML validator ve yerel sunucu kontrolünden geçirilmeli, Drop ile iki sürüm yayınlanmalı ve tablodaki gerçek HTTP sonuçları eklenmelidir.

> Görsel notu: Klasör ağacı, Drop alanı, oluşan URL, Network sekmesi ve ikinci deploy ekranını gösteren beş özgün ekran görüntüsü hazırlanmalıdır. Görsellerde kullanıcı adı, e-posta ve proje token’ları maskelenmelidir.

> İç link editör notu: Netlify Drop, redirects, Forms ve domain rehberleri yayınlandığında ilgili bölümlere bağlantı eklenmelidir.

Sık Sorulan Sorular

HTML sitesi için hosting ayarı yapmam gerekir mi?

Sunucu yapılandırması yazmanız gerekmez. Ancak doğru klasörü yüklemek, domain/DNS ayarını yapmak, görünürlüğü seçmek ve kullanım takibini sürdürmek yine gerekir.

CSS neden deploy’dan sonra çalışmıyor?

En yaygın neden yanlış göreli yol veya dosya isminde büyük-küçük harf farkıdır. Browser Network sekmesindeki CSS isteğini kontrol edin.

JavaScript modülleri çalışır mı?

Modern browser uyumlu ES modules çalışabilir. HTML’de type="module" kullanın ve yerel file:// yerine HTTP sunucusunda test edin. NPM paketleri build gerektiriyorsa kaynak dosyayı doğrudan yüklemeyin.

Netlify Drop ile database kullanabilir miyim?

Drop ile başlayan proje daha sonra Functions, Blobs veya Database gibi özelliklerle genişletilebilir. Ancak yalnız statik klasörü sürüklemek tek başına bu backend bileşenlerini kurmaz.

Siteyi her değişiklikte yeniden yüklemek gerekir mi?

Manuel Drop akışında evet. Otomatik build ve deploy için projeyi Git deposuna bağlamak daha uygundur.

Kaynaklar

• Netlify Drop quickstart
• Create deploys
• Redirects overview
• Forms setup
• Custom domains
• HTTPS and SSL

Sonuç

HTML site Netlify ile yayınlama sürecinin özü, çalışır ve temiz bir publish klasörü hazırlamaktır. index. html dosyasını kökte tutun, CSS/JavaScript yollarını yerel sunucuda test edin, klasörü Drop’a yükledikten sonra tüm asset ve sayfaları gizli pencerede doğrulayın. Güncelleme, 404, form, domain ve güvenlik kontrollerini ilk yayının parçası kabul edin; proje sık değişmeye başladığında Git tabanlı deploy’a geçin.

HTML, CSS ve JavaScript klasörünüzü 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.