AI ile Oluşturulmuş Bir Web Sitesini Kendi Siteniz Olarak Heroku'ya Nasıl Yüklersiniz ve Özel Alan Adınızı Nasıl Kullanırsınız (Web Hosting Rehberi)
Giriş
ChatGPT, Canva, Gemini Canvas, Claude Artifacts veya Sider Web Creator gibi AI araçlarıyla bir site oluşturduktan sonra, bir sonraki büyük soru kendi alan adınız üzerinden siteyi ziyaret edebilmeniz için Heroku'da web hosting'in nasıl yönetileceğidir. Bu rehber, 'da bir projeyi dışa aktarmaktan, kişisel alan adınız altında tam teşekküllü bir web sitesine sahip olmaya kadar olan yolculukta size adım adım rehberlik ederken, web hosting ve Heroku yapılandırmasını da basitleştirir. Heroku, Amazon'un küresel altyapısı üzerinde çalıştığı ve otomatik ölçeklendirmeyi desteklediği için, bulutun esnekliğini ön uç dostu bir iş akışıyla elde edersiniz.
🎯 Ne Öğreneceksiniz
Heroku web hosting'i seçmeden önce AI ile oluşturulmuş proje dosyalarını doğru şekilde nasıl indireceğinizi ve anlayacağınızı.
Sitenizi Heroku'nun bulut tabanlı web hosting platformunda ücretsiz olarak yüklemek için adım adım talimatlar.
Heroku panosunda kendi özel alan adınızı nasıl satın alacağınızı ve bağlayacağınızı ve bunu en iyi uygulama web hosting DNS kayıtlarına nasıl bağlayacağınızı.
Heroku web hosting kurulumu yayına girdikten sonra sitenin tamamen profesyonel ve güvenilir görünmesini sağlamak için profesyonel ipuçları.
Heroku dahil çoğu web hosting platformu, temiz bir derleme klasörü bekler, bu nedenle öncelikle dosyalarınızı toplamanız gerekir.
1.1 Proje Dosyalarını İndirin
Web Creator site oluşturmayı bitirdikten sonra, sağ üst köşedeki İndir düğmesine tıklayın. Sistem projenizi paketlerken bekleyin. Heroku'ya yüklemeye hazır bir .zip dosyası alacaksınız. Zip dosyasını bilgisayarınızda herhangi bir yere çıkarın.
1.2 Dosya Yapısını Anlayın (Önemli!)
my‑website/
├── dist/ ⭐ Heroku için sitenin üretim derlemesi
│ ├── index.html → Sitenizin ana sayfası
│ ├── assets/ → Stiller ve komut dosyaları
│ └── ...
├── src/ 📝 Kaynak kodu klasörü
├── package.json 📦 Proje yapılandırması
└── Diğer yapılandırma dosyaları...
Önemli hatırlatma: birçok kişi kök klasördeki dosyaları çalıştırmaya çalışır—bu yanlıştır! dist/ içindeki içerikler doğrudan bir tarayıcıda veya Heroku web hosting'de çalışanlardır.
1.3 Yerel Önizleme Testi
dist/ klasörüne girin. index.html'ye çift tıklayın. Site tarayıcınızda açılır. Premium Heroku eklentileri için ödeme yapmadan önce her şeyin çalıştığını doğrulayın.
🚀 Adım 2: Bir Dağıtım Platformu Seçin
Aşağıda tamamen ücretsiz ve yeni başlayanlar için uygun web hosting seçenekleri bulunmaktadır; Heroku ön plandadır:
| |
|---|
| Tamamen ücretsiz katman • Git tabanlı dağıtım • Ücretsiz HTTPS • Özel alan adları • Dinamik arka uç desteği |
| Global CDN hosting • %100 ücretsiz • Edge fonksiyonları |
| Cilalı UI • Zengin özellikli hosting • Güçlü topluluk |
İpucu: Sonunda geçiş yapsanız bile, önce Heroku'da ustalaşmak size kaya gibi sağlam bir temel sağlar.
📤 Adım 3: Heroku'ya Dağıtın (Detaylı Rehber)
Heroku bir geliştirici platformu olarak markalaşmış olsa da, bunu tek tuşla kolaylığa sahip ultra modern web hosting olarak düşünün.
3.1 Heroku CLI'yı Kurun ve Oturum Açın
# macOS
brew tap heroku/brew && brew install heroku
heroku login # kimlik doğrulama için tarayıcıyı açar
CLI, yerel Git komutlarını Heroku platformuna bağlar.
3.2 Bir Heroku Uygulaması Oluşturun
git init # zaten Git altında değilse
heroku apps:create my‑awesome‑site # uygulama ve uzak "heroku" oluşturur
Heroku otomatik olarak rastgele bir *.herokuapp.com alt alan adı atar.
3.3 Siteyi Dağıtın
Yöntem A: Statik Buildpack Yüklemesi (yeni başlayanlar için en iyisi)
heroku buildpacks:set heroku‑buildpack‑static
# Buildpack'in dosyalarınızı bulabildiğinden emin olun
echo '{"root":"dist"}' > static.json
git add . && git commit -m "Initial commit"
git push heroku main
Yöntem B: Standart Git İş Akışı (geliştiriciler için en iyisi)
# her zamanki proje yapınızı koruyun
# Heroku Node, Python, Ruby vb.'yi otomatik olarak algılar.
git add . && git commit -m "Initial commit"
git push heroku main
2–3 dakika içinde Heroku projeyi oluşturur ve global olarak sunar.
3.4 Site URL'nizi Alın
Dağıtımdan sonra Heroku, edge‑network katmanı tarafından sunulan my‑awesome‑site.herokuapp.com gibi ücretsiz bir alan adı verir.
🌐 Adım 4: Kendi Alan Adınızı Satın Alın ve Bağlayın
4.1 Bir Alan Adı Satın Alın
Özel bir alan adı, Heroku dağıtımınızı hobiden profesyonele yükseltir. Önerilen kayıt şirketleri: Namecheap, GoDaddy, Alibaba Cloud, Tencent Cloud.
4.2 Alan Adını Heroku'ya Ekleyin
Heroku panonuzda, uygulamayı açın → Ayarlar → Alan Adları ve Sertifikalar → Alan Adı Ekle. Alan adınızı girin (örneğin, mywebsite.com). Heroku, gerekli DNS hedefini gösterir.
4.3 DNS Kayıtlarını Yapılandırın
Kayıt şirketinizde, www için bir CNAME kaydı (veya apex'te ALIAS/ANAME) oluşturun ve Heroku DNS hedefine yönlendirin. DNS yayılımı genellikle 10 dakika ila 24 saat sürer.
4.4 Alan Adı Bağlantısını Doğrulayın
DNS'nin yayılmasını bekleyin, ardından alan adınızı ziyaret edin—Heroku web hosting'iniz artık aktif! Heroku, Otomatik Sertifika Yönetimi aracılığıyla otomatik olarak HTTPS yayınlar.
✨ Adım 5: Sitenin Profesyonel Görünmesini Sağlayın
Cilalı bir site, ziyaretçilerinize Heroku dağıtımınızın ciddi olduğu konusunda güvence verir.
5.1 Özel Bir Favicon Ekleyin
32 × 32 px bir simge hazırlayın, favicon.ico olarak adlandırın, dist/ içine yerleştirin, commit yapın ve Heroku'ya gönderin.
5.2 Özel Meta Bilgisi Ekleyin
dist/index.html'yi düzenleyin:
<meta name="description" content="Your website description" />
<meta name="author" content="Your Name" />
5.3 Google Analytics (isteğe bağlı)
Google Analytics'e kaydolun, izleme snippet'ini kopyalayın ve <head> etiketi içine yapıştırın; Heroku CDN'leri bunu verimli bir şekilde önbelleğe alır.
🔧 Sorun Giderme
| |
|---|
| dist/ içeriğini doğru Heroku köküne yüklediğinizden emin olun; index.html'nin erişilebilir olduğunu onaylayın; tarayıcı önbelleğini temizleyin.
|
| Hem kayıt şirketindeki hem de Heroku panosundaki DNS kayıtlarını iki kez kontrol edin; yayılım için 24 saate kadar izin verin; alan adının etkin olduğunu doğrulayın. |
İçeriği düzenlemek istiyorum | Sider Web Creator'da yeniden oluşturun, yeni dosyaları indirin, Heroku'ya yeniden dağıtın veya kaynak kodunu değiştirip yeniden oluşturun. |
| Resimleri sıkıştırın; gzip'i etkinleştirin; hedef kitle Heroku bölgelerinden uzaktaysa bir CDN eklentisi düşünün. |
🎉 Özet
Tebrikler! Artık şunları yaptınız:
✅ Heroku web hosting için hazır olan AI ile oluşturulmuş web sitenizi başarıyla indirdiniz.
✅ Bulut tabanlı bir Heroku platformuna ücretsiz olarak dağıttınız.
✅ Kendi özel alan adınızı güvenceye aldınız.
✅ Heroku ortamını tamamen profesyonel görünecek şekilde cilaladınız.
Siteniz artık:
🌐 Güvenilir Heroku altyapısı tarafından desteklenen 7/24 çevrimiçi.
🏷️ Profesyonel bir alan adı altında sunuluyor.
🔒 HTTPS şifrelemesi ile korunuyor.
⚡ CDN edge düğümleri sayesinde global olarak hızlı.
🗝️ Tamamen size ait ve sizin tarafınızdan kontrol ediliyor.
💡 Sonraki Adımlar
SEO Optimizasyonu: Heroku dağıtımınız için arama sıralamalarını yükseltmek üzere hedeflenmiş anahtar kelimeler ve meta açıklamaları ekleyin.
Sosyal Paylaşım: büyük sosyal platformlar için paylaşım düğmelerini entegre edin.
Kullanıcı Analizi: Heroku'da barındırılan sitenizdeki ziyaretçi davranışını anlamak için bir trafik analiz aracı kurun.
Sürekli Güncellemeler: siteyi canlı ve alakalı tutmak için içeriği düzenli olarak yenileyin.
Yedeklemeler Önemlidir: Heroku ortamınızdaki tüm dosyaların periyodik yedeklemelerini planlayın.
Artık gerçek bir web sitesi sahibisiniz—bağlantınızı paylaşın ve yaratıcılığınızı dünyaya gösterin!
