📌 İçindekiler
- Ücretsiz Hosting ile React Site Yayınlama Rehberi
- React Sitesi Ücretsiz Hosting Üzerinde Nasıl Çalışır?
- Ücretsiz React Hosting Seçenekleri
- Hangi Platformu Seçmelisiniz?
- React Projesini Yayına Hazırlama
- 1. Üretim Derlemesini Oluşturun
- 2. Üretim Çıktısını Yerel Ortamda Kontrol Edin
- 3. Projeyi Bir Git Deposuna Ekleyin
- Adım Adım Ücretsiz Hosting ile React Site Yayınlama
- 1. Hosting Hesabınızı Oluşturun ve Depoyu Bağlayın
- 2. Derleme Ayarlarını Girin
- 3. Ortam Değişkenlerini Tanımlayın
- 4. Dağıtımı Başlatın ve Siteyi Test Edin
- 5. Otomatik Yayını Etkin Kullanın
- GitHub Pages ile React Sitesi Yayınlarken Dikkat Edilecekler
- React Router Kullanırken 404 Hatası Nasıl Önlenir?
- Ücretsiz Hosting İçin Alan Adı ve HTTPS Ayarları
- React Sitesinde SEO ve Performans Nasıl İyileştirilir?
- Sayfa Başlıklarını ve İçerik Yapısını Düzenleyin
- Yükleme Hızını İyileştirin
Ücretsiz Hosting ile React Site Yayınlama Rehberi
📌 İlginizi Çekebilir: Ücretsiz Web Sitesi Açma Yöntemleri
React ile geliştirdiğiniz bir portföyü, kurumsal tanıtım sayfasını veya kişisel projenizi internete açmak için ücretli bir sunucu kiralamak zorunda değilsiniz. Ücretsiz hosting ile React site yayınlama, özellikle statik dosyalar olarak derlenebilen projelerde oldukça pratik bir seçenektir. GitHub Pages, Cloudflare Pages, Netlify ve Vercel gibi platformlarla projenizi bir Git deposuna bağlayabilir, otomatik dağıtım yapabilir ve HTTPS üzerinden erişilebilir hâle getirebilirsiniz.
Bu rehberde ücretsiz React hosting seçeneklerini, Vite tabanlı bir projenin yayın ayarlarını, alan adı bağlantısını ve sık karşılaşılan hataların çözümlerini bulacaksınız. Ücretsiz paketlerin limitleri ve kullanım koşulları zamanla değişebileceği için yayın öncesinde seçtiğiniz sağlayıcının güncel planını kontrol etmeniz önemlidir.
React Sitesi Ücretsiz Hosting Üzerinde Nasıl Çalışır?
📌 İlginizi Çekebilir: Ücretsiz Web Sitesi Veren Platformlar
Standart bir istemci taraflı React uygulaması, geliştirme sırasında Node.js araçlarını kullanır. Ancak üretim derlemesi tamamlandığında ortaya HTML, CSS, JavaScript ve görsel dosyalar çıkar. Statik hosting hizmetleri bu dosyaları ziyaretçilerin tarayıcısına sunar. React kodunuzun büyük bölümü de ziyaretçinin tarayıcısında çalışır.
Bu nedenle geliştirme bilgisayarınızda çalışan sunucuyu internete açık tutmanız gerekmez. Örneğin Vite tabanlı bir projede üretim çıktısı genellikle dist klasörüne yazılır; hosting platformu bu klasörün içeriğini yayınlar.
Buradaki önemli ayrım, ön yüz ile arka uç arasındadır. React arayüzünü ücretsiz yayınlamak, uygulamanın veritabanını veya özel API sunucusunu da otomatik olarak barındırmak anlamına gelmez. Kullanıcı kaydı, ödeme işlemleri ya da güvenli veri işleme gibi özellikler için ayrıca bir arka uç hizmeti gerekebilir.
Web sitesi kurma sürecine yeni başlıyorsanız alan adı ve hosting gibi temel kavramları Ücretsiz Web Sitesi Nasıl Açılır? rehberimizden öğrenebilirsiniz.
Ücretsiz React Hosting Seçenekleri
Doğru platform, projenizin çalışma biçimine ve dağıtım beklentinize göre değişir. Basit bir portföy için statik yayın yeterliyken, ekip projelerinde önizleme bağlantıları ve otomatik dağıtım daha önemli olabilir.
| Platform | Öne Çıkan Kullanım | Yayınlama Yöntemi | React Router İçin Dikkat Edilecek Nokta |
|---|---|---|---|
| Cloudflare Pages | CDN üzerinden sunulan statik React uygulamaları | Git entegrasyonu veya doğrudan çıktı yükleme | SPA geri dönüş davranışı, proje yapısı ve yönlendirme kurallarıyla birlikte kontrol edilmelidir. |
| Netlify | Kolay dağıtım ve dal bazlı önizleme isteyen projeler | Git entegrasyonu veya manuel klasör yükleme | İç rotalar için index.html dosyasına rewrite kuralı gerekebilir. |
| Vercel | Git tabanlı geliştirme ve önizleme dağıtımları | Git entegrasyonu veya komut satırı | Statik SPA projelerinde iç rotalar için rewrite ayarı gerekebilir. |
| GitHub Pages | Portföyler, proje tanıtımları ve dokümantasyon | GitHub Actions veya yayın dalı | Genel amaçlı SPA rewrite desteği yoktur; HashRouter pratik bir alternatiftir. |
Ücretsiz paketleri yalnızca depolama alanına göre karşılaştırmayın. Trafik veya istek kotaları, derleme limitleri, fonksiyon kullanımı, ticari kullanım koşulları ve limit aşımında uygulanacak davranış da kararınızı etkiler. Bazı hizmetlerde kota dolunca yayın durabilir; bazılarında ise planınıza ve ödeme ayarlarınıza bağlı ek ücret oluşabilir.
Hangi Platformu Seçmelisiniz?
- Basit bir portföy yayınlayacaksanız: GitHub Pages veya Cloudflare Pages uygun başlangıç seçenekleridir.
- Her kod güncellemesinde otomatik yayın istiyorsanız: Git entegrasyonu sunan platformlardan yararlanabilirsiniz.
- Değişiklikleri yayına almadan incelemek istiyorsanız: Netlify, Vercel ve Cloudflare Pages gibi önizleme dağıtımı sunan seçenekleri değerlendirebilirsiniz.
- SSR veya sunucu fonksiyonları kullanıyorsanız: Seçtiğiniz React çatısının ve çalışma zamanının platformda desteklendiğini doğrulamalısınız.
React Projesini Yayına Hazırlama
Hosting hesabı açmadan önce uygulamanızın üretim derlemesinin sorunsuz çalıştığından emin olun. Geliştirme ortamında açılan bir proje, üretimde eksik ortam değişkenleri veya yanlış dosya yolları nedeniyle hata verebilir.
1. Üretim Derlemesini Oluşturun
Vite kullanan standart bir React projesinde bağımlılıkları yüklemek için npm install, üretim çıktısını oluşturmak için npm run build komutunu çalıştırabilirsiniz. Bu komutların kullanılabilmesi için projenizin package.json dosyasında ilgili betiklerin tanımlı olması gerekir.
Derleme başarılıysa çoğunlukla dist klasörü oluşur. Eski Create React App projelerinde ise çıktı klasörü genellikle build adını taşır. Hosting panelindeki yayın dizini ayarı, projenizin gerçekten ürettiği klasörle eşleşmelidir.
2. Üretim Çıktısını Yerel Ortamda Kontrol Edin
Standart Vite projelerinde npm run preview komutuyla üretim çıktısını yerel ortamda inceleyebilirsiniz. Bu önizleme sunucusu gerçek hosting hizmetinin yerine geçmez; ancak derlenen uygulamadaki birçok sorunu yayın öncesinde yakalamanıza yardımcı olur.
- Ana sayfanın ve menü bağlantılarının çalıştığını kontrol edin.
- Görsellerin, yazı tiplerinin ve stil dosyalarının yüklendiğinden emin olun.
- Mobil ekranlarda taşma veya bozuk yerleşim olup olmadığını inceleyin.
- API isteklerini ve hata mesajlarını tarayıcının geliştirici araçlarından kontrol edin.
- Formları ve kullanıcı etkileşimlerini gerçek kullanım senaryolarıyla test edin.
3. Projeyi Bir Git Deposuna Ekleyin
Git tabanlı yayın kullanacaksanız projenizi GitHub veya platformun desteklediği başka bir sağlayıcıdaki depoya aktarın. Kaynak dosyaları, package.json ve kullandığınız paket yöneticisinin kilit dosyası depoda bulunmalıdır. node_modules klasörünü yüklemeyin; hosting platformu bağımlılıkları derleme sırasında kurar.
Gizli anahtarları ve hassas yapılandırmaları Git deposuna göndermeyin. Ortam dosyalarını uygun şekilde dışarıda bırakın ve gereken değişkenleri platformun ayarlar bölümünde tanımlayın. Bununla birlikte, tarayıcı koduna aktarılan değişkenlerin gizli kalmayacağını unutmayın.
Adım Adım Ücretsiz Hosting ile React Site Yayınlama
Aşağıdaki süreç, Cloudflare Pages, Netlify ve Vercel gibi Git tabanlı dağıtım hizmetlerinde benzer şekilde işler. Paneldeki seçeneklerin isimleri farklı olsa da temel mantık aynıdır: depoyu bağlayın, derleme ayarlarını tanımlayın ve çıktıyı yayınlayın.
1. Hosting Hesabınızı Oluşturun ve Depoyu Bağlayın
Seçtiğiniz platformda hesap oluşturduktan sonra yeni proje ekleme seçeneğini açın. Git hesabınıza bağlantı izni verin ve React projenizin bulunduğu depoyu seçin. Mümkünse erişim yetkisini yalnızca gerekli depolarla sınırlandırın.
2. Derleme Ayarlarını Girin
Vite tabanlı standart bir React uygulamasında yaygın ayarlar şunlardır:
- Framework seçimi: Vite veya uygun React şablonu.
- Build command: npm run build.
- Output directory: dist.
- Root directory: package.json dosyasının bulunduğu proje klasörü.
- Production branch: Yayına almak istediğiniz dal; çoğu projede main.
Projeniz bir monorepo içindeyse kök dizin ayarına özellikle dikkat edin. Ayrıca platformun kullandığı Node.js sürümünün, projenizin bağımlılıklarıyla uyumlu olduğundan emin olun.
3. Ortam Değişkenlerini Tanımlayın
API adresi gibi yapılandırmaları hosting paneline ekleyin. Vite projelerinde istemci koduna açılan değişkenler varsayılan olarak VITE_ önekiyle tanımlanır. Örneğin VITE_API_URL, uygulamanın hangi API adresine istek göndereceğini belirlemek için kullanılabilir.
VITE_ önekli değişkenler bir sır saklama yöntemi değildir. Derleme sırasında istemci paketine dahil edilen değerlere ziyaretçiler erişebilir. Veritabanı şifresi, özel servis anahtarı ve ödeme sağlayıcısının gizli anahtarı yalnızca güvenli sunucu tarafında tutulmalıdır. Statik derlemeye giren ortam değişkenlerini değiştirdiğinizde genellikle yeniden dağıtım yapmanız gerekir.
4. Dağıtımı Başlatın ve Siteyi Test Edin
Deploy işlemini başlattığınızda platform kaynak kodunuzu alır, bağımlılıkları kurar ve üretim çıktısını yayınlar. İşlem başarılı olduğunda sağlayıcının ücretsiz alt alan adı üzerinden sitenize erişebilirsiniz.
Yalnızca ana sayfayı açmakla yetinmeyin. Bir iç sayfaya gidip tarayıcıyı yenileyin, bağlantıyı yeni sekmede açın ve API bağlantılarını kontrol edin. Böylece yönlendirme sorunlarını ziyaretçilerinizden önce fark edebilirsiniz.
5. Otomatik Yayını Etkin Kullanın
Git entegrasyonu yapılandırıldığında üretim dalına gönderdiğiniz değişiklikler genellikle yeni bir dağıtım başlatır. Önizleme dağıtımları destekleniyorsa tasarım ve işlev değişikliklerini üretim sitesini etkilemeden inceleyebilirsiniz. Gereksiz dağıtımları azaltmak, ücretsiz planın derleme kotasını daha verimli kullanmanızı sağlar.
GitHub Pages ile React Sitesi Yayınlarken Dikkat Edilecekler
GitHub Pages, statik React projeleri için kullanışlıdır; ancak proje adresinin yapısı doğru ayar gerektirir. Bir proje sitesi çoğunlukla kullanici.github.io/depo-adi/ altında yayınlanır. Bu durumda Vite yapılandırmasındaki base değeri genellikle /depo-adi/ olarak ayarlanmalıdır.
Kullanıcı sitesi veya kök adresten çalışan özel alan adı kullanıyorsanız temel yol genellikle / olur. BrowserRouter kullanıyorsanız yönlendiricinin basename ayarının da yayın adresinizle uyumlu olması gerekebilir.
GitHub Actions ile yayınlama yaparken iş akışı bağımlılıkları kurmalı, projeyi derlemeli ve oluşturulan çıktı klasörünü Pages’e dağıtmalıdır. Kaynak kodu depoya göndermek, tek başına React uygulamasını üretim sürümüyle yayınlamaz.
GitHub Pages standart sunucu taraflı SPA rewrite kuralları sunmadığı için HashRouter başlangıç seviyesinde daha kolay bir çözüm olabilir. Bu yöntemde rota, adresin # işaretinden sonraki kısmında tutulur. Temiz URL yapısı ve içerik odaklı SEO öncelikliyse uygun yönlendirme desteği sunan başka bir platformu veya önceden oluşturulmuş HTML sayfalarını değerlendirin.
React Router Kullanırken 404 Hatası Nasıl Önlenir?
React uygulamasında menüden bir iç sayfaya geçiş yapabildiğiniz hâlde sayfayı yenilediğinizde 404 hatası alabilirsiniz. Bunun nedeni, tarayıcının doğrudan ilgili URL’yi sunucudan istemesi ve sunucuda o adrese karşılık gelen fiziksel bir dosyanın bulunmamasıdır.
Çözüm, uygulama rotalarını index.html dosyasına yönlendiren bir rewrite veya SPA fallback kuralıdır. Bu işlem ziyaretçinin adresini ana sayfaya değiştiren bir yönlendirme değildir; aynı URL için React uygulamasının başlangıç dosyası sunulur ve doğru içeriği istemci yönlendiricisi gösterir.
- Netlify: Yayın çıktısına dahil edilen _redirects dosyasında yaygın SPA kuralı olan /* /index.html 200 kullanılabilir. Vite projelerinde bu dosya public klasörüne konularak çıktıya taşınabilir.
- Vercel: Statik SPA için vercel.json üzerinden uygulama rotalarını index.html dosyasına karşılayan rewrite kuralları tanımlanabilir.
- Cloudflare Pages: Üst düzey 404.html bulunmayan projelerde varsayılan SPA davranışı devreye girebilir; özel yönlendirmeler ve fonksiyonlarla birlikte test edilmelidir.
- GitHub Pages: HashRouter veya platformun sınırlarına uygun alternatif bir yayın yaklaşımı kullanılabilir.
Rewrite kurallarını oluştururken API yollarını ve statik dosyaları yanlışlıkla HTML yanıtına dönüştürmemeye dikkat edin. Uygulamanızda gerçekten bulunmayan sayfalar için de anlaşılır bir hata ekranı hazırlayın.
Ücretsiz Hosting İçin Alan Adı ve HTTPS Ayarları
Çoğu platform, sağlayıcıya ait ücretsiz bir alt alan adı sunar. Kendi alan adınızı bağlamak da birçok hizmette mümkündür; ancak ücretsiz hosting, özel alan adı kaydının ücretsiz olduğu anlamına gelmez. Alan adının kayıt ve yenileme bedeli ayrıca ödenir.
Özel alan adı kullanmak için hosting panelinden alan adınızı ekleyin ve sağlayıcının gösterdiği DNS kayıtlarını alan adı yönetim panelinde tanımlayın. Gereken kayıt türü platforma ve kök alan adı ya da alt alan adı kullanımına göre değişebilir.
- DNS değişikliklerinin görünür olması önbellek ve TTL değerlerine bağlı olarak zaman alabilir.
- HTTPS sertifikasının etkinleştiğini yayın panelinden kontrol edin.
- www ve www olmayan adresler arasında birincil sürümü belirleyin.
- API, görsel ve diğer dış kaynakları HTTPS üzerinden çağırarak karma içerik sorunlarını önleyin.
React Sitesinde SEO ve Performans Nasıl İyileştirilir?
Siteyi internete açmak, arama motorlarından trafik almak için yalnızca ilk adımdır. React SEO çalışması; taranabilir içerik, doğru sayfa bilgileri, hızlı yükleme ve anlaşılır bir site yapısını birlikte gerektirir.
Sayfa Başlıklarını ve İçerik Yapısını Düzenleyin
Her önemli sayfa için özgün bir başlık ve meta açıklama hazırlayın. Anlamlı başlık hiyerarşisi, açıklayıcı bağlantı metinleri ve görsellere uygun alternatif metinler kullanın. Yayınlanan sayfaların yanlışlıkla noindex ile işaretlenmediğini ve robots.txt tarafından engellenmediğini kontrol edin.
Google JavaScript çalıştırabilse de tamamen istemci tarafında oluşturulan içeriklerin işlenmesi ek aşamalar gerektirebilir. Arama trafiğinin önemli olduğu blog, ürün veya hizmet sayfalarında statik sayfa üretimi ya da sunucu taraflı render değerlendirmeye değerdir. Statik üretilen sayfalar statik hosting üzerinde yayınlanabilir; SSR ise uyumlu bir sunucu çalışma zamanı gerektirir.
Yükleme Hızını İyileştirin
- Görselleri uygun boyutlarda sunun ve mümkün olduğunda WebP veya AVIF kullanın.
- Gereksiz JavaScript bağımlılıklarını kaldırın.
- Rota veya bileşen bazlı kod bölme
{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “Hangi Platformu Seçmelisiniz?nnBasit bir portföy yayınlayacaksanız: GitHub Pages veya Cloudflare Pages uygun başlangıç seçenekleridir.nHer kod güncellemesinde otomatik yayın istiyorsanız: Git entegrasyonu sunan platformlardan yararlanabilirsiniz.nDeğişiklikleri yayına almadan incelemek istiyorsanız: Netlify, Vercel ve Cloudflare Pages gibi önizleme dağıtımı sunan seçenekleri değerlendirebilirsiniz.nSSR veya sunucu fonksiyonları kullanıyorsanız: Seçtiğiniz React çatısının ve çalışma zamanının platformda desteklendiğini doğrulamalısınız.nnnReact Projesini Yayına HazırlamanHosting hesabı açmadan önce uygulamanızın üretim derlemesinin sorunsuz çalıştığından emin olun. Geliştirme ortamında açılan bir proje, üretimde eksik ortam değişkenleri veya yanlış dosya yolları nedeniyle hata verebilir.nn1. Üretim Derlemesini Oluşturun”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Vite kullanan standart bir React projesinde bağımlılıkları yüklemek için npm install, üretim çıktısını oluşturmak için npm run build komutunu çalıştırabilirsiniz. Bu komutların kullanılabilmesi için projenizin package.json dosyasında ilgili betiklerin tanımlı olması gerekir.”
}
}
]
}
