Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
89 lines (48 sloc) 6.83 KB
layout title categories image tags description filename
post
Github Pages ve Jekyll ile Web Sitesi Yapmak
Ruby
github-pages-jekyll-kullanimi.jpg
jekyll
github pages
ruby
Github Pages ve Jekyll ile Web Sitesi Nasıl Yapılır? Jekyll Nedir? Github Pages Nedir?
2018-05-05-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 gerekl kurulumları yapalım. Ruby{:target="_blank"}{:rel="nofollow"} 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{:target="_blank"}{:rel="nofollow"} 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 myblog]({{ site.url }}{{ site.baseurl }}/images/news/github-pages-jekyll/jekyll-new-myblog.jpg){: .pic}

Editör olarak ben Visual Studio Code{:target="_blank"}{:rel="nofollow"} 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{:target="_blank"}{:rel="nofollow"} 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]({{ site.url }}{{ site.baseurl }}/images/news/github-pages-jekyll/github-setting-repo-name.jpg){: .pic}

Jekyll ile oluşturduğunuz projeye plugin ekleyebilirsiniz. Plugin eklemek _config.yml içerisine desteklenen Github Dependency{:target="_blank"}{:rel="nofollow"} listesinden kullanmak istediğiniz plugin paketini aşağıdaki 2 yöntemle ekleyebilirsiniz.

1. Yöntem

<script src="https://gist.github.com/muratsuzen/e9cb90ea2502cf2130c83f527e1ea138.js"></script>

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

2. Yöntem

<script src="https://gist.github.com/muratsuzen/2a31462d0c394017b0d1464c829d10a4.js"></script>

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.

<script src="https://gist.github.com/muratsuzen/f9d1e2ab6754606381ef27f7399e4cfa.js"></script>

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.

<script src="https://gist.github.com/muratsuzen/53fc4d39121df53d8300b00761654c21.js"></script>

_includes

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

<script src="https://gist.github.com/muratsuzen/35f805b44a3015167b0458940018476d.js"></script>

_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.

<script src="https://gist.github.com/muratsuzen/f8a22cc62fc647c3292bd686b31bd25d.js"></script>

_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.

<script src="https://gist.github.com/muratsuzen/eeee6501f1bbbfadc1d8cc2188ac2b81.js"></script>

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

<script src="https://gist.github.com/muratsuzen/45fc92c97627bee79cd9ecb619813d2e.js"></script>

Kaynak: Jekyll Doc{:target="_blank"}{:rel="nofollow"}, Github Pages{:target="_blank"}{:rel="nofollow"}