Wordpress Geliştiricileri için Jekyll

Yayınlanan: 2022-03-10
Kısa özet ↬ Jekyll, WordPress'e hafif bir alternatif olarak popülerlik kazanıyor. Geliştiricilerin kişisel bloglarını oluşturmak için kullandıkları bir araç olarak genellikle güvercin deliğine girer. Bu sadece buzdağının görünen kısmı - çok daha fazlasını yapabilir! Bu yazıda, kurgusal bir hukuk firması için bir web sitesi oluşturan bir web geliştiricisinin rolünü üstleneceğiz. WordPress, bunun gibi bir web sitesi için bariz bir seçimdir, ancak dikkate almamız gereken tek araç bu mu? Jekyll kullanarak bir web sitesi oluşturmanın tamamen farklı bir yoluna bakalım.

Bu yazıda, kurgusal bir hukuk firması için bir web sitesi oluşturan bir web geliştiricisinin rolünü üstleneceğiz. WordPress, bunun gibi bir web sitesi için bariz bir seçimdir, ancak dikkate almamız gereken tek araç bu mu? Jekyll kullanarak bir web sitesi oluşturmanın tamamen farklı bir yoluna bakalım.

Wordpress Geliştiricileri için Jekyll

SmashingMag'de Daha Fazla Okuma :

  • Jekyll ve GitHub Sayfalarıyla Bir Blog Oluşturun
  • Jekyll ile İçerik Modelleme
  • İncelenen Statik Site Üreticileri: Jekyll, Middleman, Roots, Hugo
  • Statik Site Jeneratörleri Neden Sonraki Büyük Şeydir?
Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Jekyll Nedir?

Jekyll, statik bir web sitesi üreticisidir. Sunucumuza yüklenen yazılım ve veritabanı yerine, bir Jekyll web sitesi sadece bilgisayarımızdaki bir dosya dizinidir. Jekyll'i bu dizinde çalıştırdığımızda, bir barındırma sağlayıcısına yüklediğimiz statik bir web sitesi oluşturur.

Neden Jekyll?

Jekyll'in bir proje için doğru olup olmadığına karar verirken bir dizi ödünleşimi göz önünde bulundurmamız gerekiyor.

Jekyll'in Avantajları

  • Daha az karmaşıklık
    Bir Jekyll web sitesi, esasen şablonlama diline sahip statik bir web sitesidir. Oluşturulması ve sürdürülmesi gereken daha az bileşene sahiptir. Sunucuda, yalnızca dosya sunabilen bir web sunucusuna ihtiyacımız var.
  • Hız
    Ziyaretçiler Jekyll sitelerindeki sayfaları görüntülediğinde, sunucu herhangi bir ekstra işlem yapmadan mevcut dosyaları döndürür. Bu, istek anında dinamik olarak sayfalar oluşturan WordPress'ten çok daha hızlıdır. Not: WordPress Önbelleğe Alma eklentileri bu performans açığını ortadan kaldırabilir.
  • istikrar
    WordPress, ziyaretçiler için sayfalar oluşturmak için birlikte çalışan daha fazla bileşene sahiptir. Bir bileşen arızalanırsa, ziyaretçiler web sitesini görüntüleyemeyebilir. Bir web sunucusu yalnızca dosya sunarken çok daha azı yanlış gidebilir.
  • Güvenlik
    Wordpress, CSRF, XSS veya SQL enjeksiyon saldırıları gibi güvenlik risklerini azaltmak için çok şey yapar, ancak her zaman en son güncellemelere sahip olmanıza güvenir. Statik siteler bu sorunu ortadan kaldırır çünkü bir bilgisayar korsanının yararlanabileceği dinamik bir veri deposu yoktur.
  • Kaynak kontrollü
    Jekyll web sitesi bir dosya dizinidir, bu nedenle web sitesinin tamamını bir Git deposunda saklayabiliriz. Bir havuzla çalışmak bize birçok fayda sağlar (ancak VersionPress geliştirme aşamasındadır ve WordPress için bu iş akışını etkinleştirir).

Jekyll'in Dezavantajları

  • GUI yok
    Bir müşteri WordPress.com'a kaydolabilir, bir tema seçebilir ve kendi başına temel bir web sitesi kurabilir. Jekyll, teknik bilgisi olmayan çoğu kullanıcının kafasını karıştıran bir komut satırı aracıdır. Jekyll için CloudCannon (sorumluluk reddi: Ben kurucu ortağım), Forestry, Jekyll Admin, Netlify CMS, Prose ve Siteleaf dahil olmak üzere üçüncü taraf GUI'leri vardır. Ancak bunların müşteriye teslim edilmeden önce geliştirici tarafından ayarlanması gerekir.
  • Yapım Zamanı
    Bizim durumumuzda bu bir sorun değil çünkü web sitesi bir saniyeden kısa sürede kurulacak. Ancak 10.000 ila 100.000 gönderi içeren daha büyük bir web sitesinin oluşturulması dakikalar alabilir. Bu, geliştirirken can sıkıcıdır çünkü tarayıcıda önizlemeden önce web sitesinin oluşturulmasını beklememiz gerekir.
  • Temalar
    Jekyll'in bazı temaları var, ancak WordPress için mevcut olan binlerce temayla karşılaştırıldığında bu hiçbir şey.
  • genişletilebilirlik
    WordPress web sitemize özel işlevler eklememiz gerekirse, kendi PHP'mizi yazabiliriz. Jekyll için özel Ruby eklentileri oluşturabiliriz, ancak bunlar istek zamanından ziyade derleme zamanında çalışır.
  • Destek
    WordPress, yardımcı olacak çok sayıda uzman topluluğuna ve diğer kaynaklara sahiptir. Jekyll'in benzer kaynakları var ama daha küçük ölçekte.

Jekyll, bu proje gibi büyük ölçüde bilgilendirici web siteleri için harika bir araçtır. Proje daha çok bir uygulamaysa, JavaScript kullanarak dinamik öğeler ekleyebiliriz, ancak bir noktada muhtemelen WordPress' gibi bir arka uca ihtiyacımız olacak.

uygulama

WordPress ve Jekyll, bir web sitesi oluşturmak için farklı yaklaşımlar benimsemekle birlikte birçok işlevi paylaşır. Jekyll web sitemizi oluşturmaya başlayalım.

yükleme

WordPress için tipik bir geliştirme ortamı, Apache veya NGINX, PHP ve MySQL kurulumunu gerektirir. Ardından, WordPress'i kurar ve web sunucusunu yapılandırırdık.

Jekyll için Ruby'nin kurulu olduğundan emin olmamız gerekir (bazen bu göründüğünden daha zordur). Ardından Jekyll gem'i kurarız:

 gem install jekyll

macOS kullanıyorsanız, önce Xcode geliştiricisinin kurulu olduğundan emin olun.

 xcode-select --install

Koşma

Bir WordPress sitesi çalıştırmak genellikle veritabanını ve web sunucusunu başlatmaktan oluşur.

Jekyll'de, terminaldeki site dosyalarımıza (bu noktada boş bir dizin) gidiyoruz ve şunu çalıştırıyoruz:

 jekyll serve

Bu, 4000 numaralı bağlantı noktasında yerel bir web sunucusunu başlatır ve bir dosya değiştiğinde siteyi yeniden oluşturur.

Sayfalar

İlk sayfamızı oluşturmanın zamanı geldi. Ana sayfadan başlayalım. Sayfalar, ilişkili bir tarihi olmayan bağımsız içerik içindir. WordPress, sayfa içeriğini veritabanında saklar.

Jekyll'de sayfalar HTML dosyalarıdır. Saf HTML ile başlayacağız ve daha sonra gerektiğinde Jekyll özelliklerini ekleyeceğiz. Şu anki durumunda index.html :

 <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> </div> </section> <footer> <p class="copyright"> &copy; 2016 </p> </footer> </body> </html>

Sıvı

WordPress'te hemen hemen her şeyi yapmak için PHP yazabiliriz. Jekyll farklı bir yaklaşım benimsiyor. Tam bir programlama dili sağlamak yerine Liquid adlı bir şablonlama dili kullanır. (WordPress'in Timber gibi şablonlama dilleri de vardır.)

index.html altbilgisi, bir yıl içeren bir telif hakkı bildirimi içerir:

 <p class="copyright"> &copy; 2016 </p>

Bunu her yıl güncellemeyi hatırlamamız pek mümkün değil, bu yüzden mevcut yılın çıktısını almak için Liquid'i kullanalım:

 <p class="copyright"> &copy; {{ site.time | date: "%Y" }} </p>

Jekyll'de statik bir web sitesi inşa ediyoruz, bu nedenle web sitesini yeniden oluşturana kadar bu tarih değişmeyecek. Web sitesini yeniden oluşturmak zorunda kalmadan tarihin değişmesini istiyorsak JavaScript kullanabiliriz.

İçerir

index.html HTML'nin büyük kısmı, genel düzeni ayarlamak içindir ve sayfalar arasında değişmez. Bu tekrar çok fazla bakıma yol açacaktır, o yüzden azaltalım.

PHP'de öğrendiğim ilk şeylerden biriydi. Dahil etmeyi kullanarak, üstbilgi ve altbilgi içeriğini farklı dosyalara yerleştirebilir, ardından aynı içeriği birden çok sayfaya ekleyebiliriz.

Jekyll tamamen aynı özelliğe sahiptir. Dahil edilenler, _includes adlı bir klasörde saklanır. Bunları index.html dahil etmek için Liquid kullanıyoruz:

 {% include header.html %} <p>Justice Law is professional representation. Practicing for over 50 years, our team have the knowledge and skills to get you results.</p> <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote> {% include footer.html %}

Düzenler

İçerir, tekrarların bir kısmını azaltır, ancak yine de her sayfada bunlara sahibiz. WordPress, bir web sitesinin yapısını içeriğinden ayıran şablon dosyalarıyla bu sorunu çözer.

Şablon dosyalarına Jekyll eşdeğeri düzenlerdir. Düzenler, içerik için yer tutucu içeren HTML dosyalarıdır. _layouts dizininde saklanırlar. Temel bir HTML düzenini içerecek şekilde _layouts/default.html oluşturacağız:

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="/css/main.css"> </head> <body> <div class="container"> <h1><a href="/">Justice</a></h1> <nav> <ul> <li><a href="/about/">About</a></li> <li><a href="/services/">Services</a></li> <li><a href="/contact/">Contact</a></li> <li><a href="/advice/">Advice</a></li> </ul> </nav> </div> <section class="main"> <div class="container"> {{ content }} </div> </section> <footer> <p class="copyright"> &copy; {{ site.time | date: "%Y-%m-%d" }} </p> </footer> </body> </html>

Ardından, düzeni belirterek index.html değiştirin. Düzeni, bir dosyanın üst kısmındaki iki üç noktalı çizgi arasında bulunan bir YAML parçacığı olan ön maddeyi kullanarak belirtiriz (bununla ilgili daha fazla bilgi yakında).

 --- layout: default --- <blockquote class="testimonial"> <p class="testimonial-message">Justice Law are the best of the best. Being local, they care about people and have strong ties to the community.</p> <p class="testimonial-author"> <img src="/images/peter.jpeg" alt="Photo of Peter Rottenburg"> Peter Rottenburg </p> </blockquote>

Artık tüm sayfalarımızda aynı düzene sahip olabiliriz.

Ön Konu

WordPress'te özel alanlar, bir gönderiye meta verileri ayarlamamıza izin verir. Bunları SEO etiketlerini ayarlamak veya belirli bir gönderi için bir sayfanın bölümlerini göstermek ve gizlemek için kullanabiliriz.

Bu kavram Jekyll'de ön madde olarak adlandırılır. Daha önce, index.html düzenini ayarlamak için ön maddeyi kullandık. Artık kendi değişkenlerimizi ayarlayabilir ve Liquid kullanarak bunlara erişebiliriz. Bu, web sitemizdeki tekrarı daha da azaltır.

index.html birden çok referans ekleyelim. HTML'yi kopyalayıp yapıştırabiliriz, ancak bu bir kez daha bakımın artmasına neden olur. Bunun yerine, ön maddeye referansları ekleyelim ve Liquid ile üzerlerinde yineleyelim:

 --- layout: default testimonials: - message: We use Justice Law in all our endeavours. They offer an unparalleled service when it comes to running a business. image: "/images/joice.jpeg" name: Joice Carmold - message: Justice Law are the best of the best. Being local, they care about people and have strong ties to the community. image: "/images/peter.jpeg" name: Peter Rottenburg - message: Justice Law were everything we could have hoped for when buying our first home. Highly recommended to all. image: "/images/gibblesto.jpeg" name: D. and G. Gibbleston --- <div class="testimonials"> {% for testimonial in page.testimonials %} <blockquote class="testimonial"> <p class="testimonial-message">{{ testimonial.message }}</p> <p class="testimonial-author"> <img src="{{ testimonial.image }}" alt="Photo of {{ testimonial.name }}"> {{ testimonial.name }} </p> </blockquote> {% endfor %} </div>

Gönderiler

WordPress, veritabanındaki gönderiler için HTML içeriğini, tarihi ve diğer meta verilerini depolar.

Jekyll'de her gönderi, bir _posts dizininde depolanan statik bir dosyadır. Dosya adında gönderi için yayın tarihi ve başlığı bulunur - örneğin, _posts/2016-11-11-real-estate-flipping.md . Bir blog gönderisinin kaynak kodu şu yapıyı alır:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

Kategorileri ve etiketleri ayarlamak için ön konuyu da kullanabiliriz.

Ön maddenin altında, gönderinin Markdown ile yazılmış gövdesi bulunur. Markdown, HTML'ye daha basit bir alternatiftir.

Jekyll, diğer düzenlerden miras kalan düzenler oluşturmamıza olanak tanır. Bu gönderinin bir post düzenine sahip olduğunu fark etmiş olabilirsiniz. post düzeni, varsayılan düzenden devralır ve bir tarih ve başlık ekler:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Gönderileri yinelemek ve onlara bağlantı vermek için blog.html oluşturalım:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Koleksiyonlar

WordPress'te özel gönderi türleri, içerik gruplarını yönetmek için kullanışlıdır. Örneğin, referanslar, ürünler veya emlak listeleri için özel gönderi türleri kullanabilirsiniz.

Jekyll'in bu özelliği var ve buna koleksiyonlar diyor.

about.html sayfası, personelin profillerini gösterir. Ön konuda personel için meta verileri (isim, resim, telefon numarası, biyografi) tanımlayabilirdik, ancak daha sonra sadece o sayfada referans verebilirdik. Gelecekte, blog gönderilerinde yazarlar hakkında bilgi görüntülemek için aynı verileri kullanmak istiyoruz. Bir koleksiyon, web sitesinde herhangi bir yerde personel üyelerine başvurmamızı sağlar.

Web sitemizin yapılandırması _config.yml içinde bulunur. Burada yeni bir koleksiyon belirledik:

 collections: staff_members: output: false

Şimdi personelimizi ekliyoruz. Her personel, koleksiyon adıyla bir klasörde saklanan bir Markdown dosyasında temsil edilir; örneğin, _staff_members/jane-doe.md .

Ön maddeye meta verileri ve gövdeye tanıtım yazısı ekliyoruz:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Gönderilere benzer şekilde, her bir personeli görüntülemek için about.html koleksiyonu yineleyebiliriz:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Arama

WordPress, güçlü yerleşik arama ve hatta daha güçlü arama eklentilerine sahiptir.

Jekyll'de yerleşik arama yoktur, ancak çözümler vardır:

  • Lunr.js gibi bir JavaScript kitaplığı kullanarak istemci tarafında arama (Jekyll.tips, bunun nasıl kurulacağına dair bir öğreticiye sahiptir);
  • yüksek performanslı arama için Algolia gibi üçüncü taraf çözümleri;
  • Google Özel Arama gibi açılır çözümler.

Eklentiler

Eklentiler, WordPress'in çekici bir parçasıdır. WordPress'in neredeyse her şeyi yapmasını sağlamak için işlevsellik yüklemek kolaydır.

Jekyll web sitemizde birçok popüler WordPress eklentisi gerekli değildir:

  • iThemes Güvenliği
    Jekyll web sitemiz, üzerinde çalıştığı web sunucusu kadar güvenlidir.
  • Yedek Muhafız
    Jekyll web sitemiz, tüm değişiklik geçmişine erişmemizi sağlayan bir depoda yaşayacak.
  • WP Süper Önbellek
    Jekyll web sitemiz zaten statiktir.

Diğer WordPress eklentileri, web sitesine bırakabileceğimiz üçüncü taraf eşdeğerlerine sahiptir:

  • İletişim Formu 7 gibi iletişim formu eklentileri, Formspree, FormKeep veya Wufoo ile değiştirilebilir.
  • Basit bir mağaza için WP eCommerce, Snipcart, Gumroad veya Stripe ile değiştirilebilir.
  • Akismet ile WordPress yorumları yerine Disqus, Facebook Comments veya IntenseDebate kullanabilirsiniz.

Bazı WordPress eklentileri, çekirdek Jekyll ile taklit edilebilir. İşte ön madde ve Liquid kullanan bir fotoğraf galerisi:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Tamamlamak için sadece kendi JavaScript ve CSS'mizi eklememiz gerekiyor.

Jekyll eklentileri, diğer WordPress eklentilerinin işlevselliğini taklit edebilir. Jekyll eklentilerinin yalnızca web sitesi oluşturulurken çalıştığını unutmayın - gerçek zamanlı işlevsellik eklemezler:

  • Tek Tıkla XML Site Haritası yerine Jekyll Site Haritası Oluşturucu Eklentisini kullanın.
  • Jekyll SEO Etiketi, size SEO Sihirbazı'nın bazı işlevselliklerini verir.
  • Çok dilli bir web sitesi için WPGlobus yerine Jekyll Dil Eklentisini kullanın.

Sürüm Kontrolü

Jekyll gibi bir statik site oluşturucu kullanmanın en büyük faydalarından biri, tüm site ve içeriğin Git'te yaşayabilmesidir. Temel düzeyde Git, sitedeki tüm değişikliklerin geçmişini verir. Ekipler için her türlü iş akışını ve onay sürecini açar.

GitHub, Git'i öğrenmeye yeni başlayanlar için harika bir etkileşimli öğreticiye sahiptir.

İstemci Elden Çıkarma

Bu, web sitesini oluşturmanın somunlarını ve cıvatalarını kapsar. Tüm bir Jekyll web sitesinin nasıl bir araya geldiğini merak ediyorsanız, Adalet şablonuna bir göz atın. Jekyll için MIT lisanslı ücretsiz bir şablondur. Yukarıdaki snippet'ler bu şablona dayanmaktadır.

WordPress CMS, platformda yerleşiktir, bu nedenle müşteri için bir hesap oluşturmamız gerekir.

Jekyll web sitemizle Git depomuzu daha önce bahsedilen Jekyll GUI'lerinden birine bağlardık. Bu iş akışıyla ilgili güzel şeylerden biri, istemci değişikliklerinin depoya geri gönderilmesidir. Geliştiriciler olarak, geliştirici olmayanlar web sitesini güncellese bile yerel iş akışlarını kullanmaya devam edebiliriz.

Bazı Jekyll GUI'leri barındırma sunarken, diğerlerinin bir Amazon S3 kovasına veya GitHub Sayfalarına çıktı almanın bir yolu vardır.

Özet

Bu noktada, Jekyll web sitemiz yayında ve müşteri tarafından düzenlenebilir. Web sitesinde herhangi bir değişiklik yapmamız gerekirse, depoya basıyoruz ve otomatik olarak canlı olarak dağıtılacak.

<div class=“testimonials”> {page.testimonials içindeki referans için %%} <blockquote class=“testimonial”> <p class=“testimonial-message”>{{ testimonial.message }}</p> <p class =“testimonial-author”> <img src=“{{ referans.image }}” alt=“{{ referans.name }}'nin fotoğrafı”> {{ referans.name }} </p> </blockquote> { % endfor %} </div>

Gönderiler

WordPress, veritabanındaki gönderiler için HTML içeriğini, tarihi ve diğer meta verilerini depolar.

Jekyll'de her gönderi, bir _posts dizininde depolanan statik bir dosyadır. Dosya adında gönderi için yayın tarihi ve başlığı bulunur - örneğin, _posts/2016-11-11-real-estate-flipping.md . Bir blog gönderisinin kaynak kodu şu yapıyı alır:

 --- layout: post categories: - Property --- ![House](/images/house.jpeg)

Kategorileri ve etiketleri ayarlamak için ön konuyu da kullanabiliriz.

Ön maddenin altında, gönderinin Markdown ile yazılmış gövdesi var. Markdown, HTML'ye daha basit bir alternatiftir.

Jekyll, diğer düzenlerden miras kalan düzenler oluşturmamıza olanak tanır. Bu gönderinin bir post düzenine sahip olduğunu fark etmiş olabilirsiniz. post düzeni, varsayılan düzenden devralır ve bir tarih ve başlık ekler:

 --- layout: default --- <h3>{{ page.title }}</h3> <p>{{ page.date | date: '%B %d, %Y' }}</p> {{ content }}

Gönderileri yinelemek ve onlara bağlantı vermek için blog.html oluşturalım:

 --- layout: default --- <ul> {% for post in site.posts %} <li><a href="{{ post.url }}">{{ post.title }}</a></li> {% endfor %} </ul>

Koleksiyonlar

WordPress'te özel gönderi türleri, içerik gruplarını yönetmek için kullanışlıdır. Örneğin, referanslar, ürünler veya emlak listeleri için özel gönderi türleri kullanabilirsiniz.

Jekyll'in bu özelliği var ve buna koleksiyonlar diyor.

about.html sayfası, personelin profillerini gösterir. Ön konuda personel için meta verileri (isim, resim, telefon numarası, biyografi) tanımlayabilirdik, ancak daha sonra sadece o sayfada referans verebilirdik. Gelecekte, blog gönderilerinde yazarlar hakkında bilgi görüntülemek için aynı verileri kullanmak istiyoruz. Bir koleksiyon, web sitesinde herhangi bir yerde personel üyelerine başvurmamızı sağlar.

Web sitemizin yapılandırması _config.yml içinde bulunur. Burada yeni bir koleksiyon belirledik:

 collections: staff_members: output: false

Şimdi personelimizi ekliyoruz. Her personel, koleksiyon adıyla bir klasörde saklanan bir Markdown dosyasında temsil edilir; örneğin, _staff_members/jane-doe.md .

Ön maddeye meta verileri ve gövdeye tanıtım yazısı ekliyoruz:

 --- name: Jane Doe image: "/images/jane.jpeg" phone: "1234567" --- Jane has 19 years of experience in law, and specialises in property and business.

Gönderilere benzer şekilde, her bir personeli görüntülemek için about.html koleksiyonu yineleyebiliriz:

 --- layout: default --- <ul> {% for member in site.staff_members %} <li> <div><img src="{{ member.image }}" alt="Staff photo for {{ member.name }}"></div> <p>{{ member.name }} - {{ member.phone }}</p> <p>{{ member.content | markdownify }}</p> </li> {% endfor %} </ul>

Arama

WordPress, güçlü yerleşik arama ve hatta daha güçlü arama eklentilerine sahiptir.

Jekyll'de yerleşik arama yoktur, ancak çözümler vardır:

  • Lunr.js gibi bir JavaScript kitaplığı kullanarak istemci tarafında arama (Jekyll.tips, bunun nasıl kurulacağına dair bir öğreticiye sahiptir);
  • yüksek performanslı arama için Algolia gibi üçüncü taraf çözümleri;
  • Google Özel Arama gibi açılır çözümler.

Eklentiler

Eklentiler, WordPress'in çekici bir parçasıdır. WordPress'in neredeyse her şeyi yapmasını sağlamak için işlevsellik yüklemek kolaydır.

Jekyll web sitemizde birçok popüler WordPress eklentisi gerekli değildir:

  • iThemes Güvenliği
    Jekyll web sitemiz, üzerinde çalıştığı web sunucusu kadar güvenlidir.
  • Yedek Muhafız
    Jekyll web sitemiz, tüm değişiklik geçmişine erişmemizi sağlayan bir depoda yaşayacak.
  • WP Süper Önbellek
    Jekyll web sitemiz zaten statiktir.

Diğer WordPress eklentileri, web sitesine bırakabileceğimiz üçüncü taraf eşdeğerlerine sahiptir:

  • İletişim Formu 7 gibi iletişim formu eklentileri, Formspree, FormKeep veya Wufoo ile değiştirilebilir.
  • Basit bir mağaza için WP eCommerce, Snipcart, Gumroad veya Stripe ile değiştirilebilir.
  • Akismet ile WordPress yorumları yerine Disqus, Facebook Comments veya IntenseDebate kullanabilirsiniz.

Bazı WordPress eklentileri, çekirdek Jekyll ile taklit edilebilir. İşte ön madde ve Liquid kullanan bir fotoğraf galerisi:

 --- layout: default images: - image_path: /images/bill.jpg title: Bill - image_path: /images/burt.jpg title: Burt - image_path: /images/gary.jpg title: Gary - image_path: /images/tina.jpg title: Tina - image_path: /images/suzy.jpg title: Suzy --- <ul class="photo-gallery"> {% for image in page.images %} <li><img src="{{ image.image_path }}" alt="{{ image.title }}"/></li> {% endfor %} </ul>

Tamamlamak için sadece kendi JavaScript ve CSS'mizi eklememiz gerekiyor.

Jekyll eklentileri, diğer WordPress eklentilerinin işlevselliğini taklit edebilir. Jekyll eklentilerinin yalnızca web sitesi oluşturulurken çalıştığını unutmayın - gerçek zamanlı işlevsellik eklemezler:

  • Tek Tıkla XML Site Haritası yerine Jekyll Site Haritası Oluşturucu Eklentisini kullanın.
  • Jekyll SEO Etiketi, size SEO Sihirbazı'nın bazı işlevselliklerini verir.
  • Çok dilli bir web sitesi için WPGlobus yerine Jekyll Dil Eklentisini kullanın.

Sürüm Kontrolü

Jekyll gibi bir statik site oluşturucu kullanmanın en büyük faydalarından biri, tüm site ve içeriğin Git'te yaşayabilmesidir. Temel düzeyde Git, sitedeki tüm değişikliklerin geçmişini verir. Ekipler için her türlü iş akışını ve onay sürecini açar.

GitHub, Git'i öğrenmeye yeni başlayanlar için harika bir etkileşimli öğreticiye sahiptir.

İstemci Elden Çıkarma

Bu, web sitesini oluşturmanın somunlarını ve cıvatalarını kapsar. Tüm bir Jekyll web sitesinin nasıl bir araya geldiğini merak ediyorsanız, Adalet şablonuna bir göz atın. Jekyll için MIT lisanslı ücretsiz bir şablondur. Yukarıdaki snippet'ler bu şablona dayanmaktadır.

WordPress CMS, platformda yerleşiktir, bu nedenle müşteri için bir hesap oluşturmamız gerekir.

Jekyll web sitemizle Git depomuzu daha önce bahsedilen Jekyll GUI'lerinden birine bağlardık. Bu iş akışıyla ilgili güzel şeylerden biri, istemci değişikliklerinin depoya geri gönderilmesidir. Geliştiriciler olarak, geliştirici olmayanlar web sitesini güncellese bile yerel iş akışlarını kullanmaya devam edebiliriz.

Bazı Jekyll GUI'leri barındırma sunarken, diğerlerinin bir Amazon S3 kovasına veya GitHub Sayfalarına çıktı almanın bir yolu vardır.

Özet

Bu noktada, Jekyll web sitemiz yayında ve müşteri tarafından düzenlenebilir. Web sitesinde herhangi bir değişiklik yapmamız gerekirse, depoya basıyoruz ve otomatik olarak canlı olarak dağıtılacak.

İlk Jekyll Web Siteniz

Şimdi senin sıran. İlk Jekyll web sitenizi oluşturmanıza yardımcı olacak birçok kaynak mevcuttur:

  • Resmi Jekyll web sitesi, Jekyll'in tüm özelliklerine ilişkin ayrıntılı belgelerle başlamak için harika bir yerdir.
  • Jekyll.tips, temel Jekyll konularını kapsayan bir video eğitim serisine sahiptir.
  • Nasıl bir araya getirildiklerini görmek için GitHub'daki Jekyll şablonlarına bir göz atın: Pazarlama web siteleri için Frisco, dokümantasyon için Scholar ve dijital ajanslar için Urban.

Geçiş yapıyorsanız, Jekyll'in WordPress ve WordPress.com web sitelerinden gönderileri içe aktarmak için araçları vardır. İçe aktardıktan sonra, web sitesi için mizanpajları, sayfaları, CSS'yi, JavaScript'i ve diğer varlıkları manuel olarak taşımanız veya oluşturmanız gerekir.

Toplama

Jekyll'in güzelliği sadeliğindedir. WordPress, Jekyll'in birçok özelliğiyle eşleşebilirken, genellikle ekstra eklentiler veya altyapı yoluyla karmaşıklık pahasına gelir.

Sonuçta, sizin için en uygun aracı bulmakla ilgilidir. Jekyll'i web siteleri oluşturmanın hızlı ve verimli bir yolu olarak buldum. Denemenizi ve deneyimlerinizi yorumlarda paylaşmanızı tavsiye ederim.