Jekyll düz metinleri statik websitelerine ve bloglara dönüştürmeye yarayan bir araçtır. Kategorileri, sayfaları ve blog gönderilerini bir veritabanına ihtiyaç duymadan görüntüler. Oluşturulan içerik Github Pages sayesinde Github üzerindeki bir repository’den kolaylıkla host edilebilir.

Github Üzerindeki Ayarlamalar

  • Öncelikle github üzerinden repository oluşturacağız.
    Oluştururken Initialize the repository with a README seçeneğini seçelim.
  • README bir markdown dosyasıdır. md dosyaları içerisinde html tagları kullanılabilir.
  • Eğer proje <KULLANICI-ADI>.github.io gibi direk github hesabına bağlı olacaksa master branch’ını kullanılır. Eğer normal bir repository olacaksa ve github pages tarafından görüntülenmesi istiyorsa gh-pages branch’ını kullanılır.
  • gh-pages adında bir branch oluşturalım.
  • gh-pages branch’ını branches kısmından bu branch’ı default yapalım.
  • Github arayüzünden master branch’ı silelim. Repository’i clone’layalım.
  • İçerisine girip index.html adında bir dosya oluşturup içerisine html taglarını aşağıdaki gibi yazalım.

  • git add . ile değişiklikleri git içerisine ekleyelim.
  • git commit -m "message" ile commit oluşturalım. Burada message yerine yaptığımız değişikliği yazabiliriz.
  • git push origin gh-pages ile değişiklikleri yollayalım.
  • Bu işlemi başarıyla gerçekleştiremediyse Github’ın ssh bağlantısı ile ilgili sorunları olabilir.
  • Başarıyla yollandıysa repository’nin settings kısmında websitesinin linki görüntülenebiliyor.
  • Linke tıkladığımızda ise site açılıyor.

Jekyll Üzerindeki Ayarlamalar

  • Buraya kadar Jeykll ile ilgili hiçbir şey yapmadık. Sayfamız index.html yalnızca basit bir html dosyası.
  • Şimdi gerçekten Jekyll ‘a başlayacağız.
  • Ruby ve Jekyll ‘ın işletim sisteminizde kurulu olması gerekiyor. Yoksa jekyll serve komutu çalışmayacaktır.
    İşletim sisteminize uygun kurulumu gerçekleştirdikten sonra devam edebiliriz.
  • Proje klasörü içerisine bir adet _config.yml dosyası oluşturup içerisine aşağıdaki satırları yazıyoruz :

  • kramdown markdown dosyalarımızı okuyacak.
  • baseurl‘yi local hostumuzun değeri doğru olarak alması için veriyoruz.
  • exclude ile jekyll’dan README.md dosyasını dışlamasını istiyoruz. Çünkü dosya yalnızca git ile ilgili.
  • Bu satırları _config.yml içerisine kaydediyoruz.
  • Daha sonra jekyll serve --watch -baseurl "" komutu ile siteyi localhostda çalıştırıyoruz.
  • Tarayıcı satırına localhost:4000 yazarak tarayıcıda siteyi görüyorum.
  • jekyll serve --watch --baseurl "" komutu çalışırken index.htmlde yapılan değişiklikler otomatik olarak güncelleniyor.
  • Bu komutla jekyll server’ı açıyoruz. --watch ile her değişen dosyayı izlemesini, --baseurl "" ile baseurl’i boş olarak ayarlıyoruz. Config’de github için /ornek-websitesi olarak ayarlamıştık. Ama localde bunu istemediğimiz için baseurl’i boşaltıyoruz. Baseurl doğru ayarlanmazsa başınıza bela olabilir.
    Örneğin jekyll serve ile localde direk çalıştırırsanız. Böyle bir hata ile karşılaşabilirsiniz:

Not Found Jekyll Error

  • Sonuç olarak jekyll serve --watch --baseurl "" komutunu gönderdiğimizde Server running ile çalıştığını görüyoruz.
  • ctrl-c yaparak bu ekrandan çıktığımda server duracaktır.
  • Server durunca doğal olarak websitem de durmuş oluyor. Bu durumda http://localhost:4000 yazarsam çalışmaz.

_site Dosyası

  • Jekyll’ı çalışırken site üzerinde yapılacak bir değişiklikte jekyll yapması gereken işlemleri gerçekleştirip son versiyonu _site içerisine kaydeder.
  • Yani eğer layout’lar kullanacaksak veya markdown dosyaları oluşturacaksak bunlar html’e çevrilip _site klasörü içerisine konacaklar.
  • Bu dosyalar websitesinin en son versiyonudur ve browserda görüntülediğiniz site de budur.
    Fakat _site klasörü aynı zamanda bir bakıma da geçicidir.
  • Bu yüzden repository güncellenirken proje içerisindeki _site klasörünün git içerisine dahil edilmemesi gerekiyor.
  • Git _site klasörünü dikkate almasın istiyoruz.
  • Bunun için proje klasörü içerisine .gitignore dosyası oluşturacağız.
  • .gitignore adında bir dosya oluşturup içerisine _sites adını bir satır olarak ekliyorum.
  • Bu sayede artık _sites git içerisine dahil edilmeyecek.
  • git add . ile değişiklikleri git içerisine ekliyorum.
  • git commit -m "message" ile commit oluşturuyorum.
  • git push origin gh-pages ile değişiklikleri yolluyorum.

Layout’lar

  • Jekyll’ın localhost‘da terminal üzerinden çalıştığını gördük. Şimdi sıra bazı özelliklerini kullanmaya geldi.
    İlk bakacağımız layout’lar olacak.
  • Websitelerini yaparken aynı içeriği birden fazla sayfada kullanmak yaygındır. Özellikle sayfanın başında ve sonunda aynı içerik sıklıkla kullanılır.
    Jekyll ile bu değişmeyecek html tek bir yerde tutup öteki sayfalara paylaştırabiliriz.
  • Bunun için websitemiz içerisine _layouts adında bir klasör oluşturacağız.
    Adının aynen bu şekilde olması gerekiyor: _layouts. Çünkü Jekyll layout’lar için buraya bakacak.
  • _layouts klasörünü oluşturduktan sonra altına default.html isimli bir dosya oluşturalım.
    Sitemizin body taglarını ve dışında kalan kısmını buraya yazacağız.

Üst kısmı :

Alt kısmı :

  • Bu ikisinin arasına ise bir placeholder oluşturacağız. Her sayfa için farklı olan bilgilerimiz yani content burada yer alacak. Placeholderımız şu şekilde: {{content}}
  • Placeholder’ı ekledikten sonra default.html içeriği aşağıdaki gibi oldu:

  • Henüz index.html hangi masterpage’i kullanacağını bilmiyor. Bir üst sayfayı YAML front matter içerisinde layout olarak ekleyeceğiz.

  • Ekledikten sonra index.html‘in son hali şöyle oldu.

  • Bu kadar. Şimdi kaydedip localhost üzerinde aşağıdaki gibi çalıştıralım:
  • jekyll serve --watch --baseurl ""
  • Tarayıcı üzerinden localhost:4000 adresine girdiğimizde sitemiz öncekinin aynısı olarak görünüyor.
  • Sağ tıklayıp kaynağı göster dersek masterpage tarafından eklenmiş kısımları göreceğiz.
  • ctrl-c ile server’ı durdurabiliriz.

Kaynak: