2026'da Ücretsiz Statik Web Sitesi Nasıl Barındırılır: GitHub Pages, Cloudflare Pages ve İletişim Formları

Doğru statik web sitesi barındırma platformunu seçmek, sitenin hızlı, güvenli ve bakımı kolay kalmasını sağlarken yılda yüzlerce dolar tasarruf etmeni mümkün kılar. Ücretsiz katman seçenekleri artık oldukça olgunlaştı; GitHub Pages ve Cloudflare Pages gibi platformlar sıfır maliyetle production'a hazır altyapı sunuyor. Ancak çoğu rehberin atladığı bir sorun var: Statik bir sitede iletişim formlarını nasıl yönetirsin? Ortada formu işleyecek bir sunucu yok. Bu rehber, platform seçiminden çalışan bir iletişim formunu bağlamaya kadar tüm kurulum sürecini somut örnekler ve bilmen gereken gerçek kısıtlamalarla adım adım anlatıyor.

Ücretsiz Statik Barındırma Neden Dikkat Çekiyor?

Statik bir web sitesi, önceden oluşturulmuş HTML, CSS ve JavaScript dosyalarını doğrudan tarayıcıya sunar. Her sayfa yüklemesinde PHP, Node.js runtime veya veritabanı sorgusu çalışmaz. Bu sadelik, ücretsiz statik sayfa barındırmanın bu kadar güvenilir olmasının temel nedenidir: çökecek, yama yapılacak veya ölçeklendirilecek bir şey yok.

Küçük işletmeler, portfolyo siteleri, SaaS açılış sayfaları ve dokümantasyon siteleri için statik barındırma her kutuyu işaretler:

• Hız: Dosyalar bir CDN edge node'undan sunulur; küresel ölçekte genellikle 100ms'nin altında yanıt alırsın.
• Güvenlik: Sunucu tarafı runtime olmaması, saldırı yüzeyini önemli ölçüde küçültür.
• Maliyet: Hem GitHub Pages hem de Cloudflare Pages, genel ve pek çok özel proje için ücretsizdir.
• Basitlik: Kodu bir depoya push et, site otomatik olarak yayına girer.

Tek gerçek kısıt, dinamik işlevsellik. Kullanıcı kimlik doğrulama, alışveriş sepeti veya form işleme gibi sunucu tarafı mantık gerektiren her şey için harici bir servis gerekir. Kurulum adımlarına geçerken bunu aklında tut.

Platform Karşılaştırması: GitHub Pages ve Cloudflare Pages

Özet: Hedef kitlen küresel ve mümkün olan en hızlı yükleme sürelerini istiyorsan Cloudflare Pages öne çıkıyor. Ekibin zaten GitHub'da çalışıyorsa ve en basit kurulumu arıyorsan GitHub Pages de gayet iyi bir seçenek.

Adım Adım: GitHub Pages'te Yayına Al

Bu örnek, yayınlamaya hazır basit bir HTML/CSS sitene sahip olduğunu varsayıyor. Hugo veya Jekyll gibi bir statik site üreticisi kullanıyorsan süreç neredeyse aynı.

1. Bir GitHub deposu oluştur. github.com/new adresine git ve genel bir depo oluştur. Sitenin kök alan adında yayınlanmasını istiyorsan your-username.github.io olarak adlandır; bir alt dizin yolunda olmasını istiyorsan istediğin adı kullanabilirsin.
2. Site dosyalarını push et. Yerel proje klasöründen şu komutları çalıştır:

   git init
   git remote add origin https://github.com/your-username/your-repo.git
   git add .
   git commit -m "Initial deploy"
   git push -u origin main

3. GitHub Pages'i etkinleştir. Depoda Ayarlar > Pages bölümüne git. "Kaynak" altında main branch'ini ve /root klasörünü (ya da build çıktın oraya gidiyorsa /docs) seç. Kaydet'e tıkla.
4. Yayına girmesini bekle. GitHub 1-3 dakika içinde build edip yayına alır. Canlı URL (örn. https://your-username.github.io) Pages ayarları panelinde görünür.
5. Özel alan adı bağla (isteğe bağlı). Depo kök dizinine alan adını içeren bir CNAME dosyası ekle (örn. www.yoursite.com). Ardından DNS sağlayıcında your-username.github.io'a işaret eden bir CNAME kaydı oluştur. GitHub birkaç dakika içinde SSL sertifikasını otomatik olarak sağlar.

Adım Adım: Cloudflare Pages'te Yayına Al

1. Cloudflare'e kaydol veya giriş yap. pages.cloudflare.com adresini ziyaret et ve GitHub ya da GitLab hesabını bağla.
2. Yeni bir proje oluştur. "Proje oluştur" ardından "Git'e bağlan" seçeneğine tıkla. Listeden deponunu seç.
3. Build ayarlarını yapılandır. Siten düz HTML ise build komutunu boş bırak ve çıktı dizinini / ya da index.html dosyanın bulunduğu yere ayarla. Hugo için build komutunu hugo, çıktıyı public olarak ayarla. Jekyll için jekyll build komutunu ve _site çıktısını kullan.
4. Yayına al. "Kaydet ve Yayına Al" seçeneğine tıkla. Cloudflare deponun klonunu alır, build'i çalıştırır ve küresel edge ağına yayınlar. Siten hemen bir *.pages.dev alt alan adı alır.
5. Özel alan adı ekle. Proje panonunda "Özel alan adları" bölümüne git ve alan adını gir. Alan adın zaten Cloudflare DNS tarafından yönetiliyorsa kurulum tek tıkla tamamlanır. Değilse, kayıt şirketinde *.pages.dev adresine işaret eden bir CNAME kaydı eklemen gerekir.

Sonraki her git push işlemi ana branch'e otomatik yeniden yayını tetikler. Cloudflare ayrıca pull request'ler için önizleme dağıtımları oluşturur; bu da değişiklikleri canlıya almadan önce incelemek için oldukça kullanışlıdır.

Statik Sitene İletişim Formu Eklemek

Çoğu rehberin durduğu ve pek çok kişinin takıldığı yer burasıdır. Statik bir web sitesindeki iletişim formu, veriyi kendisine gönderemez - dinleyen bir sunucu yok. Üç gerçekçi seçeneğin var:

• Form backend servisi (önerilen): Formunun action özniteliğini gönderimi alan, doğrulayan ve sana e-postayla ileten bir üçüncü taraf endpoint'e yönlendirirsin.
• Serverless fonksiyon: Formu işleyen küçük bir fonksiyon yazarsın (Cloudflare Workers, AWS Lambda). Bu yaklaşım işe yarar ama kod gerektirir ve sürekli bakım ister.
• JavaScript fetch(): Form verilerini bir backend endpoint'ine göndermek için tarayıcının fetch API'sini kullanırsın. Teknik detaylar için JavaScript fetch() ile HTML form verisi nasıl gönderilir rehberimize bakabilirsin.

Çalışan bir forma ulaşmanın en hızlı yolu özel bir form servisidir. İşte Sendform kullanan somut bir örnek:

Somut Örnek: 5 Dakikada Çalışan Bir İletişim Formu

Sitene herhangi bir kod eklemeden önce bir Sendform hesabı oluşturup bir form endpoint'i oluşturman gerekiyor. Bu işlem yaklaşık iki dakika sürer:

1. Sendform.net'e kayıt ol. Ücretsiz bir hesap oluştur - kredi kartı gerekmiyor. Kayıttan sonra hazır bir varsayılan proje seni bekliyor olacak.
2. Form oluştur. Panoda "Yeni Form" seçeneğine tıkla. Forma bir ad ver, bir proje seç ve gönderileri almak istediğin e-posta adresini gir. Sendform, endpoint'i etkinleştirmeden önce bu adresi doğrulayacak.
3. Endpoint URL'ini kopyala. Form oluşturulduktan sonra https://sendform.net/!your-form-id formatında benzersiz bir endpoint URL'i göreceksin. Kopyala - bunu HTML'ine yapıştıracaksın.

Endpoint'in hazır olduğunda, aşağıdaki HTML'i statik sitene ekle:

<form action="https://sendform.net/!your-form-id" method="POST">
  <label for="name">Your Name</label>
  <input type="text" id="name" name="name" required>

  <label for="email">Your Email</label>
  <input type="email" id="email" name="email" required>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <button type="submit">Send Message</button>
</form>

your-form-id kısmını Sendform panosunda gösterilen ID ile değiştir. Her gönderi, kurulum sırasında onayladığın adrese e-postayla iletilir. Backend kodu yok, sunucu yok, aylık altyapı faturası yok. Gönderim sonrası yönlendirme sayfaları ve onay e-postaları dahil daha gelişmiş kullanıcı deneyimi kalıpları için statik web sitesi formları için en iyi uygulamalar rehberimizi oku.

Statik sitenin yanında bir web sitesi oluşturucu da kullanıyorsan, entegrasyon sürecini ayrıntılı biçimde ele aldığımız Sendform'u web sitesi oluşturucularla nasıl entegre edersin makalemize de göz atabilirsin.

Yapılan Yaygın Hatalar

Binlerce kullanıcının ücretsiz statik web barındırma kurulumunda yardımcı olduktan sonra en çok hayal kırıklığına yol açan hatalar şunlar:

1. 404 sayfasını unutmak

Bir rota bulunamadığında hem GitHub Pages hem de Cloudflare Pages genel bir hata sayfası gösterir. Kök dizinine özel bir 404.html dosyası oluştur. Bu, kullanıcıları sitende tutar ve deneyimlerini korur.

2. Gizli bilgileri genel bir depoya commit etmek

API anahtarları, form endpoint sırları ve e-posta adresleri asla genel bir GitHub deposunda bulunmamalı. Cloudflare Pages'te ortam değişkenleri kullan ya da .gitignore dosyasında listelenen özel bir yapılandırma dosyasına başvur.

3. Backend planı olmadan form oluşturmak

Bu en yaygın hata. Geliştiriciler güzel bir iletişim formu oluşturur, GitHub Pages'e push eder ve yayın gününde formun sessizce başarısız olduğunu keşfeder. Tek bir <input> etiketi yazmadan önce form backend'ine karar ver. Sendform gibi araçlar, gönderileri doğrudan e-postaya ileten bir iletişim formunu kod yazmadan kurmanı sağlar; bu da backend sorununu tamamen ortadan kaldırır.

4. Build önbelleği sorunlarını görmezden gelmek

Push işleminden sonra siten güncellenmiyorsa CDN önbelleği eski dosyaları sunuyor olabilir. Cloudflare Pages, yayına alındığında önbelleğini otomatik olarak temizler. GitHub Pages değişiklikleri daha yavaş yayar; 10 dakikaya kadar bekle ya da test sırasında varlık URL'lerine bir sorgu dizesi ekle.

5. Göreli yolları yanlış kullanmak

GitHub Pages siten username.github.io/project-name/ (bir alt dizin) adresinde yaşıyorsa tüm varlık yolları bu ön eki hesaba katmalıdır. /styles.css bağlantısı çalışmaz. Göreli yollar (./styles.css) kullan ya da statik site üreticinin baseURL ayarını alt dizinle eşleşecek şekilde yapılandır.

6. Form iş akışı otomasyonunu atlamak

Formun gönderi toplamaya başladıktan sonra yalnızca e-posta almaktan çok daha fazlasını yapabilirsin. Sendform, gönderileri otomatik olarak Slack'e, bir CRM'e veya bir tabloya yönlendirmeni sağlayan webhook'ları ve entegrasyonları destekler. Webhook'lar ve API'lerle form iş akışlarını otomatikleştirme rehberimiz, bunu backend kodu yazmadan nasıl kuracağını adım adım gösteriyor.

Sonuç

Ücretsiz statik web sitesi barındırma hiç bu kadar güçlü olmamıştı. GitHub Pages, GitHub ekosisteminde çalışan ekipler için uygunken Cloudflare Pages daha iyi küresel performans ve daha cömert bir ücretsiz katman sunuyor. Asıl zorluk barındırmanın kendisi değil; insanların takıldığı dinamik özellikler, özellikle iletişim formları. Her iki platformu özel bir form servisiyle eşleştirerek sıfır altyapı maliyetiyle tamamen işlevsel, profesyonel bir web sitesi elde edebilirsin. Yukarıdaki platform rehberlerinden biriyle başla, siteni canlıya al ve ardından ilk günden itibaren gönderileri güvenilir biçimde işlemek için Sendform'u kullanarak iletişim formunu bağla.

Dakikalar İçinde Statik Sitene İletişim Formu Ekle

GitHub Pages veya Cloudflare Pages'te barındırılan herhangi bir statik siteden form gönderilerini toplamak için Sendform'u kullan. Backend kodu yok, sunucu kurulumu yok, uğraş yok. Sadece formunun action özniteliğini endpoint'ine yönlendir ve işin bitti.

Sendform.net'te Ücretsiz Başla →

Sıkça Sorulan Sorular