SDTR
Published in

SDTR

Github Pages ve Jekyll ile Kişisel Blog Oluşturmak

Herkese merhaba,

Bu yazıda Github Pages kullanarak nasıl kişisel blog oluşturabileceğimizden bahsediyor olacağım.

Github Pages Nedir?

Github Pages

Github Pages, oluşturulan bir Github repositorysi üzerinden ilgili içeriğin anlık host edilerek bir websitesi şeklinde görülmesini sağlayan bir özelliktir. Bu sayede herhangi bir deploy işlemi ile uğraşmadan repository de yapılan değişiklikler (yeni bir sayfanın eklenmesi vs.) doğrudan ilgili websitesinde görünür hale geliyor. Bu özellik genellikle kişisel bloglar ve proje websiteleri oluşturulması için kullanılıyor.

Ben Github Pages’i kişisel blog oluşturmak için kullandım ve artık bu yeni oluşturduğum blogumda İngilizce makaleler yayınlamayı düşünüyorum. Kişisel bloguma buradan ulaşabilirsiniz.

Kişisel Blog (Website) Oluşturalım

  • İlk olarak public bir Github Repository’si oluşturmalı ve adı kullanıcıadı.github.io formatında vermeliyiz.
  • Daha sonra bu repository’i klonlayıp, index.html dosyası oluşturup commit + push yapmamız durumunda bu index.html dosyası içeriğini kullanıcıadı.github.io adresinde görebiliriz.
Kullanıcı arayüzünden index.html dosyası oluşturulması

Yukarıdaki görselde olduğu gibi index.html dosyası oluşturarak içeriğine “Hello World!” yazıp, commitlediğimde engincanv.github.io adresine giderek bu içeriği görebilmem gerekiyor.

Github Pages ile basit bir web-sitesi oluşturmak bu kadar kolay! Bu noktada kişisel blog umun hazır bir tema ile gelmesini istediğim için Jekyll adı verilen bir static site generator kullanabiliriz. (Jekyll markdown desteklemekte, bu sayede uygulamamız dizininde .md uzantılı bir dosya oluşturarak bu sayfanın web-sitesinde görünmesini sağlayabiliriz.)

Jekyll Nedir?

Jekyll, Github Pages ile entegre bir şekilde çalışabilen bir static site generator dür. Markdown uzantılı dosyalarda web sayfalarında gösterdiğimiz içeriği tanımlamamız dahilinde ilgili işlemi bizim için yaparak bu içerikleri .html uzantısı ile web-sitesinde göstermemize olanak sağlıyor ve hazır olarak tanımlanmış temaları ile birlikte web-site oluştururken style ile uğraşmamızın önüne geçiyor.

Yukarıdaki görselde örnek bir Jekyll Teması dosyalarını görebilirsiniz. Jekyll varsayılan olarak:

  • /node_modules ve /vendor klasorlerini,
  • _, ., veya # uzantısı ile başlayan dosyaları,
  • ~ ile biten dosyaları görmezden gelerek web-sitesinde görünmesini engelliyor.

Jekyll ile ilgili daha fazla bilgiye https://jekyllrb.com/ adresinden ulaşabilirsiniz.

Jekyll Teması Seçelim

Internet üzerinde birçok Jekyll teması ücretsiz olarak bulunmakta. Ben jekyllthemes.org adresinden kendime bir tema seçerek (Plainwhite) bunu localime indirdim.

Jekyll — Plainwhite Theme

Tema ile birlikte gelen dosyaları Github Repositorysine pushlayalım.

Daha sonra web-sitesini çalıştırdığımızda ilgili temanın sitemizde uygulandığını görmemiz gerekiyor.

Temanın README.md dosyasını iyi bir şekilde okuyarak, orada anlatılan ekstra adımları yapmamız gerekiyor. Örneğin, benim _config.yml dosyasında birkaç değişiklik yapmam gerekti.

https://engincanv.github.io/

İlgili temanın başarılı bir şekilde ayarlarının yapılması sonucunda yukarıda gördüğünüz gibi başarılı bir şekilde kişisel blog sayfamız oluşmuş oldu.

Bu noktaya kadar, repository üzerinde değişikliklerimizi commit + push yaparak web-sitesinde anlık olarak görmüş olduk. Fakat takdir edersiniz ki bu çok doğru bir yöntem değil. Bizim yaptığımız değişiklikleri localimizde test etmemiz ve doğruysa pushlamamız gerekiyor! Bu sebeple, gerekli Jekyll kurulumlarını yaparak localimizde ilgili değişiklikleri test edelim.

Jekyll Kurulumu

İlk olarak bilgisayarımıza Jekyll kurulumu ile başlayalım. İlgili değişiklikleri yaptıktan sonra commit + push yapmadan önce localimizde websitesinin son halini görebilmek için bu kurulumu yapmamız gerekiyor.

> Ben burada Windows üzerinden kurulumu anlatıyor olacağım, başka bir işletim sistemi kullanıyorsanız https://jekyllrb.com/docs/installation/#guides adresinden kurulum aşamalarını inceleyebilirsiniz.

  • Ruby (v2.5+) ve Jekyll yi bilgisayarımıza indirelim. (Ruby + devkit)(https://rubyinstaller.org/downloads/)
  • Daha sonra terminal üzerinden ridk install komutunu çalıştıralım ve ilk kurulum paketini yükleyelim.
  • gem install jekyll bundler komutunu kullanarak Jekyll ve Bundler’i yükleyelim. (Gerekli indirmelerin başarılı olduğundan emin olmak için jekyll -v komutu ile kontrol edebiliriz.)

Jekyll Bundler ile Localde Test Edelim

Kurulumu da yaptıktan sonra artık localimizde web-sitemizi kontrol edebiliriz. Repositoryimizin ana dizininde:

bundle install

komutu çalıştıralım ve ardından bundle exec jekyll serve komutunu çalıştıralım. Bu komuttan sonra http://localhost:4000 adresine giderek localde web-sitemizin nasıl göründüğüne bakabilir ve gerekli test işlemlerini yapabiliriz.

Okuduğunuz için teşekkür ederim. Bir sonraki yazıda görüşmek dileğiyle.

--

--

Yetenekli ve bilgili geliştiricilerden oluşan bir topluluk!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Engincan Veske

Engincan Veske

Software Engineer at Volosoft. Team member of ABP Framework. https://engincanv.github.io/