Github Pages ve Jekyll ile Web Sitesi Yapmak
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.

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 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
0 Yorumlar
Yorumunuz için çok teşekkür ederim. En kısa zamanda geri dönüş yapacağım.