Merhabalar bu makalede Jekyll ve Github Pages ile, nasıl bir statik web sitesi oluşturacağımızı inceleyeceğiz. Github’ı duymayanlar için kısaca açıklayayım. Git versiyon kontrol sistemi ile entegre hale getirilmiş versiyon kontrol sistemleri için oluşturulan uzak bir depo (repository) dur. Bu depo sistemi sayesinde birçok kullanıcı tarafından aynı projeler üzerinde geliştirme yapılabilmektedir.

Github her geliştiricinin bir bloğu olsun düşüncesiyle Github Pages yapısını hayata geçirdi. Dns desteği bulunduğundan domain yönlendirmesini ücretsiz olarak yapabiliyorsunuz. Jekyll açık kaynak kodlu Ruby ile geliştirilmiş ve Markdown yapısını destekleyen statik site oluşturucudur.

Github Pages üzerinden depo oluşturmadan önce local geliştimeler için gereki kurulumları yapalım. Ruby kurulumunu yapıyoruz. Kurulum başarıyla tamamlandığında “cmd” yada “power shell” üzerinden ruby -v komutuyla versiyon numarasnı görebilirsiniz. Not:Ruby 2.4 önceki Devkit kurulumların manuel yapılması gerekir. gem install jekyll bundler komutuyla Jekyll kurulumunu yapıyoruz. Jekyll versionu için “jekyll -v” komutunu kullanabiliriz.

Tüm kurulumlar tamamlandıktan sonra yeni bir jekyll projesi oluşturalım. jekyll new myblog komutu ile myblog adında jekyll projesi oluşuruyoruz.

jekyll new blog

Editör olarak ben Visual Studio Code kullanıyorum. Komut satırına “code ..” komutunu yazdığımızda bulunulan dizin üzerinde VS Code otomatik olarak açılmaktadır. “jekyll build” ve “jekyll serve” komutları ile _site klasörü otomatik olarak dizin üzerinde oluşmaktaır. Sitenin Github Pages üzerinde çalışacak html halini görebilirsiniz. Siteyi ayağa kaldırmak için “jekyll server” komutu ile localhost:4000 adresinden siteye ulaşabiliriz.

Oluşturduğumuz projeyi Github Pages üzerinde nasıl yayınlayacağımızı inceleyelim. Github hesabımıza girip yeni bir depo(repository) oluşturalım. Daha sonra bu depo(repository) üzerine Github Desktop uygulamasıyla oluşturduğumuz projeyi Push yapalım. Daha sonra Github hesabımızda repository üzerinde Repo Name alanında depo adını {kullanıcı adım}.github.io şeklinde değiştirdiğimizde siteyi aynı adresten yayında görebiliriz.

Jekyll new myblog
Github Settings

Jekyll ile oluşturduğunuz projeye plugin ekleyebilirsiniz. Plugin eklemek _config.yml içerisine desteklenen Github Dependency listesinden kullanmak istediğiniz plugin paketini aşağıdaki 2 yöntemle ekleyebilirsiniz.

1. Yöntem 

plugins:  - jekyll-gist  - jekyll-coffeescript  - jekyll-assets  - another-jekyll-plugin

Daha sonra “gem install jekyll-gist jekyll-coffeescript jekyll-assets another-jekyll-plugin” komutuyla otomatik olarak yükleme yapılabilir.

2. Yöntem 

group :jekyll_plugins do   gem "jekyll-gist"   gem "jekyll-coffeescript"   gem "jekyll-assets"   gem "another-jekyll-plugin" end

Artık “bundle install” komutuyla tüm plugin paketleri yüklenmiş olur.

Jekyll yapısını örneklerle inceleyelim.

_layouts

_layouts klasörü içerisine oluşturduğumuz html yada md dosyalarını sayfaların türeyeceği layout sayfaları olarak ayarlıyoruz. Body sayfamızı default.html sayfası ile oluşturup _layout dizinine ekliyoruz.

<!doctype html><html class="no-js" lang="tr-TR" prefix="og: http://ogp.me/ns# og: http://ogp.me/ns#">  <body>       <div class="wrapper">            {{ content }}              </div>      </body></html>

Türetmek istediğimiz sayfalara referans ekleyeceğimiz yapı aşağıdaki gibidir. Yapıda göründüğü gibi content alanında, referans eklenen sayfanın içeriği gelmektedir. 

---layout: default---

_includes

_includes dizini içerisine eklenen html dosyaları includes yöntemiyle istenilen sayfaya çağrılabilmektedir.

<body class="sticky_footer">       <div class="wrapper">        {% include header.html %}        {{ content }}                {% include footer.html %}          </div>      </body>

_posts

_posts klasöründeki md yada html dosylarımız sitemizin post yani makalelerini oluşturmaktadır. Post oluşturmada dikkat etmemiz gereken birkaç nokta bulunmaktadır. Bunlardan en önemlisi dosya isim yapısı. Bir post oluşturduğumuzda yapı şu şekilde olmalı; “2018-05-03-makale-adi.md* . Dosya ismindeki tarih post dosyasının tarihini oluşturmaktadır. Tarihten sonraki bölüm ise url şeklinde alınabilmektedir.

---layout: posttitle: Makale Başlığıcategories: [Kategori Adı]image: image.jpgtags: [etiket1,etiket2]description: "Makale Kısa Açıklama"---

_drafts

Bir makaleyi yazmaya başlayıp tamamlanmadan yüklemeniz gerektiğinde yazdığınız yazıyı _drafts klasörüne eklemeliyiz. Taslak yayınları local kullanımda inceleyip github üzerinde görünmemesini sağlayabilirsiniz. Bunun için _config.yml dosyasında show_drafts: false tanımını yapıp jekyll server –drafts komutunu çalıştırmalısınız.

Published

Bir gönderinin yayınlanıp yayınlanmamasını ayarlamak için postun meta verilerine published: true yada published: false tanımlarını yazmalısınız. Local üzerinde siteyi görüntülemek için ise jekyll server –unpublished komutunu kullanmalısınız

Post sayfalarımızın tanım alanlarında istediğimiz kadar değişken tanımlayabiliriz.

Future dated posts

Gelecek tarihli bir gönderi hazırlamak için _config.yml dosyasına future: false tanımını yazmalısınız. Local üzerinde siteyi görebilmek için çalıştırmanız gereken komut jekyll server –future dır.

Permalinks Ayarları

Yazıların url yapısında değişiklik yapmadığınız sürece default tanım aşağıdaki gibidir.

permalink: /:categories/:year/:month/:day/:title:output_ext

Permalinks değişikliğini sayfanın meta alanında yapabilirsiniz. 

---title: My page titlepermalink: /mypageurl/---

Kaynak: Jekyll Doc, Github Pages