Github Pages ve Jekyll ile blog kurmak

Merhabalar . Bugün sizlere Github Pages ve Jekyll’den bahsedip bu ikisi ile basitçe nasıl bir blog oluşturulduğundan bahsetmek istiyorum.

Github Pages nedir?

Github tüm kullanıcılarına kişisel, organizasyon veya proje sayfaları için Github Depoları(Repositories) üzerinden yönetilen hosting sağlıyor. Ücretsiz bir kullanımı var. Biz kendimize kişisel site(blog) kuracağız.

Github Pages kurulumu

Github ile blog oluşturmak için yeni bir depo oluşturun ve ismini kullanıcıisminiz.github.io olarak ayarlayın. Şimdilik deponuzun içine index.html dosyası ekleyip içine basitçe <h1>Merhaba Dünya!</h1> yazarak deneme için dosyamızı depomuza işleyelim(commit).

Sitemiz tamam. Adres çubuğuna kullanıcıisminiz.github.io yazarak sitenizi açın. Sayfada

Merhaba Dünya!

çıktısını gördüyseniz başarılı bir kurulum yapmış bulunuyorsunuz. Gihub Pages’i anladıydanız biraz Jekyll’den bahsedelim.

Jekyll nedir?

Jekyll, basit, blog odaklı, static site oluşturucudur. Ruby ile yazılmıştır. Github Pages tarafından desteklenen bir mekanizmadır. Jekyll bizim için gerekli bütün site şablon dosyalarını otomatik olarak oluşturuyor. Markdown sözdizimini destekler. Yani biz içeriğimizi Markdown formatıyla yazarız, Jekyll bizim için bunları html formatına çevirir.

Başlamadan önce

Windows üzerinde mi çalışıyorsunuz?

Eğer sizde Windows işletim sistemi kullanıyorsanız biraz zahmet olacak ama Jekyll kullanmak için birkaç program kurmamız gerekmekte. Jekyll Ruby ile yazılmış bir dil olduğu için öncelikle bilgisayarımıza Ruby‘i kurmamız gerekiyor.

Yukarıda verilen linkten sisteminize uygun olanı indirin ve kurulumu yapın. Kurulum sırasında Add Ruby executables to your PATH kutusunun işaretli olduğunda emin olun.

Jekyll raw kaynak kodlu birkaç dependency dediğimiz pakete sahip olduğu için ve bunları uygun bir şekilde yürütebilmesi için Development Kit’e ihtiyacımız var. Aynı linkten Development Kit’i indirebilirsiniz.(Biraz aşağıda)

Sisteminize uygun DevKit’i indirdikten sonra dosyaları biryere çıkartın. C:\RubyDevKit tavsiye ederim.Şimdi DevKit’i başlatmak ve Ruby ile bağlamamız gerekiyor. Terminali açarak.

cd C:\RubyDevKit

komutu ile ilgili dosyaya girin.

ruby dk.rb init

komutu ile Ruby kurulumunu otomatik algılayacak ilgili yapı(configuration) dosyalarımız oluşturulacak. Daha sonra

ruby dk.rb install

ile oluşturulan dosya ile DevKit Ruby yüklemesine bağlanacak. Ruby için hepsi bu kadar. Artık Ruby Gem adlı paket sistemine sahibiz. Bu sistem Node.js’in npm paket yöneticisi gibi. Gerekli paketleri gem komutu ile yükleyeceğiz.

Terminali açarak

gem install jekyll

diyerek jekyll bilgisayarımız global olarak kuruyoruz. Artık Jekyll ile site oluşturabiliriz.

Biz bu yazıda sıfırdan bir Jekyll sitesi değilde var olan bir Jekyll temasını Github üzerinde Fork’işlemi ile koplayayıp kullanacağız. Bu şekilde fazlasıyla zaman kazanırız.

Bir Jekyll projesi Fork’la

10 binden fazla Fork’u olan Jekyll-now adlı projeyi Github profiliniz üzerinden forklayın.

Daha sonra Settings kısmından deponun ismini kullaniciisminiz.github.io yapın.

Şimdi gerekli dosyaları değiştirmek için depoyu local makinemize, kendi bilgisayarımıza klonlamamız lazım. Ben Github Dekstop kullanıyorum.

Github programımıza açtıktan sonra, sol üst köşeden işaretine daha sonra clone‘a tıklayarak yeni bir depo oluşturuyoruz. Dosya yolunu seçtikten sonra tamam diyerek dosyaları bilgisayarınıza kopyalayın.

Clone işlemi bittikten sonra bir text editör ile clone dosyamızı açın. Ben Visual Studio Code kullanıyorum. Git işlemlerini de terminal veya Github Desktop kullanmadan halledebiliyorum.

_config.yml dosyasını açın. Bu en önemli dosyalardan biri. İçerisindeki name, description, urls vs.. gibi değişkenler var. Bunun içerisindeki bazı değişkenleri kendinize göre değiştirin.

Şimdilik karakter sorunu yaşamamak için _config.yml dosyamıza encoding: utf-8 kodumu da ekliyorum ve kaydediyorum.

Şimdi http://kullaniciisminiz.github.io adresine giderek sitenize göz atabilirsiniz.

Not

Dosyalarınız üzerinde çalışırken bilgisayarınıza kopyaladığınız depo üzerinde değişikler yapacağız fakat bunları her defasında Github’a işlemek bizi biraz uğraştıracak. Bununla sürekli uğraşmamak için terminalde dosyamızın olduğu yere gidiyoruz.

cd C:\Users\EnesPc\Documents\GitHub\oztrkeness.github.io

burada jekyll komutu ile önce dosyalarımızı build ediyoruz.

jekyll build

Daha sonra

jekyll serve

diyoruz. Artık dosyalarımı localhost:4000 üzerinde servis ediliyor. Bu adrese giderek yaptığınız değişiklikleri Github’a atmadan önce görebilirsiniz. Fakat bunun aksine

jekyll serve --watch

komutunu tavsiye ederim. Bu komut yaptığımız değişiklikleri serve komutunun durdurup başlatmamıza gerek kalmadan görmemizi sağlıyor. Yaptığımız değişiklikleri kaydettikten sonra tek yapmamız gereken sayfayı yenilemek.

Dosyalara göz atalım

Aşağıda Jekyll site yapımız var inceleyerek daha fazla bilgi edinebilirsiniz.

/Users/barryclark/Code/jekyll-now
├─ CNAME # Kendi domain adresimizi içerir (Varsa)
├─ _config.yml #Jekyll'in yapı dosyaları
├─ _includes #Şablon dosyalarında kullanılacak kod parçaları
│  ├─ analytics.html
│  └─ disqus.html
├─ _layouts 
│  ├─ default.html # Ana şablon. <head>, <navigation>, <footer> gibi tagları içerir
│  ├─ page.html # Static sayfa düzeni
│  └─ post.html # Postlarımızın sayfa düzeni
├─ _posts # Postarımızın bulunduğu klasör
│  └─ 2014-3-3-Hello-World.md
├─ _site # Jekyll sitemizi inşa ettikten sonra HTML'e çevrilen dosyalarımız burada tutulur ve bize sunulur.
│  ├─ CNAME
│  ├─ LICENSE
│  ├─ about.html
│  ├─ feed.xml
│  ├─ index.html
│  ├─ sitemap.xml
│  └─ style.css
├─ about.md # Static 'Hakkında' sayfamız.
├─ feed.xml
├─ images # Resimlerimizin bulunduğu klasör.
│  ├── first-post.jpg
├─ index.html #Anasayfa düzeni
├─ scss # The Sass style sheets for my website
│  ├─ _highlights.scss
│  ├─ _reset.scss
│  ├─ _variables.scss
│  └─ style.scss
└── sitemap.xml