Hazırla, Ayarla, Başlat: GitHub Sayfalarıyla Statik Bir Site Oluşturma

Mevcut tüm popüler web geliştirme araçları ve çerçeveleriyle, bir web sitesi oluşturmak giderek daha karmaşık hale geliyor. Ancak bazen sitenizde çok fazla etkileşime ihtiyacınız olmaz. Bilgileri görüntüleyene ulaştırmaya odaklanıyorsanız ve karmaşık işlevlere ihtiyacınız yoksa, statik bir site doğru seçim olabilir.

Bu eğitimde, statik sitenin ne olduğunu, avantajlarını, sınırlamalarını ve HTML ve Bootstrap ile oluşturulmuş basit bir kişisel web sitesinin GitHub Pages kullanılarak ücretsiz olarak nasıl oluşturulacağını ve dağıtılacağını öğreneceksiniz.

GitHub Sayfaları Nedir?

GitHub, Git depolarını barındırmak ve yazılım projelerinde işbirliği yapmak için web tabanlı bir platformdur. Kod değişikliklerini paylaşmak ve izlemek, kodu yönetmek ve gözden geçirmek ve çekme isteklerini açıp gözden geçirmek için araçlar sunar.

Git ve GitHub'ı karıştırmayın! GitHub, geliştiriciler arasında işbirliğine izin veren bir barındırma hizmetidir, Git ise yazılım projenizin durumunun anlık görüntülerini kaydetmek için kullandığınız yerel sürüm kontrol yazılımıdır.

GitHub Sayfaları, GitHub'ın en iyi özelliklerinden biridir. Statik bir web sitesini doğrudan bir GitHub deposundan barındırmanıza izin veren bir hizmettir. Bu, deponuzu web sitenizin kodunu ve dosyalarını depolamak için kullanabileceğiniz anlamına gelir ve GitHub bunları otomatik olarak çevrimiçi erişebileceğiniz bir web sitesi olarak yayınlar.

Özetle GitHub Pages, web sitenizi çalışır duruma getirmenin hızlı ve kolay bir yoludur ve özellikle portföyünüzü, açık kaynak projelerinizi veya diğer statik içeriği sergilemek için kullanışlıdır.

Statik ve Dinamik Web Siteleri

Gördüğümüz gibi GitHub Pages, statik web sitelerini dağıtmak için bir yol sağlar. Ancak statik bir web sitesi ile dinamik bir web sitesi arasındaki fark nedir?

Söz konusu sitelerdeki içeriği tartışarak başlayalım.

Statik içerik, kim olduklarına veya sitede yaptıkları işlemlere bakılmaksızın tüm kullanıcılar için aynı kalan web sitesi öğelerini ifade eder. Bu, web sitesinin metni, resimleri ve düzeni gibi şeylerin yanı sıra siteyi oluşturan temel kod ve dosyaları içerebilir. Statik bir site, kullanıcıya tam olarak depolandığı gibi teslim edilir.

Buna karşılık, dinamik içerik, kullanıcının oturum açma, bir ödeme duvarı ile etkileşim kurma veya bir gönderiye yorum yapma gibi eylemlerine veya geçerli saat veya konum gibi diğer faktörlere bağlı olarak değişen içeriktir.

Örneğin, bir ürünün durağan görüntüsünü görüntüleyen bir web sitesi, her kullanıcıya her zaman aynı görüntüyü gösterir (statik). Öte yandan, geçerli saati görüntüleyen bir web sitesi, her kullanıcıya konumuna (dinamik) bağlı olarak farklı bir saat gösterecektir.

Genel olarak, PHP veya Python gibi bir veritabanıyla etkileşime giren sunucu teknolojileri olmadan, ön uçta yalnızca HTML, CSS ve JavaScript içeriyorsa bir web sitesinin statik olduğunu söyleyebiliriz.

GitHub Sayfalarını kullanarak dinamik web siteleri oluşturmak mümkün olmasa da, WordPress gibi bir CMS veya Gatsby veya Hugo gibi statik site oluşturucuları kullanarak kolayca kendi web sitelerinizi oluşturabilirsiniz.

GitHub Sayfalarının Temel Özellikleri

Barındırma hizmeti olarak GitHub Sayfalarının güçlü yanlarını görelim:

1. Kolay kurulum ve yayınlama: GitHub Pages, yalnızca birkaç basit adımla başlamayı kolaylaştırır. Deponuz için GitHub Sayfalarını etkinleştirebilir ve web sitesi dosyalarınız için kaynak belirtebilirsiniz; GitHub web sitenizi otomatik olarak yayınlar ve kullanıcı adınız ve depo adınıza göre bir URL'de kullanılabilir hale getirir.
2. Özel alanlar: GitHub Sayfaları ile web siteniz için GitHub tarafından sağlanan varsayılan URL yerine özel bir alan adı kullanabilirsiniz. Bu, kendi markanızı kullanmanıza olanak tanır ve kullanıcıların web sitenizi bulmasını ve web sitenize erişmesini kolaylaştırır.
3. HTTPS desteği: GitHub Pages, web sitenize güvenli bağlantılara izin veren HTTPS desteği sunar. Bu, sitenizin güvenini oluşturmak için çok önemlidir.
4. Jekyll desteği: GitHub Pages, şablonları ve diğer özellikleri kullanarak gelişmiş web siteleri oluşturmanıza olanak tanıyan statik bir site oluşturucu olan Jekyll'i destekler. Bu, tüm kodu sıfırdan yazmak zorunda kalmadan profesyonel görünümlü web siteleri oluşturmayı kolaylaştırır.

sınırlamalar

Daha önce belirtildiği gibi, GitHub Sayfaları ile yalnızca statik siteler oluşturabilirsiniz. Birçok işlevselliğe sahip karmaşık bir proje oluşturmak istiyorsanız, başka barındırma hizmetlerine ihtiyacınız olacaktır. Ayrıca, GitHub Sayfalarını çevrimiçi bir iş yürütmek veya e-ticaret yapmak gibi ticari amaçlarla kullanamayacağınızı da unutmamalısınız.

GitHub Pages, sitenizin 1 GB'tan büyük olmasına izin vermez, yani deponuzdaki dosyalar bu bellek miktarını aşamaz. Çoğu zaman statik bir site için 1 GB fazlasıyla yeterlidir; sadece resimlerinizi sıkıştırdığınızdan emin olun.

Ayrıca ayda 100 GB'lık esnek bant genişliği sınırı vardır. Bu miktarda bant genişliği, web sitenizi ayda birkaç bin kişiye dağıtmak için yeterli olacaktır, bu nedenle çok büyük bir izleyici kitleniz yoksa, gitmekte fayda var.

GitHub Sayfalarıyla Oluşturma ve Dağıtma: Adım Adım Kılavuz

GitHub Sayfası oluşturmak, statik bir siteyi barındırmak için basit ve doğrudan bir işlemdir. Bir tür veritabanı bağlantısına ihtiyacınız varsa, harici bir veritabanı sağlayıcınız olması gerektiğini unutmayın.

Aşağıdaki kılavuzda, sıfırdan bir GitHub Sayfası oluşturmayı öğreneceksiniz. Bu, uzak bir havuz oluşturmayı, HTML ile duyarlı bir kişisel web sitesi oluşturmayı ve GitHub ile web'e dağıtmayı içerir.

Hadi başlayalım!

1. GitHub'a Kaydolun

İşleri başlatmak için aktif bir GitHub hesabınızın olması gerekir. Eğer yoksa, onların kayıt sayfasına gidin. Formu doldurmak birkaç dakikadan fazla sürmemelidir.

Oturum açtıktan sonra, bir uzak havuz oluşturabilmelisiniz.

2. Bir Uzak Depo Oluşturun

Depo, belirli bir projeyle ilgili tüm kodu sakladığınız bir dizindir.

GitHub ana sayfasından, sitenin sol panelinde bulunan "Yeni" veya "Depo oluştur" düğmesine tıklayın. Bu sizi deponuzun bilgilerini dolduracağınız bir forma yönlendirecektir.

Bu sonraki adımlar çok önemlidir:

1. Deponuzun adını "yourusername".github.io olarak ayarlayın.
2. Genel düğmesini kontrol edin. Sitenizi yayınlamak için depoyu Genel olarak ayarlamanız gerekir.
3. BENİOKU ekleyin.

Yalnızca belirli bir kişisel hesap veya kuruluş için bir havuzunuz olabilir. Bu nedenle havuzun adı, kullanıcı adınız ve github.io etki alanıdır. Daha sonra, bir havuzdan nasıl site kurulacağını göreceğiz.

GitHub Pro'nuz yoksa, bir GitHub sayfasını yalnızca depo herkese açıksa yayınlayabilirsiniz. Sitenizin kaynak kodunu herkese açık olarak paylaşmak istemiyorsanız bunu aklınızda bulundurun.

Bundan sonra, aşağıdaki gibi bir şeye sahip olmalısınız:

Sitenizin çalışan kaynak koduna zaten sahipseniz, ortak Git iş akışını atlayabilir ve bunun yerine dosyaları doğrudan depoya bırakabilirsiniz.

Bunu yapmak için deponuzdaki Add file menüsünü tıklayın ve Dosyaları yükle seçeneğini seçin. Ardından, index.html adlı ana HTML dosyasıyla web sitenizin dosyalarını seçin. Tüm CSS ve JavaScript dosyalarınızı da depoya koymayı unutmayın.

Son olarak, Değişiklikleri kaydet düğmesine basın.

Sonraki bölümde, HTML ve Bootstrap ile basit bir kişisel web sitesi oluşturacağız. Ardından onu GitHub'a yükleyeceğiz ve özel bir etki alanına sahip bir GitHub genel sayfası olarak ayarlayacağız.

3. Kişisel Bir Site Oluşturun

Az önce oluşturduğumuz GitHub deposunu klonlayarak başlayacağız. Bunu yapmak için Git istemcisinin bilgisayarınızda kurulu olduğundan emin olun. (Bilmiyorsanız, Git ve GitHub'daki eğitimimize bir göz atın.)

Deponuzun code sekmesine gidin ve SHH seçeneğindeki SSH URL'sini kopyalayın.

Ardından, bir terminali veya komut satırını çalıştırın. Çoğu Linux dağıtımında ve macOS'ta, Ctrl + Alt + T kısayolunu kullanabilir veya Terminal için sisteminizin uygulama menüsüne bakabilirsiniz. Windows'ta varsayılan olarak Git, CMD, PowerShell veya bir GUI istemcisi ile yüklenen Git BASH'ı kullanabilirsiniz.

Terminalinizde git clone ve kopyaladığınız URL'yi yazın. Bu, web sitenizi oluşturabilmeniz için yerel makinenizdeki uzak havuzun bir kopyasını indirecek ve oluşturacaktır.

Ardından kullaniciadiniz.github.io adlı yeni klasörü cd ve ls ile girin. Projenizin yapılandırmasını ve meta verilerini içeren .git klasörünü ve ayrıca oluşturduysanız README.md dosyasını görmelisiniz.

Favori metin düzenleyicinizi (Sublime Text gibi) açın ve web sitenizi oluşturmaya başlayalım.

Deponun kökünde, index.html adlı bir dosya oluşturun (bu ad GitHub Sayfaları için gereklidir) ve tipik HTML kod yapısını yazın:

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Kinsta User</title> </head> <body> </body> </html>

Daha önce söylediğimiz gibi, duyarlı web sitelerini daha kolay oluşturmamıza yardımcı olan açık kaynaklı bir CSS çerçevesi olan Bootstrap 5.0'ı kullanacağız. Göreceğiniz gibi, bu belirli site için özel CSS kullanmak zorunda kalmayacağız.

Bootstrap'i sayfamıza dahil etmek için, derlenmiş CSS ve JavaScript'i bir CDN aracılığıyla eklememiz gerekecek. Bootstrap CSS'yi kullanabilmek için aşağıdaki kodu HTML <head> içine yapıştırın:

 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Aynı şekilde, popüler programlama dillerinin ve teknolojilerinin SVG simgelerini fazla sorun yaşamadan kullanabilmek için Devicon CDN'yi de ekleyeceğiz:

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/[email protected]/devicon.min.css">

Şimdi JavaScript'i dahil etmek için </body> etiketinin hemen üst kısmına aşağıdaki kodu ekleyin:

 <!-- JavaScript: Above --> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

Web sitemiz için bir başlık oluşturarak işleri başlatacağız. Bu, dizin sayfamıza ve daha sonra oluşturabileceğiniz diğer iki sayfaya — “Projeler” ve “Okuma günlüğü” — bağlantıların olduğu karanlık bir başlık olacaktır:

 <nav class="navbar navbar-dark navbar-expand-lg bg-dark "> <div class="container-fluid"> <div class="mx-4"> <a class="navbar-brand" href="#">Kinsta User</a> </div> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <li class="nav-item"> <a class="nav-link" href="#">Projects</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Reading Log</a> </li> </ul> </div> </div> </nav>

Görüntü genişliği 992 pikselden küçük olduğunda çöken duyarlı bir kapsayıcı oluşturmak için Bootstrap sarmalayıcı navbar ve navbar-expand-lg kullanıyoruz. Bunun nedeni ızgara seçeneği lg olur. Izgara seçenekleri hakkında daha fazla bilgi edinmek istiyorsanız, Bootstrap'in düzen sayfasına bir göz atın.

Şimdi, bir kap içinde iki duyarlı sütun oluşturalım: biri Unsplash'tan ücretsiz bir görsel için ve diğeri kendimizin açıklaması için:

 <div class="container my-4 "> <div class="row justify-content-center"> <div class="col-lg mb-lg-4"> <img src="image.jpg" class="img-fluid" alt=""> </div> <div class="col-lg mx-2 align-self-center"> <div class="my-3"> <h1 class="text-center">I'm a Kinsta User</h1> <p>As a passionate software developer, I am deeply enthusiastic about creating and developing software applications. I am constantly learning and experimenting with new technologies and approaches, and I have a strong desire to create innovative and effective solutions to complex problems. I am driven by my curiosity and love for problem-solving, and I am committed to producing high-quality, well-designed software that meets the needs of users. </p> </div> </div> </div> </div>

Gördüğünüz gibi, yerel bir dosyadan bir görüntü alıyoruz, bu nedenle değişikliklerimizi GitHub deposuna aktardığımızda depoda olması gerekir.

Son olarak, Bootstrap kapsayıcımızın içinde, becerilerimizi öne çıkarmak için biraz dahili CSS ile birlikte Devicon'dan SVG simgeleri kullanacağız:

 <!-- Inside the container created above --> <div class="my-4"> <div class="text-center mb-4"> <h1>My Skills</h1> </div> <div class="row "> <style> I { font-size: 4em; } </style> <!-- Skills --> <div class="col"> <div class="text-center"> <h4>WordPress</h4> <i class="devicon-wordpress-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Django</h4> <i class="devicon-django-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>Python</h4> <i class="devicon-python-plain"></i> </div> </div> <div class="col"> <div class="text-center"> <h4>GitHub</h4> <i class="devicon-github-original" ></i> </div> </div> </div> </div>

<i> HTML etiketini kullandığımız için onu bir yazı tipi olarak ele alabiliriz. Böylece logolarımızın boyutunu style tag'inde bildirerek 4 em olarak ayarladık.

İşte bu basit kişisel web sitesinin nihai sonucu:

Web sitesi trafiğinin %50'den fazlasının mobil cihazlardan geldiğini biliyor muydunuz? Bootstrap kullandığımız için, çok fazla CSS kodlaması kurtardık ve ayrıca aşağıda takdir edebileceğiniz gibi duyarlı bir web sitesine sahibiz.

Bu siteyi istediğiniz kadar özelleştirebilirsiniz. İşte GitHub'daki tam kaynak emrinizde.

Tam özellikli Uygulama Barındırma çözümlerimizden birini kullanarak Ghost gibi başsız bir CMS bile ekleyebilirsiniz. MyKinsta kontrol paneliniz aracılığıyla doğrudan GitHub deponuza bağlanabilir ve yeni sitenizi birkaç dakika içinde çalışır duruma getirebilirsiniz.

Dosyalarınızı gönderme zamanı. Bunu yapmak için, terminalinizde, projenizin en üst seviyesinde aşağıdaki komutları çalıştırın.

 git add . git commit -m "Added website source code and image" git push

Artık GitHub sayfamızı kurmak için bu web sitesini kullanabiliriz.

4. Bir Kullanıcı GitHub Sayfası Yayınlamak

index.html dosyasını, kullanıcı adınızın adını taşıyan uzak depoya gönderir göndermez, GitHub sitenizi çevrimiçi kurmak için otomatik olarak bir iş akışı süreci başlatır. Birkaç dakika sürebilir, ancak statik sitenizi otomatik olarak çalışır duruma getireceksiniz.

Sitenizin URL'si şuna benzer bir şey olacaktır: https://kinstauser.github.io/

10 dakika sonra siteniz çevrimiçi değilse, kodunuzda sahte bir değişiklik yapmayı deneyebilir (örneğin, bir boşluk ekleyerek) ve GitHub Sayfalarının oluşturma sürecini yeniden etkinleştirmek için tekrar basabilirsiniz.

5. Depo GitHub Sayfası Yayınlama

Şimdiye kadar bir kullanıcı sitesi oluşturduk, peki ya yayınlanmış birden çok GitHub sitesine sahip olmak istiyorsak? O zaman bir proje sitesi ile gitmeliyiz.

Örnek olarak, Git for Web geliştirme eğitiminde oluşturduğumuz HTML teknolojisi sitesini kullanacağız.

En kolay yol, depomuzun Ayarlar sekmesine, ardından "Kod ve otomasyon" bölümündeki Sayfalar seçeneğine gitmektir.

Deploy from a Branch kaynağını seçin ve dosyaları dağıtmak istediğiniz dalı tıklayın. Ana şubeden yayınlamanız şiddetle tavsiye edilir, ancak yardımcı şubeleri kullanarak özellikler oluşturun ve hataları düzeltin ve ardından bunları birleştirin. Bu şekilde, yayınlanan siteye bu kadar kolay hata getirmezsiniz.

Şubeyi seçtikten sonra, dosyaları sunmak istediğiniz klasörü - genellikle kök ( / ) - seçin ve kaydet'i tıklayın.

Yine birkaç dakika bekleyin. Siteniz "yourusername".github.io/ adresinde mevcut olmalıdır.

Bir veri havuzu sitesini yayından kaldırmak için Ayarlar'a , ardından Sayfalar'a gidebilir ve üç nokta seçeneğine tıklayabilirsiniz. Siteyi yayından kaldır mesajını içeren bir kutu göreceksiniz.

Harika! Açık kaynak projenizin sitesi hazır ve çalışır durumdadır, ancak alan adının kendisi uzundur ve kesinlikle hatırlaması kolay değildir. Bunu nasıl geliştirebileceğimize bakalım.

6. Özel Etki Alanı Kurma

Bir GitHub sayfası için özel bir etki alanı kurmanın ve çalıştığından emin olmanın en kolay yolu, DNS sağlayıcınıza gidip GitHub Sayfalarının IP adresleri için dört A kaydı oluşturmaktır:

 185.199.108.153 185.199.109.153 185.199.110.153 185.199.111.153

Ayrıca hedef olarak yourusername.github.io ile bir CNAME kaydı oluşturmalısınız. Genellikle, DNS değişiklikleri yavaştır, bu nedenle sabırlı olun, tüm gün sürebilir.

Bunu yaptıktan sonra deponuzun ayarlarında Custom domain bölümüne gidin, domaininizi yazın, Save butonuna tıklayın ve GitHub'ın custom domaininizi kontrol etmesini bekleyin.

Ayrıca, DNS'niz destekliyorsa, sitenize yalnızca HTTPS üzerinden hizmet vermek için HTTPS'yi Zorla kutusunu işaretleyin.

Tebrikler! Eğiticinin bu noktasına kadar devam ettiyseniz, GitHub Sayfalarında ücretsiz olarak barındırılan statik bir web siteniz olur.

GitHub Sayfaları İçin En İyi Uygulamalar

Yollarımızı ayırmadan önce, bir GitHub sitesi yayınlarken dikkate almanız gereken bazı en iyi uygulamalar şunlardır:

1. Dağıttığınız şubeye asla doğrudan taahhütte bulunmayın. Diğer dallarda değişiklikler oluşturun, ardından bir çekme isteği oluşturun.
2. Ödeyebiliyorsanız siteniz için iyi bir alan adı seçin. Kişisel veya proje markanız için en önemli kararlardan biridir.
3. GitHub Sayfalarını, bir e-ticaret sitesi kurmak gibi ticari amaçlarla kullanmayın.
4. İhtiyaçlarınızı değerlendirin. Statik bir siteyi ücretsiz olarak yayınlayabilmek harikadır, ancak çok fazla trafik bekliyorsanız veya karmaşık özellikler istiyorsanız, harika bir barındırma hizmeti için ödeme yapmanız gereken yoldur.

Özet

Web geliştirme her geçen gün daha karmaşık hale geliyor. Statik siteler, internetin ortaya çıkışından beri buradalar ve proje oluşturmaya başlamak için harika bir yol.

Bu öğreticide, statik sitelerin ne olduğunu ve bunları GitHub Sayfalarını kullanarak çevrimiçi olarak nasıl kuracağınızı öğrendiniz. Bootstrap kullanarak basit bir kişisel site oluşturdunuz ve bunu GitHub kullanıcı siteniz olarak yayınladınız. Ayrıca bir projenin sitesini nasıl çalışır hale getireceğinizi ve gerekirse onu nasıl yayından kaldıracağınızı da öğrendiniz.

Genel olarak GitHub Pages, statik web sitenizi ücretsiz olarak barındırmanın kullanışlı ve güçlü bir yoludur. Portföyünüzü sergilemek, açık kaynak projelerinizi paylaşmak veya çevrimiçi bir varlık oluşturmaya başlamak için GitHub Sayfaları mükemmel bir seçimdir. Yeterince trafik elde ettiğinizde veya tam yığın bir site oluşturmaya hazır olduğunuzda, Kinsta'nınki gibi diğer uygulama barındırma hizmetlerine sorunsuz bir şekilde geçiş yapabilirsiniz.