GitHub Pages ile Ücretsiz Web Sitenizi Nasıl Yayınlarsınız?

Web geliştirme projelerinizi dünyaya sunmanın en basit yollarından biri GitHub Pages kullanmaktır. Ücretsiz statik site barındırma hizmeti olan GitHub Pages, portfolyolarınızdan dökümantasyon projelerinize kadar birçok statik içeriği kolayca yayınlamanıza olanak sağlar. Bu rehberde, adım adım nasıl kullanabileceğinizi açıklıyoruz.

GitHub Pages Nedir ve Hangi Projelerde Kullanılabilir?

GitHub Pages, GitHub tarafından sunulan ve statik web sitelerini doğrudan bir GitHub deposundan yayınlamanıza imkan tanıyan ücretsiz bir barındırma hizmetidir. Bu hizmetten faydalanabileceğiniz bazı yaygın projeler şunlardır:

HTML, CSS ve JavaScript tabanlı basit web siteleri
React, Vue veya Angular gibi modern JavaScript framework'leriyle geliştirilmiş uygulamalar
Proje dokümantasyonları ve API belgeleri
Kişisel portfolyolar ve CV siteleri
Ürün lansman sayfaları ve küçük ölçekli ticari web siteleri

GitHub Pages'in önemli bir sınırlaması vardır: backend kodlarını desteklemez. Java, Spring Boot, PHP ya da Node.js gibi sunucu tarafı teknolojilerini kullanamazsınız. Ancak frontend projeleriniz için mükemmel bir çözümdür. Büyük projelerinizde backend bileşenleri farklı bir serviste barındırırken, frontend kısmını GitHub Pages üzerinde yayınlayabilirsiniz.

Adım 1: GitHub Hesabı Oluşturun ve Yeni Bir Depo Başlatın

GitHub'da ücretsiz bir hesap oluşturduktan sonra yeni bir depo oluşturmanız gerekir. Bunun için:

GitHub hesabınıza giriş yapın ve sağ üst köşedeki "New" butonuna tıklayın.
Depoya bir isim verin. Örneğin, kisisel-websitem gibi açıklayıcı bir isim tercih edebilirsiniz.
Depoyu "Public" olarak oluşturun; böylece herkes tarafından görülebilir.
"Create repository" butonuna tıklayarak depo oluşturma işlemini tamamlayın.

Oluşturduğunuz deponun URL'si aşağıdaki gibi olacaktır:

Bu adres, sitenizin yayınlanacağı kalıcı bağlantıdır.

Adım 2: Web Site Dosyalarınızı Hazırlayın ve Yükleyin

Web sitenizin temel yapısı en az bir index.html dosyasından oluşmalıdır. Örnek bir proje dizini şu şekilde olabilir:

kisisel-websitem/
├── index.html
├── style.css
└── script.js

Basit bir index.html dosyası şu şekilde olabilir:

<!DOCTYPE html>
<html lang="tr">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kişisel Web Sitem</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <h1>Merhaba GitHub Pages!</h1>
    <p>Bu web sitesi GitHub Pages kullanılarak ücretsiz olarak yayınlanmaktadır.</p>
    <script src="script.js"></script>
</body>
</html>

Dosyalarınızı GitHub arayüzü üzerinden doğrudan yükleyebilir ya da yerel bilgisayarınızdan Git komutlarını kullanarak gönderebilirsiniz.

Adım 3: Dosyalarınızı Git ile GitHub'a Yükleyin

Proje dizininizde terminali açın ve aşağıdaki komutları çalıştırın:

git init
git add .
git commit -m "Başlangıç web sitesi dosyaları"
git branch -M main
git remote add origin 
git push -u origin main

Komutlarda yer alan kullanici-adiniz ve kisisel-websitem kısımlarını kendi bilgilerinizle değiştirmeyi unutmayın.

Adım 4: GitHub Pages'i Etkinleştirin ve Sitenizi Yayınlayın

GitHub deposuna geri dönün ve aşağıdaki adımları izleyin:

Sayfanın üst menüsünde "Settings" (Ayarlar) bölümüne gidin.
Sol menüden "Pages" (Sayfalar) seçeneğine tıklayın.
"Build and deployment" (Yapılandırma ve yayınlama) bölümünde "Deploy from a branch" (Dal üzerinden yayınla) seçeneğini seçin.
"Branch" (Dal) olarak main seçeneğini seçin.
"Folder" (Klasör) olarak /root seçeneğini seçin.
"Save" (Kaydet) butonuna tıklayın.

GitHub, ayarlarınızı kaydettikten kısa bir süre sonra sitenizi otomatik olarak yayınlayacaktır. Yayınlama işlemi tamamlandığında, sitenizin URL'sini görebilirsiniz.

Sık Karşılaşılan Sorunlar ve Çözümleri

Web Sitesi 404 Hatası Veriyor

Bu genellikle şu nedenlerden kaynaklanır:

GitHub Pages etkinleştirilmemiş olabilir.
Projede index.html dosyası bulunmayabilir.
Dosya adı tam olarak index.html olmalıdır; home.html, Index.html veya index.htm gibi farklı adlandırmalar çalışmayacaktır.

CSS veya Resim Dosyaları Yüklenmiyor

Bu sorun genellikle dosya yollarındaki hatalardan kaynaklanır. Örneğin, images/logo.png yolunu kullanıyorsanız, resminizin images klasöründe olduğundan emin olun. GitHub Pages dosya adlarına karşı duyarlıdır, bu yüzden logo.png ile Logo.png aynı dosya olarak algılanmaz.

Değişiklikler Görüntülenmiyor

GitHub Pages'in güncellemeleri yayınlaması birkaç dakika sürebilir. Bu durumda:

Sayfayı yenileyin.
Tarayıcı önbelleğini temizleyin.
GitHub Pages yayınlama durumunu kontrol edin.
Son değişikliklerinizin GitHub'a yüklendiğinden emin olun.

Özel Domain Kullanımı Mümkün mü?

Evet, GitHub Pages özel domain kullanımını destekler. Örneğin, ` gibi bir domain kullanabilirsiniz. Bunun için:

Özel bir domain satın alın.
Domain sağlayıcınızda DNS ayarlarınızı yapılandırın.
GitHub Pages ayarlarında özel domaininizi ekleyin.

GitHub Pages Kullanımına Uygun Projeler

GitHub Pages aşağıdaki projeler için ideal bir çözümdür:

Kişisel portfolyolar ve CV siteleri
Proje dokümantasyonları ve API belgeleri
Ürün lansman sayfaları
Küçük ölçekli ticari web siteleri
Frontend geliştirme pratiği projeleri

Ancak backend gerektiren projeler (örneğin kullanıcı girişi, veritabanı işlemleri) için uygun değildir. Bu tür projeler için Render, Vercel, Netlify, AWS ya da VPS gibi alternatif barındırma çözümleri tercih edilmelidir.

Sonuç: GitHub Pages ile Web Yayınlama Artık Çok Kolay

GitHub Pages, web geliştirme projelerinizi ücretsiz ve kolayca yayınlamanın en basit yollarından biri. Sadece bir GitHub hesabı, temel web dosyalarınız ve birkaç dakikanız varsa, statik web sitenizi dünya ile paylaşabilirsiniz. Hem öğrenciler hem de profesyoneller için mükemmel bir başlangıç noktası olan bu hizmet, karmaşık barındırma çözümlerine gerek kalmadan projelerinizi anında yayınlama imkanı sunuyor. Artık beklemeyin ve kendi web sitenizi bugün yayınlamaya başlayın!

Yapay zeka özeti

GitHub Pages kullanarak statik web sitelerinizi ücretsiz ve kolayca yayınlayın. Adım adım kılavuz ve en iyi uygulamalar burada.

Etiketler

#web geliştirme #github pages #ücretsiz web barındırma #statik web sitesi #web yayınlama #github hosting #web sitesi yayınlama #github rehberi