Web Tasarım

Jekyll nedir ? Yükleme ve Kurulum aşamaları nasıl yapılır ?

By on 13 Eylül 2017

Merhaba , bu yazımda size meşhur statik site oluşturucu yazılım “jekyll” ‘den bahsedeceğim. Öncelikle statik siteyi biraz daha açalım. Statik site , kullanıcıların site ile etkileşimine gerek olmayan ,  site içeriğinin çok sık değiştirilmesine ihtiyaç duyulmayan ve genellikle bilgilendirme , tanıtım , blog tarzı sitelerdir. Dinamik sitelere göre maliyeti daha az ve bakımı daha kolaydır. Ruby tabanlı Jekyll gibi bir yazılım sayesindede statik siteleri inşaa etmek yalnızca dakikalarınızı alıyor. Üstelik oluşturduğunuz siteyi Github Pages sayesinde hiçbir ücret ödemeden yayınlayabilirsiniz. Jekyll çoğunlukla statik blog sayfaları oluşturmak için kullanılmaktadır.

Şimdi kurulum aşamalarına geçelim. Kurulumu Ubuntu 16.04 üzerinde gerçekleştireceğiz. Eğer başka bir Linux dağıtımı kullanıyorsanız kendi paket yöneticinize göre kodları düzenleyebilir , Windows 10 kullanıcısı iseniz öncelikle Bash on Ubuntu on Windows eklentisini aktif edip cmd’ye ubuntu kodlarını yazabilirsiniz.

1 . Jekyll Yükleme

Paketlerimizin en yeni sürüme sahip olduğundan emin olalım.
sudo apt-get update

Ardından Ruby’yi ve onun geliştirme kitaplıklarını, ayrıca make ve gcc’yi kuracağız, böylece Jekyll’ı kurduğumuzda Jekyll’ın kütüphaneleri derlenmiş olacak.
sudo apt-get install ruby ruby-dev make gcc

İşlem tamamlandığında, Gem bağımlılıklarını yönetmek , Jekyll’in ve Bundler’ın yüklenmesi için Ruby’nin gem paket yöneticisini kullanacağız.
gem install jekyll bundler

2 . Site Kurulumu

Jekyll yüklemesini tamamladığımıza göre sitemizin kurulumuna başlayabiliriz. Önce cd Desktop ve mkdir site diyerek masaüstünde site adlı yeni bir klasör oluşturalım.
Şimdi jekyll new . komutu ile bulunduğumuz klasörün içerisine sitemizi kuralım.

Jekyll new komutu ile aşağıdaki dizinleri ve dosyaları oluşturmuş olduk.

.
├── 404.html
├── about.md
├── _config.yml
├── Gemfile
├── Gemfile.lock
├── index.md
├── _posts
│ └── 2017-09-04-welcome-to-jekyll.markdown
└── _site

Bunlar gerçek web sitesi dosyaları değil. Jekyll’ın statik siteyi oluşturmak için kullanacağı kaynak dosyalardır. Sitemize yeni içerikler ve eklentiler eklerken mevcut yapıyı kullanmak ve Jekyll’ın adlandırma kurallarını izlemek önemlidir. Aksi takdirde beklenmedik hatalarla karşılaşmanız mümkündür. Şimdi

3 . Jekyll’in Web Server’ını başlatma

Jekyll’in yerleşik hafif web sunucusu, dizinde bulunan dosyaları izleyerek ve bir değişiklik yapıldığında statik siteyi otomatik olarak yeniden yaratarak site geliştirmeyi oldukça kolaylaştırmaktadır. Sitemizin bulunduğu dizinin içerisindeyken jekyll serve komutu ile server’ı başlatabilir ve sitenize http://localhost:4000 adresinden erişebilirsiniz. Bu harika server sayesinde dosyalarda yaptığınız bir değişiklik anında terminalden size bildirilir ve site yeniden derlenir.

Peki ya sitemizi Dünya’ya açmak istiyorsak ?

Yazımdada belirttiğim gibi jekyll ile oluşturduğumuz siteyi Github Pages üzerinde yayınlarsanız kurulum , bakım , güncelleme gibi konularda çok büyük avantaj sağlarsınız. Çünkü Github Pages html içeriklerinin yanı sıra jekyll yazılımınıda desteklemekte , bu yüzden jekyll için biçilmiş bir kaftan.

Github hesabınızda yeni bir repository oluşturun. Ve masaüstünde oluşturduğunuz klasörün içindekileri olduğu gibi bu repository’ye kopyalayın. Ardından repository’nin settings sekmesinden github pages kısmına gelin ve sizin için hazırlanan linke tıklayın. Siteniz artık yayında. Eğer bir domain’e sahipseniz sitenizi bu domain üzerindende yayınlayabilirsiniz. Bu adresten bu işlemi nasıl gerçekleştirebileceğinizi öğrenebilirsiniz.

Tema değiştirme ?

Bunun için çeşitli yöntemler mevcut. Ben temanın bulunduğu depoyu forklayarak yapılan yöntemi tercih ediyorum. Google’da yapacağınız jekyll teması aramasıyla temanın github deposuna ulaşabilir , ardından bu depoyu forklayabilirsiniz. Forkladığınız bu depoyu github pages’de yayınlayabilirsiniz. Çoğu jekyll teması deposunda birçok blog yazısı örneğide mevcut bulunmakta. Bu örneklere dayanarak jekyll’i kolaylıkla kullanmaya başlayabilirsiniz.

TAG
RELATED POSTS

LEAVE A COMMENT