JEKYLL İLE STATİK WEB SİTESİ YAPIMI

Bu Covid-19 belasıyla uğraştığımız günlerde evlere kapanmışken, birşeyler öğrenmenin tam zamanı. Geçen Grails için bir yazı yazmıştım bu sefer Jekyll üzerine yazayım bakalım. Jekyll, Ruby dilini kullanan ve statik web siteleri tasarlamak amacıyla kullanılan bir yapı. Neden statik site yapmak için böyle yapılar icat edilmiş adım adım ilerledikçe göreceğiz. Burada Jekyll sitesindeki adım adım öğreticiyi takip ettim.

Kurulum için konsolda

gem install jekyll bundler

yazarak Ruby gem olarak sistemimize ekliyoruz. Bendeki Ruby versiyonu ile uyumlu olmadığı için son versiyon olan 4.0.0 yerine 3.1.1 kurdum.

Yeni Web Sitesi Yapalım

İşe sıfırdan başlayacağız. Önce sitemizin dosyalarını koyacağımız boş bir klasör oluşturalım. Adı da mesela "mysite" olsun. 

Jekyll'in önemli özelliklerinden biri veritabanı kullanmaması. Bütün veriler , yazılar , site yapılandırması bu klasör içerisindeki text dosyalarda saklanacak.

İlk dosyamızı tanımlayalım. Sitenin ilk sayfası her zaman "index.html" olur. Biz de öyle yapalım klasörümüzün içinde yeni bir "index.html" dosyası oluşturalım ve içine şunları yazalım.

Derlemek

Jekyll bir statik web sitesi üreteci. Bu yüzden sitemizi bir server'da yayınlamadan önce derleme yapmamız gerekiyor. Sitemizin klasöründe konsol açıp şu komutu girelim.

jekyll build

Bu komut sitemizi oluşturur ve ana klasör altında "_site" adında bir klasöre statik site dosyalarını koyar.

Ama her yaptığımız değişiklikte derleme yapıp server'a koyup deneyeceğimize konsolda

jekyll serve

komutu girerek kendi server'ı üzerinden her yaptığımız değişikliği anında görebileceğimiz bir web server çalıştırabiliriz. Şimdi komutu girelim. Server çalışacak ve bize sitemizin localhost:4000 adresinde yayına başladığını bildirecektir. Bu sayfayı açalım ve sonucu görelim.

Şimdi incelediğimizde Jekyll ne yaptı? Sadece bir dosyayı bir yerden alıp başka yere koydu. Acele etmeyelim çekirgele daha öğrenecek çok şey var.

LIQUID

Liquid ile Jekyll biraz daha ilginç olmaya başlar. Liquid ana parçaları nesneler , tag'ler ve filtreler olan bir templating dilidir. 

Nesneler

Nesneler Liquid'e içeriği nereye koyacağını gösterir. Çift süslü parantez ile çevrelenmiş olarak ifade edilir. {{ içerik }}. örneğin:

Sayfada tanımlanmış "title" isimli değişkenin değerini gösterir.

Tag'ler

Tag'ler lojiği ve akış kontrolünü sağlar. Süslü parantez ve "yüzde" işaretleri ile çevrilidir. Örneğin:

"page.show_sidebar" değişkeni değeri true ise sidebar içeriğini yayınlar.

Filtreler

Şimdi sayfadaki "Merhaba Dünya!" yazısını küçük harf olarak yazalım. İlk önce yazının olduğu satırı şöyle değiştirelim. 

Bunu bu şekliyle kaydeder ve sayfayı yenilersek aynen orada yazan şekili ekranda görürüz. Jekyll'a sayfada Liquid kullanıldığını ifade etmemiz gerekiyor. Bunun için sayfa kodunun en üstüne front matter adı verilen bloğu koymalıyız. Sayafanın en üstüne şunu ekleyelim.

Şimdi sayfayı yenilersek yazımızın küçük harfe döndüğünü göreceğiz.

Front Matter

Front Matter bir YAML dili kalıbıdır. 3lü tire işaretinden oluşan iki satır ve arasındaki kodla ifade edilir. Sadece Liquid kullanıldığını anlatmakla kalmaz, sayfada kullanılacak değişkenlerin değerlerini tanımlamak için de kullanılır. Örneğin :

Burada tanımlanan değişkenler Liquid tarafından sayfa değişkenleri olarak görülür. Örneğin yukarıdaki değişkenin değerini sayfada göstermek istiyorsak şunu yazarız:

Front matter kullanalım

Hadi sayfa etiketini değişken kullanarak gösterelim. 

Hala merak ediyorsunuzdur, neden aynı işi HTML yerine kodla yapmak için daha fazla şey yazıyoruz diye. İlerledikçe daha net anlayacağız, programcı başta ne kadar boş şeyle uğraşırsa ilerledikçe o kadar hızlanır.

YERLEŞİMLER

Web siteleri genelde birbirine yerleşim olarak benzeyen birçok sayfadan oluşur. 

Jekyll sayfalar için HTML olduğu gibi Markdown yazılmış sayfaları da destekler. Markdown özellikle yazıların çok olduğu web sayfaları için çok kullanışlıdır. (başlıklar paragraflar resimler şeklinde) HTML'ye nazaran çok daha az işçilik ister. Bir sonraki sayfamızı da Markdown kullanarak yapalım. 

Ana klasörde "about.md" adında yeni bir dosya oluşturalım. Sayfanın temel yapısı için "index.html" dosyasını kopyalayıp içeriğini değiştirebiliriz. Fakat böyle yapınca sayfalarımızın görüntüsünü değiştirmek istediğimizde tüm sayfalara girip aynı değişiklikleri tekrar tekrar yapmamız gerekecek. Sadece iki sayfası olan sitede bunu yapmak kolay da acaba sitemizde 50 sayfa olursa ne yapacağız? Basit bir değişklik bile çok uzun vakitler alacaktır. 

Bir yerleşim oluşturmak

Yerleşim kullanmak çok güzel bir çözüm. Yerleşimler sayfa içeriği dışındakileri koyabileceğimiz dosyalardır. Bu dosyalar ana klasör altında "_layouts" adı verilen bir alt klasöre konulmalıdır. 

Şimdi "_layouts" alt klasörünü oluşturup, içinde "default.html" adında bir dosya oluşturalım. İçine şunları yazalım.

Dikkat edersek index.html dosyasına çok benziyor, oradan kopyalayıp değiştirebiliriz de. Sayfanın içeriği bu kodda "content" adı verilen değişken yerine gelecektir. 

Bu yerleşim dosyasını "index.html" dosyamızın kullanması için değişken tanımlarına bir "layout" değişkeni ekliyoruz. Yerleşime ait kodları çıkardıktan sonra index.html dosyamızı şu hale getiririz.

Tarayıcıda sayfayı yenilersen hiç bir şeyin değişmediğini görürüz. Yerleşim dosyasında {{ content }} ile gösterilen yere index.html dosyamızın içeriği geldi. Bir şey daha var index.html dosyamızda sayfa değişkeni olarak tanımladığımız "page.title" değişkeni yerleşimde kullanıldı ve sayfa etiketini belirledi. 

Hakkımda Sayfası

Tekrar about.html sayfasına dönelim. Bu sayfa için about.md adında bir markdown dosyası üretmiştik. İçine şunları yazalım.

Şimdi localhot:4000/about.html adresine gittiğimizde şu sayfayı göreceğiz.

Artık 2 sayfalı bir web sitemiz var. Sayfalar arasında gezinti yapmak için birşeyler ekleyelim.

INCLUDE

Şu anda sayfalarımız arasında geçebilmek için sadece adrese direk bütün adresi yazmak seçeneği var. Sayfalara link koyup birinden diğerine geçiş sağlamanın en iyi yolu linkleri yerleşim dosyasına eklemek olacak. Bunu direk olarak dosyaya ekleme yapacağımıza "include" tag kullanalım ve nasıl kullanıldığını görelim.

Include tag

Bu tag yardımıyla "_includes" adlı klasör içinde bulunan bir içerik sayfamıza katılır. Include özellikle okunabilirliği artırmak için bizim birçok sayfada kullandığımız kod şeklinde parçaları bir arada toplamak için yararlıdır. 

Site içinde gezinme kodları site büyüdükçe çok karmaşık hale gelebilir bu yüzden _includes klasörüne yerleştireceğiz. 

Include kullanımı

Gezinme için "_includes" klasörü altında "navigation.html" üretelim ve içine şunları yazalım.

Şimdi de "_layouts/default.html" dosyasına include tag'i ekleyerek içeriğe bu dosyayı ekleyelim.

Şimdi tarayıcıda sayfayı yenileyip linklerin nası göründüğüne bakalım.

Bulunulan sayfa rengini değiştirmek

Bir adım ileri gidelim ve bulunulan sayfaya ait linkin rengini değiştirelim. 

"page.url" değişkeninde bulunulan sayfanın bilgisi var. O zaman bulunulan sayfadaysak rengini değiştirmek için şöyle yaparız.

Şimdi sayfayı yenileyip görelim.

Hala kod tekrarlaması var. Yeni sayfalar eklendikçe navigation.html dosyamızda birbirine benzeyem birçok satır olacak. Onu da ilerleyen bölümde düzenleyeceğiz.

VERİ DOSYALARI

Jekyll "_data" klasörü altına konulan YAML, JSON ve CSV veri dosyalarından veri kullanabilir. Veri dosyaları içerikleri kodlardan ayırmak ve böylece daha rahat hakim olunan siteler yazmak için kullanışlıdır.

Bu konuda gezinti verilerini bir veri dosyasına saklayarak koddan ayıracağız. 

Veri dosyası kullanımı

YAML Ruby dilince çok yaygın bir veri dosyası türüdür. Böyle bir dosya kullanarak gezinti adres ve isimlerini saklayacağız. 

Gezinti verileri için "_data" klasörü altında "navigation.yml" adında bir dosya üretelim ve içine şunları yazalım.

Jekyll bu veri dosyasını "site.data.navigation" değişkeninde görür. "_includes/navigation.html" dosyasında tek tek her sayfayı işleyeceğimize bu veri dosyasındaki veriler üzerinden iterasyon yapabiliriz. 

Ne oldu? Bir şey değişmedi , sonuç aynı. fakat artık gezintiye yeni sayfalar ekledikçe çok daha kolay gezinti linkleri değiştirebileceğiz.

ASSET

Genel olarak tüm web sitelerinde olduğu gibi CSS JS ve Image dosyaları  Jekyll'da da "assets" adı verilen bir klasör altında toplanır. Jekyll siteleri genellikle şu klasör yapısını kullanırlar.

Sass

_includes/navigation.html dosyasındaki satır içinde yapılan stil belirtimi sağlıklı bir yol değil, çünkü daha çok stile müdahale ettikçe karmakarışık bir hal alacaktır. Bu yüzden stili bir sınıf olarak tanımlayacağız. 

Stil için standart CSS dosyası kullanabileceğimiz gibi bir adım ileri giderek Sass dosyası da kullanabiliriz. 

İlk önce "assets/css/styles.scss" dosyasını üretelim ve içine şunu yazalım.

Burada @import "main" satırı Jekyll'a "_sass" klasöründeki "main.scss" dosyasını kullanmasını anlatır. Bu örnekte sadece bir tane "main" stil dosyası var. Ama bu şekilde bir organizasyon yapmak büyük sitelerde stil dosyalarını düzenli tutmak için çok faydalıdır.

Şimdi "_sass/main.scss" dosyasını üretelim ve içine şunları yazalım.

Şimdi yerleşim dosyamızda bu stile referans verelim. "_layouts/default.html" dosyasına ekleme yapalım.

Dikkat edersek "styles.css" dosyasına referans veriyoruz. Ama dosya adı scss idi. Daha önce de hatırlayalım "about.md" dosyasına "about.html" adıyla ulaşmıştık. Jekyll standart tipler olarak dosyaları algılıyor. 

Şimdi Jekyl ile yapılabilecek en güzel uygulamaya geliyoruz. Bir blog sitesi yapımı.

BLOG SİTESİ

Sizce bir blog veri tabanı olmadan yapılabilir mi? Jekyl ile blog sadece text dosyalar kullanarak yapılabilir. 

Gönderiler

Blog gönderileri "_posts" adında bir klasör içinde saklanır. Gönderilerin dosya isimleri farklı bir formatta olmalıdır. Yayınlanma tarihi , başlık ve dosya uzantısı. 

İlk gönderimizi "_posts/2019-08-20-muz.md" ismi ile üretelim.

Dosyadaki yazılanları kolaylık olsun diye Wikipedia'dan kopyaladım. Bu dosya yapı olarak "about.md" dosyamıza benziyor. Ama farklı bir yerleşim dosyası kullanmış ve author adında bir değişken değeri içeriyor. 

Yerleşim

"post" yerleşim dosyası henüz mevcut değil. _layouts/post.html" dosyasını üretelim ve içine şunları yazalım.

Bu yerleşimin miras yoluyla geçmesine bir örnek , yani yerleşim içinde yerleşim oluyor. "date_to_string" ile de tarih gösterimi yakışıklı bir hale getiriliyor.

Gönderi listesi

Şu anda blog gönderilerini göstermek için bir sayfa düzenlemedik. Jekyll'da gönderiler "site.posts" değişkeni ile ifade edilir. 

Ana klasörde "blog.html" adında bir dosya üretelim ve içine şunları yazalım.

Bu kodla ilgili söylenecek birkeç şey var.

• "post.url" Jekyll tarafından gönderileri adreslemek için otomatik olarak üretilir.
• "post.title" gönderi dosyasının isminden Jekyl tarafından alınır ve title değişkenine konur.
• "post.excerpt" gönderinin ilk paragrafını alır.

Şimdi gezinti linklerine blog sayfasını da ekleyelim. _data/navigation.yml" dosyasına ekleme yapıyoruz. 

 

Şimdi test edelim.

Birden fazla gönderinin nasıl görüneceğini test etmek için bir-iki gönderi daha ekleyelim. 

"_posts/2019-08-21-elma.md"

"_posts/2019-08-22-kiwi.md"

http://localhost:4000/blog.html sayfasına gidip kontrol edelim.

Şimdi blog yazarları hakkında bir sayfa yapalım.

KOLLEKSİYONLAR

Bloğumuzdaki her yazarın bir sayfası olsun. O sayfada yazar hakkında bilgi ve yazılarının bir listesi olsun. Bu amaçla bu sefer kolleksiyonları kullanacağız.

Kolleksiyonlar blogdaki gönderilere benzer ama bunlarda tarih olmaz. 

Jekyll'da kolleksiyonlar konfigürasyon dosyası içinde tanımlanır. Konfigürasyon dosyası Jekyll'da default olarak "_config.yml" adındadır. Ana klasörde bu isimde bir dosya üretelim.

Konfigürasyon dosyasının algılanması için bu dosyada değişiklik yaptıktan sonra Jekyll server'ı durdurup tekrar başlatmamız gerekir.

Yazarları ekleyelim

Konfigürasyon dosyasında kolleksiyon olarak yapılan tanımlar ana klasörde alt çizgi ve kolleksiyon adından oluşan bir klasör içindeki dosyalardır. Buradaki kolleksiyon adına göre klasörümüzün adı "_authors" olacak. Şimdi iki tane yazarımız için dosyaları bu klasör içinde tanımlayalım.

"_authors/jill.md"

"_authors/ted.md

Kadro sayfası

Sitemizin yazarlarını listeleyeceğimiz bir sayfa ekleyelim. Jekyll bu kolleksiyonu "site.authors" değişkeninde saklar. "staff.html" adında bir sayfa ekleyelim ve yazar listemizi göstermek için "site.authors" üzerinden iterasyon yapalım.

İçerik markdown olduğundan "markdownify" filtresiyle yayınladık. {{ content }} komutundaysa bu işlem otomatik yapılır.

Ayrıca gezinti linklerine kadroyu eklemek için "_data/navigation.yml" dosyasına ekleyelim.

Deneyelim bakalım.

Yazarların sayfalarını yayınlamak istersek. Kolleksiyonlardaki dökümanlar blog gönderileri gibi direk çıktı vermezler bunu sağlamak için konfigürasyon dosyasına ekleme yaparak bunu istediğimizi belirtmeliyiz. 

"_config.yml" dosyasına şu eklemeyi yapalım.

Tabii ki konfigürasyon dosyasını değiştirdiğimiz için Jekyll server'ı durdurup tekrar çalıştırmalıyız. 

Kadro sayfasından yazarların sayfalarına link yapabilmek için "author.url" değişkenini kullanırız. 

"staff.html" dosyasına yazarların sayfalarına link ekleyelim. 

Blog gönderileri gibi yazar sayfasına da bir yerleşim dosyası tanımlamalıyız. "_layouts/author.html" dosyasını üretelim ve içine şunları yazalım.

Front matter defaultları

Şimdi author tipi dökümanların author yerleşimini kullanmasını sağlayacağız. Bunu dökümanların içinde yapacağımıza konfigürasyon dosyası içinde toptan bir tanımlama yapalım. 

Tüm gönderi gösterilerinin post yerleşim dosyasını kullanmasını istiyorsak, tüm yazar dosyalarının author yerleşimini kullanmasını istiyorsak ve geri kalan tüm sayfaların da default yerleşimini kullanmasını istiyorsak hepsini konfigürasyon dosyası içinde default değerler olarak belirtebiliriz.

_config.yml dosyasına şunları ekleyelim.

Artık tüm sayfalardan ve gönderilerden yerleşim1 ait front matter satırları silebiliriz. (layout: default gibi). Tabii ki konfigürasyon değiştiği için Jekyll server'ı durdurup tekrar başlatacağız. 

Yazarın gönderileri listesi

Yazarın sayfasını oluşturduk. Şimdi sayfanın devamında o yazarın gönderilerini listeleyelim. Bunu yapmak için yazarın "short_name" değişkeni ile gönderinin "author" değişkeni değeri aynı olan gönderileri filtreleyip alacağız. 

"_layouts/author.html" yerleşiminde yazarın gönderilerini listeleyelim.

Yazarın sayfasına link

Yazarın sayfasından gönderilerine link ekledik. Şimdi de gönderi sayfalarından yazarın sayfasına link ekleyelim.

"_layouts/post.html" yerleşim dosyasını açalım ve içine şunları yazalım.

Artık siteyi derleyip _site klasörü altında oluşan dosyaları bir web server'a kopyalayıp sitemizi aktif edebiliriz. 

Bu sefer de bu kadar. Uzun bir yazı oldu ama şu "EVDE KAL" günlerinde boş durmayalım bir küçük adım daha atalım dedim. 

Kalın sağlıcakla..