Jekyll ile Statik Web Sayfaları
Jekyll Ruby dilinde geliştirilmiş oldukça popüler ve kullanımı kolay statik web sayfaları oluşturmaya yarayan bir araçtır. Bu yazıda Jekyll ile ilk geliştirmeye nasıl başlanır, nasıl kullanılır gibi temel konulardan bahsedilecektir.
Geliştirme için Gereksinimler (Ubuntu 20.04+)
- Ruby-2.5.0+
- RubyGems
- GCC ve Make
- Detaylı
Kurulum
1
sudo apt-get install ruby-full build-essential zlib1g-dev
Kullanıcı hesabınız için bir gem kurulum dizini oluşturun
1
2
3
4
echo '# Install Ruby Gems to ~/gems' >> ~/.bashrc
echo 'export GEM_HOME="$HOME/gems"' >> ~/.bashrc
echo 'export PATH="$HOME/gems/bin:$PATH"' >> ~/.bashrc
source ~/.bashrc
Jekyll ve Bundler’ı yükleyin
1
2
gem install jekyll bundler
bundle install
Klasör içinde çalıştırın
1
2
3
4
5
6
7
8
9
bundle exec jekyll serve
# sadece build etmek için
bundle exec jekyll build
# özel bir confige göre build etmek için
bundle exec jekyll build --config <config_file>
Temel Yapılandırma
Bir dizin içerisinde aşağıdaki komutu çalıştırın.
1
jekyll new myblog
- jekyll, myblog dizini altında bir blog/statik içerik sitesi altyapısı oluşturur.
- Varsayılan olarak
_postsdizini içinde 1 tane örnek markdown uzaktılı dosya olacaktır. - Aynı klasöre bir kopyasını alıp bir editörde açıp en tepedeki title ve date satırlarını kafanıza göre formatı bozmadan değiştirin.
1
2
3
4
5
6
7
# dosya adı örn: 2022-03-22-welcome-to-jekyll.markdown
---
layout: post
title: "Vans ap on e taym in Angara"
date: 2022-01-22 21:17:59 +0300
categories: jekyll update
---
- Dizindeki
_config.ymldosyasında jekyll’in kullandığı birçok parametre var. Bunları sitenizin ihtiyacına uygun güncelleyin. - Sistemi ayağa kaldırın.
1
bundle exec jekyll serve
-
Bu komut md dosyalarınızı html’e çevirip statik html formatında hizmet verebilir hale getirecektir.
-
jekyll ile uğraşmamak için
_siteklasörünü alıp bir nginx altında sunabilirsiniz. -
github.io tarzında bir sistem de aynı işi görür.
liquid: template dili
Jekyll’in kullandığı template dilidir.
Objects
1
2
3
4
5
# {{ ve }} arasına yazılarak kullanılır.
# sayfanın tepedeki title: karşısında yazan kısmını gösterir.
{{ page.title }}
Tags
Mantıksal ve kontrol cümleleri için kullanılır. Bir programlama dili gibi çalışır.
1
2
3
4
5
6
7
8
# {% %} arasına yazılır. Eğer page.show_sidebar doğru ise sidebar içeriğini gösterir.
{% if page.show_sidebar %}
<div class="sidebar">
sidebar content
</div>
{% endif %}
Filters
pipe: önündeki nesnenin çıktısını değiştirir.
1
2
3
4
5
6
7
{{ "hi" | capitalize }}
Hi
{{ "Hello World!" | downcase }}
hello world!
Luquid Kullanımı
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
---
# Sayfaların başına konulacak 3 çizgili bu kısım bu sayfanın jekyll tarafından render edilmesi gerektiğini söyler.
---
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home</title>
</head>
<body>
<h1>{{ "Hello World!" | downcase }}</h1>
</body>
</html>
Front Matter
- Her md dosyasının başındaki 2
---arasına yazılmış bilgilerdir. - Bu tanım yoksa jekyll liquid template için sayfayı işlemez.
1
2
3
4
5
---
my_number: 5
---
- Yukarıdaki bilgi, aynı sayfa içinden aşağıdaki gibi çağrılabilir.
1
2
3
{{ page.my_number }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
title: Home
---
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
</head>
<body>
<h1>{{ "Hello World!" | downcase }}</h1>
</body>
</html>
Layouts
- İçeriğin görsel yapısının oluşturulduğu alandır.
- Markdown ve html desteklenir.
- Tek tek sayfalardaki içerik dışındaki yapısal içeriklerin tekrar edilmesini engeller.
_layouts adında bir klasör oluşturalım. İçinde default.html adında bir dosya oluşturalım.
1
2
_layouts
default.html
İçeriği:
1
2
3
4
5
6
7
8
9
10
11
12
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
</head>
<body>
{{ content }}
</body>
</html>
Bundan sonraki alt sayfalardaki her content bunu kullanacaktır.
index.html
1
2
3
{{ "Hello World!" | downcase }}
about.md
1
2
3
4
5
6
7
8
9
10
---
layout: default
title: Hakkında
---
# Hakkında sayfası
Bu sayfa size biraz benden bahsediyor.
Includes
Bu özellik navigasyon ve ortak özellikleri başka sayfalara eklemeye ve oradan ortak kullanmaya yarar.
Kök dizine _layouts yanına _includes adında bir klasör daha oluşturuyoruz. _layouts/default.html dosyasını aşağıdaki gibi değiştiriyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
</head>
<body>
{% include navigation.html %}
{{ content }}
</body>
</html>
Geçerli sayfa vurgulama
Eğer navigasyondaki sayfa aktif sayfa ise rengini değiştir.
1
2
3
4
5
6
7
8
9
10
<nav>
<a href="/" {% if page.url == "/" %}style="color: red;"{% endif %}>
Home
</a>
<a href="/about.html" {% if page.url == "/about.html" %}style="color: red;"{% endif %}>
About
</a>
</nav>
Veri dosyası kullanımı
Jekyll YAML, JSON, and CSV formatlarında dosyalardan veri almayı ve onu template içinde kullanmayı destekler. Bu dosyayı _data dizini oluşturup içine koyuyoruz.
1
2
3
4
5
6
7
8
# _data/navigation.yml
- name: Home
link: /
- name: About
link: /about.html
Jekyll buna site.data.navigation değişkeniyle erişilebilir.
1
2
3
4
5
6
7
8
9
<nav>
{% for item in site.data.navigation %}
<a href="{{ item.link }}" {% if page.url == item.link %}style="color: red;"{% endif %}>
{{ item.name }}
</a>
{% endfor %}
</nav>
Statik İçerik
Jekyll’in css, js ve imaj içeriklerini otomatik kullanabilmesi için aşağıdaki gibi yapılır.
1
2
3
4
5
6
7
.
├── assets
│ ├── css
│ ├── images
│ └── js
...
SASS
Navigasyonda kullandığımız style tanımını çıkarıyoruz ve style dosyasına koyuyoruz. Kök dizinine _sass adında bir dizin ekleyin.
1
2
3
4
5
6
7
<nav>
{% for item in site.data.navigation %}
<a href="{{ item.link }}" {% if page.url == item.link %} class="current"{% endif %}>{{ item.name }}</a>
{% endfor %}
</nav>
assets/css/styles.scss dosyası
1
2
3
---
---
@import "main";
_sass/main.scss
1
2
3
.current {
color: green;
}
_layouts/default.html içine stil dosyasını ekliyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ page.title }}</title>
<link rel="stylesheet" href="/assets/css/styles.css">
</head>
<body>
{% include navigation.html %}
{{ content }}
</body>
</html>
Burada referans edilen styles.css dosyası assets/css/styles.scss dosyasıdır.
Blog sistemi oluşturmak
_posts diye bir dizin oluşturalım.
_posts/2022-04-28-muzlar.md adında bir dosya oluşturalım içine aşağıdakini koyuyoruz.
1
2
3
4
5
6
7
8
9
10
---
layout: post
author: mehmet
---
Muz, Musa cinsinde çeşitli büyük otsu çiçekli bitkilerde yetişen yenilebilir bir meyvedir.
Bazı ülkelerde, yemek pişirmek için kullanılan muzlara "plantain" denebilir ve onları tatlı muzlardan ayırabiliriz. Meyve boyutu, renk ve sıkılık açısından değişkendir, ancak genellikle uzatılmış ve kavislidir, olgunlaştığında yeşil, sarı, kırmızı, mor veya kahverengi olabilen bir kabukla kaplı nişasta açısından zengin yumuşak eti bir meyvedir.
_layouts/post.html altında bu blogların nasıl görüneceğini gösteren dosya oluşturuyoruz.
page. ile başlayanların frontmatters kısmında tanımlanmışlar olduğunua dikkat edelim.
1
2
3
4
5
6
7
8
9
---
layout: default
---
<h1>{{ page.title }}</h1>
<p>{{ page.date | date_to_string }} - {{ page.author }}</p>
{{ content }}
Blog Yazılarını Listelemek
kök dizinde /blog.html adında bir dosya oluşturuyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
---
layout: default
title: Blog
---
<h1>Latest Posts</h1>
<ul>
{% for post in site.posts %}
<li>
<h2><a href="{{ post.url }}">{{ post.title }}</a></h2>
{{ post.excerpt }}
</li>
{% endfor %}
</ul>
post.url, post.title, post.excerpt otomatik olarak jekyll tarafından üretilir.
_data/navigation.yml dosyasına giderek yeni bir link oluşturuyoruz.
Bir miktar daha blog yazısı ekleyelim.
_posts/2018-08-21-apples.md
1
2
3
4
5
6
7
8
9
10
11
12
13
---
layout: post
author: jill
---
An apple is a sweet, edible fruit produced by an apple tree.
Apple trees are cultivated worldwide, and are the most widely grown species in
the genus Malus. The tree originated in Central Asia, where its wild ancestor,
Malus sieversii, is still found today. Apples have been grown for thousands of
years in Asia and Europe, and were brought to North America by European
colonists.
_posts/2018-08-22-kiwifruit.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
---
layout: post
author: ted
---
Kiwifruit (often abbreviated as kiwi), or Chinese gooseberry is the edible
berry of several species of woody vines in the genus Actinidia.
The most common cultivar group of kiwifruit is oval, about the size of a large
hen's egg (5–8 cm (2.0–3.1 in) in length and 4.5–5.5 cm (1.8–2.2 in) in
diameter). It has a fibrous, dull greenish-brown skin and bright green or
golden flesh with rows of tiny, black, edible seeds. The fruit has a soft
texture, with a sweet and unique flavor.
Navigasyondan /blog.html sayfasına gittiğimizde listeyi göreceğiz ve tıklayınca her bir blog görünecek.
Koleksiyonlar
Statik içerik veri kümesi diyebiliriz. Bir vt tablosuna üretmek gibi. Listelenebilir, meta alanları kullanılabilir, farklı türlerle ilişki üretilebilir.
Dosya sistemiyle etkileşen sintaks aşağıdaki şekildedir ve kök dizininde oluşturulur.
1
2
_*collection_name*
_authors
config içerisinde aşağıda şekilde adreslenir.
1
2
3
# _config.yaml
collections:
authors:
Aşağıdaki 2 dosyayı oluşturuyoruz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# _authors/jill.md
---
short_name: jill
name: Jill Smith
position: Chief Editor
---
Jill is an avid fruit grower based in the south of France.
# _authors/ted.md
---
short_name: ted
name: Ted Doe
position: Writer
---
Ted has been eating fruit since he was baby.
Bu dosyalar ve içerikleri parametrik olarak site.authors şeklinde erişilebilir olacak.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# staff.html
---
layout: default
title: Staff
---
<h1>Staff</h1>
<ul>
{% for author in site.authors %}
<li>
<h2>{{ author.name }}</h2>
<h3>{{ author.position }}</h3>
<p>{{ author.content | markdownify }}</p>
</li>
{% endfor %}
</ul>
Yeni sayfayı menu data dosyasına ekleyebiliriz.
1
2
3
4
5
6
7
8
- name: Home
link: /
- name: About
link: /about.html
- name: Blog
link: /blog.html
- name: Staff
link: /staff.html
Çıktı üretmek
Koleksiyonlar normalde bir web sayfası üretmezler, eğer ürettirmek istiyorsak aşağıdaki gibi `output: true` yapmak gerekir.
permalinkler vererek ortak bir url atında yayınlamaya da izin verir.
1
2
3
4
5
6
7
# _config.yml
collections:
authors:
output: true
permalink: /author/:name
sort_by: bir_front_matter_key
author.url otomatik linkiyle çağırabiliriz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# staff.html i değiştiriyoruz.
---
layout: default
title: Staff
---
<h1>Staff</h1>
<ul>
{% for author in site.authors %}
<li>
<h2><a href="{{ author.url }}">{{ author.name }}</a></h2>
<h3>{{ author.position }}</h3>
<p>{{ author.content | markdownify }}</p>
</li>
{% endfor %}
</ul>
Tekil author için sayfa oluşturuyoruz.
1
2
3
4
5
6
7
8
9
10
11
# _layouts/author.html
---
layout: default
---
<h1>{{ page.name }}</h1>
<h2>{{ page.position }}</h2>
{{ content }}
Şimdi ya tüm author içeriklerimizin front matter bölümüne layout gireceğiz ya da _config.yml içerisinde layouts varsayılanları oluşturarak ilerleyeceğiz.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
collections:
authors:
output: true
defaults:
- scope:
path: ""
type: "authors"
values:
layout: "author"
- scope:
path: ""
type: "posts"
values:
layout: "post"
- scope:
path: ""
values:
layout: "default"
Tüm koleksiyonlarımızı aynı klasörün içine koyarak ortak bir tanım yapabiliriz.
1
2
3
4
5
6
7
8
9
10
11
# _config.yml içinde
collections_dir: my_collections
# books için
my_collections/_books
# recipes için
my_collections/_recipes
Diğer Kaynaklar
Topluluk
https://jekyllrb.com/docs/contributing/
https://jekyllrb.com/docs/maintaining/
https://jekyllrb.com/jekyllconf/
Hazır Temelar
https://jamstackthemes.dev/ssg/jekyll/
https://cloudcannon.com/blog/free-jekyll-themes-for-2022/
GitHub.com #jekyll-theme repos
Kaynaklar
https://www.digitalocean.com/community/tutorials/jekyll-collections