Yazılım

Jekyll nedir? Jekyll Kurulumu Nasıl Yapılır.

Jekyll nedir?

Jekyll, GitHub tarafından geliştirilen, ayrıca veritabanı gerektirmediği için oldukça performanslı ve blog için de kullanılabilen, basit bir sabit sayfa oluşturucu(static site generator) yazılımıdır. Ruby dilinde kodlanmıştır. Çalışma mantığı kısaca şöyledir: Siz bir yazı/sayfa hazırlarsınız Jekyll hazırladığınız yazıyı/sayfayı static html sayfasına dönüştür. Ayrıca eğer sitenizi Jekyll kullanarak oluşturmak isterseniz GitHub Pages üzerinde ücretsiz host edebilirsiniz.

Avantajları/Dezavantajları nedir?

Dezavantajlarından başlamak gerekirse, WordPress platformunda olduğu gibi tek tıklamayla eklenti/tema yüklemek o kadar kolay değil, azıcıkta olsa HTMLCSSJS-Ruby dörtlüsünü bilmeniz gerekebilir, kurulum ve yapılandırması da WordPress’e kıyasla biraz zor gelebilir ayrıca GitHub Pages dışında kendiniz host etmek isterseniz sunucu yapılandırması hakkında da biraz teknik bilgi bilmeniz gerekebilir. Avantajları ise, WordPress’te olduğu gibi eklenti yığınlarıyla veya kasıntı temalarla uğraşmak zorunda değilsiniz. Siz içeriğinizi üretin gerisini Jekyll oluştursun. Eklenti yığınları ve kasıntı temalarla sunucuyu yormayıp üstüne bir de veritabanı gerektirmeyince Jekyll ile oluşturacağınız siteler oldukça performanslı olacaktır.

Jekyll Kurulumu

Blog boyunca komutlar yazılırken ve ekran görüntüleri alınırken işletim sistemi olarak Mac OS X kullanılacaktır. Aşağıda verilen linklerden Windows ve Linux için Jekyll kurulumu tamamlanıp blog’daki adımlar takip edilebilir.

Jekyll, Ruby ile yazılan bir araç olduğu için geliştiricileri, Jekyll’ı bir Ruby paketi gibi dağıtmayı uygun görmüşlerdir. Dolayısıyla Jekyll kurulumu, RubyGems (Ruby’nin paket yöneticisi, .NET platformundaki Nuget ve Node.js’teki npm benzeri) ile sağlanmaktadır. Kullandığınız işletim sistemine göre aşağıdaki yönergeleri takip ederek Jekyll kurulumunu tamamlayıp demo blog’umuzu hazırlamaya başlayalım.

Ozaman Run

Blog’umuzu hazırlamaya başlamadan hem yaptığımız seçimlerin daha iyi anlaşılması hem de elimizin alışması ve ısınmak için Jekyll kullanarak çok basit bir web sitesi scaffold edelim ve bunu kendi bilgisayarımızdan lokal olarak sunup tarayıcıda görüntüleyelim.

Daha önce de yazıldığı gibi, komut satırından $ jekyll new MyBlogSite komutu verilerek çok basit anlamda bir blog sitesi scaffold ederek onun üzerinde çalışmaya başlayabiliriz. Eğer özgün bir tasarımı hedefliyorsanız bu yolla başlamalısınız fakat bu blog’daki gibi daha kısa sürede tasarımını çok büyük oranda başkaları ile paylaşacağınız bir tasarıma razıysanız Jekyll temalarından birini seçerek başlamanız gerekecektir.

  1. Komut satırını açıp web sitenizi yaratmak istediğiniz klasöre gidip $ jekyll new MyBlogSite komutunu çalıştırın. Aşağıdaki çıktıda da görebileceğiniz üzere Jekyll tek bir sayfadan 2016-07-15-welcome-to-jekyll.markdown oluşan bir siteyi oluşturdu.
Gokhans-MacBook-Pro:Garbage gsengun$ jekyll new DemoBlog
 New jekyll site installed in /Users/gsengun/Desktop/Garbage/DemoBlog.
 Gokhans-MacBook-Pro:DemoBlog gsengun$ tree
 .
 ├── _config.yml
 ├── _includes
 │   ├── footer.html
 │   ├── head.html
 │   ├── header.html
 │   ├── icon-github.html
 │   ├── icon-github.svg
 │   ├── icon-twitter.html
 │   └── icon-twitter.svg
 ├── _layouts
 │   ├── default.html
 │   ├── page.html
 │   └── post.html
 ├── _posts
 │   └── 2016-07-15-welcome-to-jekyll.markdown
 ├── _sass
 │   ├── _base.scss
 │   ├── _layout.scss
 │   └── _syntax-highlighting.scss
 ├── about.md
 ├── css
 │   └── main.scss
 ├── feed.xml
 └── index.html

2. Henüz Jekyll’a siteyi oluşturmak için bir komut vermedik dolayısıyla yukarıdaki çıktıda site ile ilgili html, css ve js dosyaları göremiyoruz. Jekyll’ın siteyi oluşturması için $ jekyll build ya da kısaca $ jekyll b komutlarını çalıştırabiliriz. Siteyi hem build etmek hem de sunmaya başlamak için ise $ jekyll serve ya da yine kısaca $ jekyll s komutlarını verebiliriz. Çıktıdan da görebileceğimiz üzere Jekyll yeni oluşturduğumuz blog sitemizi önce build ederek http://127.0.0.1:4000/ adresinden (yani lokal olarak 4000 portundan) yayınlamaya başladı.

 Gokhans-MacBook-Pro:DemoBlog gsengun$ jekyll s
 Configuration file: /Users/gsengun/Desktop/Garbage/DemoBlog/_config.yml
             Source: /Users/gsengun/Desktop/Garbage/DemoBlog
     Destination: /Users/gsengun/Desktop/Garbage/DemoBlog/_site
 Incremental build: disabled. Enable with --incremental
     Generating...
                     done in 0.242 seconds.
 Auto-regeneration: enabled for '/Users/gsengun/Desktop/Garbage/DemoBlog'
 Configuration file: /Users/gsengun/Desktop/Garbage/DemoBlog/_config.yml
     Server address: http://127.0.0.1:4000/
 Server running... press ctrl-c to stop.

3.Favori tarayıcımızı açarak adres satırına blog’umuzun sunulduğu adresi http://127.0.0.1:4000/ girerek sonucu görelim. Eğer aynı adımları takip ettiyseniz siz de aşağıdaki gibi bir çıktı görmelisiniz.

Jekyll Scaffolded Site

4.Ctrl + C tuş kombinasyonu ile Jekyll’ın mini web sunucusunu durduralım. Blog sitesinin bulunduğu ana klasörde artık _site adlı klasör dikkatinizi çekecek. Jekyll konfigürasyon dosyalarındaki ayarlar, template’ler ve blog’ların yazıldığı markdown (ya da md) uzantılı dosyalardaki içeriği statik site olarak bu klasörün altında oluşturuyor. Blog’u oluşturduğunuz klasörde tree _site komutunu koşturarak statik sitenizin dosya yapısına göz atabilirsiniz.

Gokhans-MacBook-Pro:DemoBlog gsengun$ tree _site
 _site
 ├── about
 │   └── index.html
 ├── css
 │   └── main.css
 ├── feed.xml
 ├── index.html
 └── jekyll
     └── update
         └── 2016
             └── 07
                 └── 15
                     └── welcome-to-jekyll.html

Şablon Kurulum Adımları

Bu blog’da bir demo hazırlayabilmek için yeni bir email ve yeni bir Github hesabı açılmıştır. Aşağıdaki demo’larda kullanılacak Github kullanıcı adı gsengundemo olacak. Aşağıdaki adımları takip ederken bu kullanıcı adını gördüğünüz yerlerde kendi Github kullanıcı adınızı yazmanız gerektiğini tekrar hatırlatıp adımlara geçelim.

Bir önceki adımda Jekyll’in scaffold ettiği basit bir blog sitesini oluşturduk fakat sanırım sitenin görselliği ve fonksiyonalitesi sizi de pek memnun etmedi. Daha önce de belirtildiği gibi blog sitemizi oluştururken yukarıdaki template’den başlamak yerine görsellik ve fonksiyonalitesi güçlendirilmiş ve ücretsiz olarak kullanıma sunulan Jekyll temalarından faydalanabiliriz. Birçok temanın ön izleme seçeneği ile sunulduğu Jekyll Themes‘e göz atarak kendi beğeninize ve amacınıza yönelik bir tema seçebilirsiniz. Biz bu blog’da Beautiful Jekyll adlı temayı kullanacağız. Başlamadan önce isterseniz tema’nın tema’nın demo site‘sine ve bu blog yazısı sonunda oluşturacağımız blog demo sitesine göz atabilirsiniz.

  1. Beautiful Jekyll Github sayfasına giderek aşağıda görülen fork butonuna basın. Github’daki Beautiful Jekyll reposunu kendi account’unuz altına fork etmiş olacaksınız. Böylece o repository’nin bir kopyasını size özel bir biçimde oluşturup değiştirebileceksiniz.
Fork Beautiful Jekyll

2.Halihazırda Github’a giriş yapmadıysanız kullanıcı adı ve şifrenizi girerek login olun. account’unuz ile https://github.com sitesine giriş yapın ve fork butonuna tekrar basın. Tarayıcınızın adres satırının https://github.com /gsengundemo/beautiful-jekyll olarak değiştiğini ve kendi hesabınızda beautiful-jekyll adlı bir repo oluştuğunu göreceksiniz.

3.Aşağıdaki ekranda bulunan Settings butonuna basarak repo’nun ayarlar bölümünü açın.

Repo Settings

Açılan aşağıdaki ekranda bulunan Repository Name metin kutusuna gsengunblog.github.io yazarak Rename butonuna basın.

Repo Rename

4. Birkaç saniye bekleyip Github Pages tarafından blog’un oluşturulup yayınlanmasına izin verdikten sonra https://gsengundemo.github.io/ adresini ziyaret ederek birkaç adımda oluşturduğumuz blog sitesini inceleyebilirsiniz.

Demo Site Layout

Şablonu Özelleştirme Adımları

1.Yuklarıdaki adımlarla Beautiful Jekyll temasını kullanarak kendimize bir şablon (template) oluşturduk. Şimdi bu template’i nasıl özelleştirebileceğimizi adım adım inceleyelim.

Öncelikle blog üzerinde daha rahat değişiklik yapabilmek için blog’umuzun kaynak kodunu lokal bilgisayarımıza alacağız ve blog’umuzu daha önce bilgisayarımıza yüklediğimiz Jekyll yardımıyla sunacağız. Sonra blog üzerinde değişiklikler yapıp bu değişiklikleri lokal sunucumuz ile test edip değişikliklerden memnun kaldıktan sonra Github’daki repo’muza push ederek yayınlanmasını bekleyeceğiz.

  1. Favori Git istemcimiz (komut satırı, SourceTree, Github Desktop, SmartGit, GitKraken, vb) ile Git repo’muzu Github’dan lokal klasörümüze alalım. Biz daha kolay gösterim sağlayacağı için komut satırını tercih edeceğiz ve git clone komutunu kullanacağız. Bu komut Github’da bulunan repo’yu bire bir olarak lokal klasörüme kopyalayacak.
Gokhans-MacBook-Pro:Garbage gsengun$ git clone https://github.com/gsengundemo/gsengundemo.github.io.git
 Cloning into 'gsengundemo.github.io'...
 remote: Counting objects: 1069, done.
 remote: Total 1069 (delta 0), reused 0 (delta 0), pack-reused 1069
 Receiving objects: 100% (1069/1069), 3.12 MiB | 1.48 MiB/s, done.
 Resolving deltas: 100% (613/613), done.
 Checking connectivity... done.
 Gokhans-MacBook-Pro:Garbage gsengun$ ls

Bilgisayarınızın dosya sisteminde klonladığınız repo isminizle uyumlu olarak oluşturulacaktır. tree komutunu kullanarak repo içeriğini görebilirsiniz.

 Gokhans-MacBook-Pro:Garbage gsengun$ tree gsengundemo.github.io/
 gsengundemo.github.io/
 ├── 404.html
 ├── Gemfile
 ├── Gemfile.lock
 ├── LICENSE
 ├── README.md
 ├── Vagrantfile
 ........
 ........

2. Ozaman Run bölümünde yaptığımıza benzer şekilde blog’umuzu klonladığımız klasöre giderek $ jekyll serve ya da $ jekyll s komutunu verin. Jekyll serve veya kısaca s komutu ile blog sitenizi http://127.0.0.1:4000/ adresinden yayınlamaya başlayacaktir. Bu sitenin https://gsengundemo.github.io adresi ile aynı içeriği verdiğini göreceksiniz.

 Gokhans-MacBook-Pro:gsengundemo.github.io gsengun$ jekyll s
 Configuration file: /Users/gsengun/Desktop/Garbage/gsengundemo.github.io/_config.yml
             Source: /Users/gsengun/Desktop/Garbage/gsengundemo.github.io
     Destination: /Users/gsengun/Desktop/Garbage/gsengundemo.github.io/_site
 Incremental build: disabled. Enable with --incremental
     Generating...
                     done in 0.323 seconds.
 Auto-regeneration: enabled for '/Users/gsengun/Desktop/Garbage/gsengundemo.github.io'
 Configuration file: /Users/gsengun/Desktop/Garbage/gsengundemo.github.io/_config.yml
     Server address: http://127.0.0.1:4000/
 Server running... press ctrl-c to stop.
Demo Site Local

3.Favori metin editörünüz ya da entegre geliştirme aracınız (IDE) ile klonladığınız klasörü açın. Biz demo’da Windows, Linux ve Mac üzerinde de çalışan Visual Studio Code metin editörünü kullanacağız. Ana klasörde bulunan _config.yml dosyasını açarak gerekli değişiklikleri yapmaya hazır hale gelin. Jekyll bazı değişiklikleri yeniden başlatılmaya gerek duymadan tarayıcınıza yansıtacaktır. Tarayıcınıza yansımayan değişiklikler için sunucuyu ctrl + C ile durdurup $ jekyll s komutu ile tekrar başlatabilirsiniz.

3.1. Linklerle ilgili düzenlemeler:

3.1.1. url: "http://username.github.io" yazan kısmı url: "http://gsengundemo.github.io" olarak değiştirin. Bu değişiklik sayesinde sayfa içinde kullanılan ve ana sayfaya dönmeye yarayan linkler doğru bir şekilde yönlenecektir.

3.1.2. Sağ üst tarafta bulunan linkleri düzenlemek için navbar-links: bölümünü değiştirebilirsiniz.

3.1.3. footer-links-active: bölümünü kullanarak blog sitenizin altında hangi linklerin bulunacağını belirleyebilirsiniz. Bu örnekte sadece email, github ve twitter linklerini aktif bırakacağız aşağıda.

 footer-links-active:
     rss: false
     facebook: false
     email: true
     twitter: true
     github: true
     linkedin: false
     stackoverflow: false

3.1.4. Yukarıda aktif bıraktığınız linkler için aşağıda gerekli bilgileri girin.

author:
     name: Gsengun Demo
     email: "[email protected]"
     facebook: yourname
     github: gsengundemo
     twitter: gsengundemo
     linkedin: yourlink
     stackoverflow: yourlink

3.2. Metadata düzenlemeleri:

3.2.1. title: My website kısmı blog’unuzun başlığı ile değiştirin. Örneğin: title: Gsengun Jekyll Demo Site

3.2.2. description: kısmında blog’unuzla ilgili kısa bilgi verin.

3.3. Ana Sayfa düzenlemeleri

3.3.1. Ana klasörde bulunan index.html dosyasını açarak aşağıdaki satırları ana sayfada görünmesini istediğiniz bilgilere göre düzenleyin.

title: My website
 subtitle: This is where I will tell my friends way too much about me

Biz aşağıdaki bilgileri girdik.

 title: Gsengun Jekyll Demo Site
 subtitle: Bu blog Jekyll ile yapılmıştır.

3.3.2. Ana klasördeki _posts klasöründe bulunan bloglardan bir kısmını silip örnek olarak kullanılacak iki tane post bırakın. Aşağıdaki gibi özelleştirilmiş bir içerik görmelisiniz.

Demo Site Local Customized
  1. En son adım olarak yeni bir blog yazısının nasıl oluşturulacağını görelim. _posts klasörünün altındaki blog’lardan birini yine aynı klasöre kopyalayarak ona blog’unuza dair bir isim verin. Bizim oluşturduğumuz dosyanın adı 2016-07-12-ozellestirilmis-ilk-post.md oldu. Vereceğiniz tarihin bugün veya bugünden önce olması gerektiğini belirterek içinde bulunulan günün sonrasındakilerin ana sayfada görüntülenmeyeceğini belirtelim. Kopyalama yoluyla yeni oluşturduğunuz dosyayı açarak ilk post’unuzu yazın. Sayfayı yenilediğinizde aşağıdakine benzer bir görüntü elde etmelisiniz.
Demo Site First Post

Sonuç ve Sonraki Adımlar

Bu blog’da Jekyll statik site oluşturma aracı ve Beautiful Jekyll temasını kullanarak bir blog sitesi oluşturduk ve bu siteyi konfigürasyonda verilen parametreleri değiştirerek basit bir şekilde özelleştirdik. Beautiful Jekyll temasının verdiği baz kodda daha fazla değişiklik yaparak, blog’u daha da fazla özelleştirebilriz. Bu blog sitesinin Github reposunu bilgisayarınıza klonlayıp, kendi bilgisayarınızda Jekyll ile çalıştırabilir ve Beautiful Jekyll temasına yapılan eklemeleri gözlemleyebilirsiniz.

Jekyll’da blog sitenizi daha interaktif ve çekici kılabilecek, ücretsiz olarak hizmete sunulan birçok plugin bulunmaktadır. Blog sitenize kullanıcı yorumlarını DISQUS aracılığıyla ekleyebileceğiniz bir plugin bulabileceğiniz gibi blog post’larınızı tag’leyebileceğiniz bir plugin de bulabilirsiniz. Farklı plugin’ler için http://www.jekyll-plugins.com/ ve http://jekyll.tips/jekyll-plugins/ sitelerini ziyaret edebilirsiniz.

vote
Article Rating
İlgili Yazı :  Chrome Karanlık (Gece) Mod Desteği Sundu
Kaynak
https://gokhansengun.com/blogun-teknik-altyapisi/
Etiketler

agah

Herkesin tek hakkı var.

İlgili Makaleler

Abone ol
Bildir
guest
0 Yorum
Inline Feedbacks
View all comments
Başa dön tuşu
0
Would love your thoughts, please comment.x
()
x
Kapalı
Kapalı