Özel Alan Adı, Barındırma ve SSL Şifreleme ile Ücretsiz Bir Web Sitesi Nasıl Oluşturulur?

Web sitesi oluşturmak ciddi bir yatırımdır; bir web sitesi oluşturmanın her adımı için ödeme yapmanız gerekir.

Kişisel veya profesyonel gelişim için ücretsiz bir web sitesi oluşturmak ister misiniz? İşte bir sonraki web sitenizi özel bir alan adı, ömür boyu ücretsiz barındırma ve tamamen ücretsiz SSL şifrelemesi ile tasarlamanın bir yolu. Vay! Başka ne isteyebilirsin?

Bir web sitesine sahip olmanın büyüme rakamlarınızı önemli ölçüde artırması hiç de kolay değil ve bugün bu bir lüksten çok bir yatırımdır. Bu sadece işletmeler için geçerli değil, aynı zamanda bireyler de kişisel bir web sitesi aracılığıyla yüksek fayda sağlayabilir.

Bir alan adı kaydettirirken, web sitenizin içeriğini barındırırken, web sitesini oluştururken veya SSL şifrelemesini etkinleştirirken, ceplerinizi boşaltmaya hazır olmalısınız. Acıya ek olarak, bu masrafların bir kısmı tekrarlanıyor ve sonsuza kadar devam ediyor.

Peki ya size web sitesi oluşturmada yukarıda bahsedilen tüm önemli adımları ücretsiz olarak yaparken ücretsiz bir web sitesi oluşturabileceğinizi söylesem? Kulağa dünya dışı gelse de, öğrenciyseniz tüm bunları ücretsiz olarak yapabilirsiniz.

GitHub'dan haberdarsanız, GitHub Sayfaları hakkında bilgi sahibi olabilirsiniz. Her GitHub hesabıyla birlikte gelen hizmeti kullanmak ücretsizdir. GitHub Pages, her kullanıcının ücretsiz bir web sitesi oluşturmasına ve barındırmasına izin verir, ancak çok büyük bir uyarı var. Bu ücretsiz web sitelerinin alan adları, esasen web sitenizin profesyonelliğini bozan github.io ile bitiyor.

GitHub Öğrenci Geliştirici Paketi nedir?

Daha az kullanıcı web sitenizi ciddiye alacaktır ve gereksiz uzun bir alan adına sahip olmak asla iyi bir fikir değildir. Ama hey! GitHub Sayfalarının avantajları veya uyarıları hakkında konuşmak için burada değiliz. Özel alan adıyla ücretsiz bir web sitesi oluşturmanıza izin vermenin bir yolunu vaat ettim ve işte bunu nasıl yapabileceğiniz.

GitHub, GitHub Öğrenci Geliştirici Paketi olarak bilinen bir derece veya diploma kursuna kayıtlı her öğrenciye kullanışlı çevrimiçi araçlarla dolu harika bir kitten yararlanma şansı sunar. Paket, Canva, Namecheap, Microsoft Azure, Discord, Name.com ve StreamYard gibi popüler araçlarda profesyonel abonelikler ve dudak uçuklatan indirimler içerir.

Bu yazıda, ücretsiz bir özel alan adı kaydetmek için Namecheap'i ve web sitemizi barındırmak için GitHub sayfalarını kullanacağız. Ardından HTML, CSS ve JavaScript dosyalarınızı tasarlamanın ve GitHub sayfalarına yüklemenin yollarına bakacağız. Sonunda, web sitesi için SSL şifrelemesini de etkinleştireceğiz, ancak her şeyden önce Öğrenci Geliştirici Paketi'ne kaydolmamız gerekiyor.

GitHub Student Developer Pack'e Nasıl Başvurulur?

Öğrenci Geliştirici Paketi'ne kaydolma süreci, üniversite tarafından verilmiş bir öğrenci e-posta adresine sahip olmaktan geçer. Bir öğrenci e-posta adresi genellikle üniversitenizin alan adıyla biter, örneğin, [e-posta korumalı] Pakete kaydolmanın başka yolları da vardır, ancak bunlar öğrenci e-postası kullanmaktan çok daha uzun inceleme süreleri gerektirir. Öğrenci e-posta adresiniz hazırsa, pakete şu şekilde kaydolabilirsiniz:

Adım 1: GitHub eğitimine gidin ve Sign In seçeneğine tıklayın.

Zaten paketiniz varsa, kimlik bilgilerinizi kullanarak giriş yapabilirsiniz. Aksi takdirde, aşağıdaki adımları takip edebilirsiniz.

Oturum Aç penceresinde Hesap Oluştur seçeneğine tıklayın.

Adım 2: Ardından, öğrenci e-postanızı kullanarak kaydolun ve bir hesap oluşturun.

Adım 3: “Akademik durumunuzu en iyi hangisi tanımlar?” sorulduğunda, Öğrenci'yi seçtiğinizden emin olun.

Adım 4: Şimdi gerekli kutuları Okulunuzun Adı ve GitHub'ı kullanma amacınızla ilgili ayrıntılarla doldurun.

Adım 5 : Son olarak, “Bilgilerinizi gönderin” seçeneğini kullanarak başvurunuzu gönderin.

Uygulamanız GitHub tarafından onaylanırsa geliştirici paketiyle ilgili bir onay e-postası almalısınız. İşlem genellikle birkaç gün sürer, ancak yoğun zamanlarda süre önemli ölçüde değişebilir.

Öğrenci e-postası olmadan GitHub Student Developer Pack'e Nasıl Başvurulur?

GitHub ayrıca size geçerli bir öğrenci kimlik kartı veya akademik durumunuzu gösteren başka herhangi bir kanıt kullanarak pakete başvurma seçeneği sunar. Tek uyarı, uzun bekleme süresi ve daha yüksek reddetme oranıdır. Her neyse, bu yöntemle öğrenci paketine şu şekilde başvurabilirsiniz:

Adım 1: Kişisel e-postanız aracılığıyla bir hesap oluşturmak için yukarıda belirtilen adımları izleyin.

Adım 2: Şimdi kamera seçeneğini kullanarak akademik durumunuzun kanıtını yükleyin veya Yükle düğmesini kullanarak fotoğrafları doğrudan GitHub'a yükleyin.

Adım 3: Ardından, Okulun Adı ve GitHub'ı kullanma amacı gibi gerekli tüm ayrıntıları doldurun.

Adım 4: Başvurunuzu gönderin.

Namecheap kullanarak özel alan adınızı nasıl kaydedersiniz?

GitHub Education hesabınızın hazır ve çalışır durumda olduğunu varsayıyorum. Aşağıdaki adımlar, ücretsiz özel alan adınızı kaydettirmek ve GitHub Sayfaları aracılığıyla barındırmak için Namecheap'i kullanmayı içerir. Tercih ettiğiniz alan adını kaydetmek için şu adımları izleyin:

Adım 1: GitHub Education hesabınıza giriş yapın ve Avantajlar bölümüne gidin.

Bir Web Geliştirme Kiti ve bir Sanal Etkinlik Kiti görmelisiniz.

Adım 2: Virtual Event Kit'e gidin ve Namecheap'i bulmak için aşağı kaydırın.

GitHub, Erişim Al seçeneğine tıklayarak erişebileceğiniz .me TLD üzerinde 1 yıllık alan adı kaydı sunar.

Adım 3: Aşağıdaki pencere, Namecheap'ten GitHub hesabınıza bağlantı isteğini yetkilendirmenizi isteyecektir. Namecheap'i yetkilendirin ve sonraki adıma geçin.

Başarılı bir yetkilendirmeden sonra “Öğrenci paketinizi GitHub ile başarıyla doğruladık” diyen bir uyarı görmelisiniz.

Adım 4: Arama çubuğundan tercih ettiğiniz etki alanını bulun ve Bul'u tıklayın.

Bir sonraki ekranda alan adının kullanılabilirliğini görmelisiniz. Alan adınız mevcutsa, ücretsiz olarak satın almaya devam edebilirsiniz.

Adım 5: GitHub Education e-posta adresini kullanarak ödeme yapın ve devam ederken barındırma yönteminiz olarak GitHub Pages'i seçin.

Özel alan adınızı başarıyla kaydettikten ve barındırma olarak GitHub Sayfalarını seçtikten sonra Namecheap, GitHub hesabınızda otomatik olarak bir havuz oluşturmalıdır. Bu depo tamamen boştur ve yalnızca bir README.md dosyası içerir.

Bu depoya GitHub hesabınıza giriş yaparak ve “Depolarınız” bölümüne tıklayarak erişebilirsiniz. GitHub Pages, web siteniz için görsel araçlar ve önceden oluşturulmuş temalar sunmaz; tüm web sitesini manuel olarak kodlamanız ve ilgili dosyaları yeni oluşturduğunuz GitHub deponuza yüklemeniz gerekir.

Ücretsiz bir web sitesi nasıl oluşturulur ve GitHub Sayfalarında nasıl barındırılır?

Yukarıda belirtildiği gibi, web sitenizle ilgili tüm HTML, CSS ve JavaScript dosyalarını oluşturmanız gerekecektir. Web Dev ile ilgileniyorsanız ve nasıl kod yazacağınızı biliyorsanız, dosyalarınızı GitHub deponuza yükleyebilir ve web sitenizi çalıştırabilirsiniz. Bu makalenin web sitesi kodunu GitHub Sayfalarına yükleme ile ilgili bölümüne kaydırabilirsiniz.

Ancak Web Dev hakkında çok az veya hiç bilgisi olmayan biriyseniz, sizi ele geçirdik. Aşağıda verilen adımları kullanabilir ve bazı temel HTML kullanarak kendi web sitenizi tasarlayabilirsiniz:

Adım 1: HTML5 UP'ye gidin ve beğendiğiniz web sitesi tasarımına gidin. Herhangi bir platformdan önceden oluşturulmuş herhangi bir temayı seçebilirsiniz. Burada HTML5 UP'den "Massively" seçeneğini seçtim, ancak istediğiniz herhangi bir web sitesi tasarımını indirmek ve özelleştirmek için özgürsünüz.

Adım 2: En sevdiğiniz web sitesi tasarımının indirilen zip dosyasını çıkarın.

Çıkarılan klasörde index.html ve general.html adlı dosyaları ve varlıklar ve resimler gibi klasörleri görmelisiniz.

Adım 3: Şimdi Visual Studio Code kullanarak ayıklanan dosyaları açın ve index.html dosyasını seçin.

Adım 4: Henüz sahip değilseniz, Visual Studio Code'daki “Live Server” uzantısını indirin ve kurun.

Adım 5: index.html dosyasını seçin, farenin sağ tuşuna tıklayın ve “Canlı Sunucuda Aç” seçeneğini seçin. Bu seçenek, HTML dosyanızdaki değişiklikleri tarayıcınızda gerçek zamanlı olarak görselleştirmenizi sağlar.

Web sitenizin tasarımı nasıl özelleştirilir?

Bu noktadan sonraki süreci web sitenizi özelleştirmek için “Adımlar” olarak adlandırmayacağım. HTML dosyalarını özelleştirmek tamamen sizin tercihinize bağlıdır, ancak işte "Devasa" tasarımı HTML5 UP'den nasıl özelleştirdim ve bir portföye dönüştürdüm. Bundan ilham almayı seçebilir veya web sitenizi tamamen kendiniz özelleştirebilirsiniz. Seçim senin!

Başlık ve Paragraf etiketlerini değiştirme

Özelleştirme sürecime başlarken, “Massively” başlık etiketini değiştirdim. HTML dosyanızın başlık etiketi, bir tarayıcı sekmesinde açılırken adını belirleyecektir. Massively için varsayılan başlık "Massively by HTML5 UP" olmalıdır ve bunu web sitenizin benzer bir şeyle değiştirmenizi öneririm.

Başlık etiketini “Samyak Goswami | Portföyüm için ideal olarak Tech Content Writer”. Sırada, web sitesinin Giriş bölümünü değiştirdim, "Bu Çok Büyük" (H1 etiketinde bulunur) ve bariz nedenlerle onu "Samyak'ın Portföyü" yaptım. Daha sonra, paragraf etiketlerindeki aşağıdaki metni "Projelerimin ve yeteneklerimin bir vitrini" olarak değiştirdim.

İndeks dosyasında Gezinme (Nav) bölümüne giderek List etiketinde bulunan üç gezinme düğmesinden ikisini atladım. Tüm detayların tek bir sayfada olduğu tek sayfalık bir web sitesi oluşturmak istedim, ancak seçiminize göre gezinme butonlarının sayısını değiştirmekte özgürsünüz.

Daha sonra gezinme düğmesindeki “Bu Çok Büyük” metnini “Makalelerim” olarak değiştirdim.

Sosyal Medya Bağlantılarını ve Simgelerini Değiştirme

Canlı sunucuda Twitter, Facebook, Instagram ve GitHub gibi çeşitli sosyal medya simgelerini de görmelisiniz. Twitter ve Facebook'u atlamaya ve kullanım durumum için Instagram ve LinkedIn'i tutmaya karar verdim.

Sosyal medya simgelerini ve bağlantılarını Gezinme (Nav) bölümüne giderek ve içinde Twitter, Instagram ve daha fazlasının yazılı olduğu Liste etiketlerine kaydırarak değiştirebilirsiniz.

Href etiketi boş bırakıldığından, bu sosyal medya simgelerine nasıl bağlantı bulunmadığına dikkat edin. “#” yerine tercih ettiğiniz bağlantı ile href etiketine bağlantılar ekleyebilirsiniz.

Ana Sayfanın İçeriğini Değiştirme

İlk önce H2 etiketini değiştirdim ve “Benim adım Samyak Goswami” yaptım ve ardından Paragraf etiketini “Ben bir teknoloji tutkunuyum…” olarak değiştirdim. H2 etiketini ana sayfanızın içeriğiyle ve onu açıklayan paragraf etiketiyle eşleşen bir şeyle değiştirmenizi öneririm.

Şimdi bu özelleştirmenin en can alıcı kısmına geliyoruz; makale kutucuklarının içeriğini değiştirmek.

Bunu yapmak için dizin dosyasındaki Gönderiler bölümüne gidin ve Makale etiketlerinde bulunan birden çok kod parçacığını görmelisiniz. Sosyal medya ikonlarına link eklerken yaptığımız gibi href bölümünü değiştirerek hikayelerinize link ekleyebilirsiniz.

Daha sonra H2 etiketleri içindeki içerikleri değiştirerek Makalelerin adını değiştirebilirsiniz. Paragraf etiketini kullanarak makalelerinize bir açıklama da ekleyebilirsiniz.

Bağlantılar ekleyerek, adları değiştirerek ve tüm makalelerinize bir açıklama ekleyerek işlemi her makale için tekrarlayın.

Web Sitelerinize Görsel Ekleme

Önizlemenin HTML5 UP web sitesinde bulunan resimlerden çok farklı göründüğünü fark etmiş olmalısınız. Bu, özelleştirilebilir dosyadaki uçak ve mülayim fotoğraflardan kaynaklanmaktadır. Özel görseller ekleyerek web sitemizi renklendirelim.

Bunu yapmak için, daha önce “Massively” zip dosyasını çıkardığınız klasöre gidin. Çıkarılan klasörü açın ve Görüntüler klasörüne gidin. bg, pic01, pic02 vb. Adlı farklı resimler görmelisiniz. Bunlar, Makale etiketindeki makalelerimizle bağlantılı resimlerdir.

Özel görüntüler ekleyebilir ve dizin dosyasını bu görüntülerin adlarıyla değiştirebilir veya görüntüleri ekleyip varsayılan görüntülere benzer şekilde adlandırabilirsiniz. Görüntülere aynı adların verilmesi, bizi kodu değiştirmekten ve daha sonra çok fazla zaman kaybetmekten kurtarır.

Web sitenizin önemli olmayan diğer bölümlerini düzeltmenizi ve değiştirmenizi öneririm. İşte yukarıda bahsettiğim adımları kullanarak oluşturduğum portföy: samyakgoswami.me.

Web sitenizin kodunu GitHub Pages'a nasıl yüklersiniz?

Sonunda web sitenizi kodlayıp tasarladıktan sonra, onu GitHub Pages'e yükleyip internette yayına almanın zamanı geldi.

Web sitenizi GitHub Pages'a şu şekilde yükleyebilirsiniz:

Adım 1: GitHub hesabınıza giriş yapın ve Depolarım bölümüne gidin.

Adım 2: your_username.github.io adlı bir depo görmelisiniz. Bu depoya gidin.

Adım 3: Kendi dosyanızı oluşturma veya GitHub deposuna dosya yükleme seçeneği görmelisiniz.

Adım 4: Beş dosya ve klasörün tümünü seçin; varlıklar, resimler, öğeler, genel, dizin ve bunları depoya sürükleyip bırakın.

Dosyalar yüklendikten sonra kodu kabul edin ve GitHub dosyalarınızı işleyene kadar bekleyin.

Adım 5: Web sitenizin durumunu görmek için Ayarlar>GitHub Sayfaları'na gidin. "Web siteniz sizin_özel_alanınızda yayınlandı" istemini görmelisiniz.

Artık web adresinize gidebilir ve web sitesini kendiniz kontrol edebilirsiniz. Unutmayın, web sitesinin başlangıçta yayına girmesi biraz zaman alabilir.

GitHub Sayfalarında SSL şifrelemesi nasıl etkinleştirilir?

HTTP, web sitenizdeki kullanıcı isteklerini yönetmenin güvenli olmayan bir yoludur. Kötü niyetli ve sağlam teknik bilgiye sahip herkes, kullanıcı ile web siteniz arasındaki etkileşimleri engelleyebilir. Öte yandan HTTPS, tüm ziyaretçilerinize çok daha güvenli bir tarama oturumu sunar. GitHub Sayfaları ücretsiz HTTPS şifrelemesi sunar ve bundan şu şekilde yararlanabilirsiniz:

Depodaki Sayfalar bölümüne gidin.

Pencerenin sonunda "HTTPS'yi Zorla" seçeneğini görmelisiniz. HTTPS'yi Zorla onay kutusunu işaretlediğiniz anda SSL şifrelemesi yayına girmelidir.

Etki alanınız için HTTPS'yi Zorla seçeneğinin kullanılamadığını fark ederseniz, aşağıdaki adımları kullanarak SSL şifrelemesini etkinleştirebilirsiniz:

Adım 1 : Namecheap hesabınıza giriş yapın ve “Domain List” bölümüne gidin.

Adım 2: Şimdi Etki Alanını Yönet'e ve ardından "Gelişmiş DNS" bölümüne gidin.

Mevcut bazı CNAME ve A kayıtlarını görmelisiniz.

Aşağıdaki A Kayıtlarını ana bilgisayar “@” ve IP Adresi “185.199.108.153” olarak ekleyin. Bir sonraki, “@” ana bilgisayar adı ve “185.199.109.153” olarak IP Adresi ile.

“185.199.111.153” IP Adresine kadar 4 A Kaydı olana kadar trendi takip edin.

Önceki tüm A Kayıtlarını kaldırın.

3. Adım: Ardından, GitHub kullanıcı adınız (nokta) github (nokta) io olarak Host ve "www" olarak Değer içeren bir CNAME Kaydı ekleyin.

Önceki CNAME Kayıtlarını kaldırın. Sonunda, DNS ayarlarınızın 4 A Kaydı ve 1 CNAME Kaydı olması gerekir.

Adım 4: Şimdi Ayarlar bölümündeki GitHub sayfalarına gidin. HTTPS'yi Zorla seçeneği artık alanınız için kullanılabilir olmalıdır.

Özetliyor

GitHub, her öğrenciye ücretsiz bir web sitesi oluşturma ve onu yönetme konusunda harika bir fırsat sunar. GitHub Sayfalarını büyük trafik yüklerini barındırmak için kullanamasanız da, küçük ölçekli statik bir web sitesi için her onay kutusunu işaretler. Ücretsiz özel alan adı, barındırma ve SSL şifreleme, sahip olmayı daha da harika kılıyor.

Şimdi “Yeni web siteniz için bir Web Sunucusu Nasıl Seçilir” bölümünü okuyabilirsiniz.

Web siteniz çöktüğünde sizi bilgilendirecek bazı sayfa hızı izleme araçları.