Popüler Statik Site Üreticilerine Genel Bakış

Tüm statik sayfa oluşturucuların tek ve görünüşte basit bir görevi vardır: statik bir HTML dosyası ve tüm varlıklarını oluşturmak.

Statik bir HTML dosyası sunmanın daha kolay önbelleğe alma, daha hızlı yükleme süreleri ve genel olarak daha güvenli bir ortam gibi birçok belirgin faydası vardır. Her statik sayfa oluşturucu, HTML çıktısını farklı şekilde üretir.

Bununla birlikte, bu yazının amacı, mekanizmalarının inceliklerine dalmak ve tartışmak değil, her çerçevenin sunduğu özellik setini karşılaştırmak ve her çerçevenin benzersiz yönlerini ve özelliklerini vurgulamaktır.

Popüler Statik Sayfa Çerçevelerine Genel Bakış

Bu gönderide, aşağıdaki statik sayfa çerçevelerine daha yakından bakacağız: Jekyll , Middleman , Hugo ve Hexo . Bunlar hiçbir şekilde oradaki tek üreticiler değil, ancak büyük topluluklar ve birçok faydalı kaynak tarafından desteklenen en yaygın kullanılanlardır.

Her birine daha yakından bakalım ve temel özelliklerini karşılaştıralım:

• Jekyll
  • Ruby'de yazılmış,
  • Kutudan çıktığı haliyle Liquid şablon motorunu destekler;
• Aracı
  • Ruby'de yazılmış,
  • kutudan çıktığı haliyle ERB ve Haml şablon motorlarını destekler;
• Hugo
  • Go'da yazılı,
  • kutudan çıktığı gibi Go şablon motorunu destekler;
• hekso
  • JavaScript'te yazılmış,
  • EJS ve Pug'ı kutudan çıkarırken destekler.

Not: Bu statik sayfa oluşturucuların her birinin, ihtiyaçlarınızın çoğunu veya tamamını karşılamanıza olanak tanıyan eklentiler ve uzantılar kullanılarak özelleştirilebileceğini ve genişletilebileceğini belirtmekte fayda var.

Statik Site Üreticilerini Ayarlama

Bu çerçevelerin her biri için belgeler kapsamlıdır ve mükemmelden başka bir şey değildir ve buradan edinebilirsiniz:

Jekyll belgeleri

Aracı belgeleri

Hugo belgeleri

Hexo belgeleri

Kurulum kılavuzlarını takip ederseniz, geliştirme ortamını birkaç dakika içinde hazır hale getirmiş olursunuz. Kurulduktan sonra, terminalden komutları çalıştırarak yeni bir projeye başlayabilirsiniz.

Örneğin, farklı çerçevelerde yeni bir projeye şu şekilde başlarsınız:

Jekyll

jekyll new my_website

Aracı

middleman init my_website

Hugo

hugo new my_website

hekso

hexo init my_website

Yapılandırma

Yapılandırma genellikle tek bir dosyada saklanır. Her statik web sitesi oluşturucunun kendine has özellikleri vardır, ancak birçok ayar dördünde de aynıdır.

Kaynak dosyaların nerede saklanacağını veya yerleşik kaynakların nereye çıkarılacağını belirtebilirsiniz. Dışlama veya skip_render seçeneğini ayarlayarak derleme sürecinde kullanılmayacak verileri atlamak her zaman yararlıdır. Proje başlığı veya yazar gibi genel ayarları depolamak için yapılandırma dosyasını da kullanabilirsiniz.

Statik Jeneratöre Geçiş

Halihazırda kullanıma hazır bir Wordpress projeniz varsa, onu nispeten kolaylıkla statik bir sayfa oluşturucuya geçirebilirsiniz.

Jekyll için Jekyll Exporter eklentisini kullanabilirsiniz. Aracı için wp2middleman adlı bir komut satırı aracı kullanabilirsiniz. Hugo geçişi için Wordpress to Hugo Exporter kullanabilir, Hexo için de geçen yıl yazdığım Wordpress'ten Hexo'ya geçiş kılavuzumuzu okuyabilirsiniz.

İlke neredeyse aynıdır ve oldukça basittir - önce tüm içeriği uygun bir biçime aktarın ve ardından doğru klasöre ekleyin.

İçerik

Statik sayfa oluşturucular, ana içerik için Markdown kullanır. Markdown güçlüdür ve hızlı bir şekilde öğrenilebilir. Markdown'da içerik yazmak, basit sözdizimi nedeniyle doğaldır. Belge temiz ve düzenli görünüyor.

Makaleleri genel yapılandırma dosyasında belirtilen bir klasöre yerleştirmelisiniz. Makale adları, oluşturucu tarafından belirtilen kurallara uymalıdır.

_posts dizinine bir makale yerleştirmelisiniz. Makale adı şu formatta olmalıdır: YIL-AY-GÜN-başlık.MARKUP. Diğer oluşturucuların benzer kuralları vardır ve yeni bir makale oluşturmak için bir komut sağlarlar.

Middleman, Hugo ve Hexo'da yeni bir makale oluşturmaya yönelik komutlar şunlardır:

Aracı

middleman article my_article

Hugo

hugo new posts/my_article.md

hekso

hexo new post my_article

Markdown'da, belirli bir sözdizimi kümesiyle sınırlısınız. Neyse ki bizim için tüm oluşturucular ham HTML'yi de işleyebilir. Örneğin, belirli bir sınıfa bağlantı eklemek istiyorsanız, onu normal bir HTML dosyasında yaptığınız gibi ekleyebilirsiniz:

This is a text with <a class="my-class" href="#">a link</a> .

Ön Konu

Ön konu, Markdown dosyasının üstündeki bir veri bloğudur. Daha iyi içerik oluşturmak için ihtiyaç duyduğunuz verileri depolamak için özel değişkenler ayarlayabilirsiniz. Dağınık ve çirkin bir belge yapısına yol açabilecek Markdown'da HTML yazmak yerine, ön konuda bir değişken tanımlayabilirsiniz.

Örneğin, makalenize bu şekilde etiketler ekleyebilirsiniz.

 tags: - web - dev - featured

Statik Sayfa Oluşturuculardaki Şablonlar

Statik sayfa oluşturucular, şablonları işlemek için bir şablonlama dili kullanır. Bir şablona veri eklemek için etiketleri kullanmanız gerekir. Örneğin, Jekyll'de sayfa başlığını görüntülemek için şunu yazabilirsiniz:

{{ page.title }}

Jekyll'deki yazımızda ön maddeden bir etiket listesi görüntülemeye çalışalım . Bir değişkenin mevcut olup olmadığını kontrol etmeniz gerekir. Ardından, etiketler arasında dolaşmanız ve bunları sırasız bir listede görüntülemeniz gerekir.

 {%- if page.tags -%} <ul> {%- for tag in page.tags -%} <li>{{ tag }}</li> {%- endfor -%} </ul> {%- endif -%}

Aracı:

 <% if current_page.data.tags %> <ul> <% for tag in current_page.data.tags %> <li><%= tag %></li> <% end %> </ul> <% end %>

Hugo:

 {{ if .Params.Tags }} <ul> {{ range .Params.Tags }} <li>{{ . }}</li> {{ end }} </ul> {{ end }}

altıgen:

 <% if (post.tags) { %> <ul> <% post.tags.forEach(function(tag) { %> <li><%= tag.name %></li> <% } ); %> </ul> <% } %>

Not: Bir derleme işleminin başarısız olmasını önlemek için bir değişkenin var olup olmadığını kontrol etmek iyi bir uygulamadır. Sizi saatlerce hata ayıklama ve test etme zahmetinden kurtarabilir.

Değişkenleri Kullanma

Statik bir sayfa oluşturucu, şablonları teslim etmek için kullanılabilen genel değişkenler sağlar. Farklı değişken türü farklı bilgileri tutar. Örneğin, Hexo'daki global bir değişken sitesi, bir sitenin gönderileri, sayfaları, kategorileri ve etiketleri hakkında bilgi tutar.

Mevcut değişkenleri ve bunların nasıl kullanılacağını bilmek, bir geliştiricinin hayatını kolaylaştırabilir. Hugo, şablon oluşturmak için Go'nun şablon kitaplıklarını kullanır. Hugo'da değişkenlerle çalışmak, bağlama veya "nokta" nasıl adlandırıldığına aşina değilseniz bir sorun olabilir.

Aracının global değişkenleri yoktur. Ancak, makale listesi gibi bazı değişkenlere erişmenizi sağlayacak aracı-blog uzantısını açabilirsiniz. Global değişkenler eklemek istiyorsanız, bunu veri dosyalarına veri ayıklayarak yapabilirsiniz.

Veri dosyaları

Markdown dosyalarında bulunmayan verileri depolamak istediğinizde veri dosyalarını kullanmalısınız. Örneğin, sitenizin alt bilgisinde görüntülemek istediğiniz sosyal bağlantılarınızın listesini kaydetmeniz gerekiyorsa. Tüm statik sayfa oluşturucular, YAML ve JSON dosyalarını destekler. Ayrıca Jekyll, CSV dosyalarını, Hugo ise TOML dosyalarını destekler.

Bu sosyal bağlantıları veri dosyamızda saklayalım. Tüm oluşturucular YAML biçimini desteklediğinden, verileri social.yml dosyasına kaydedelim:

 - name: Twitter href: https://twitter.com/malimirkeccita - name: LinkedIn href: http://github.com/maliMirkec/ - name: GitHub href: https://www.linkedin.com/in/starbist/

Jekyll, veri dosyalarını varsayılan olarak _data dizininde saklar. Middleman ve Hugo veri dizinini kullanır ve Hexo source/_data directory kullanır.

Verilerin çıktısını almak için aşağıdaki kodu kullanabilirsiniz:

Jekyll

 {%- if site.data.social -%} <ul> {% for social in site.data.social %} <li><a href="{{ social.href }}">{{ social.name }}</li> {%- endfor -%} </ul> {%- endif -%}

Aracı

 <% if data.social %> <ul> <% data.social.each do |s| %> <li><a href="<%= s.href %>"><%= s.name %></li> <% end %> </ul> <% end %>

Hugo

 {{ if $.Site.Data.social }} <ul> {{ range $.Site.Data.social }} <li><a href="{{ .href }}">{{ .name }}</a></li> {{ end }} </ul> {{ end }}

hekso

 <% if (site.data.social) { %> <ul> <% site.data.social.forEach(function(social){ %> <li><a href="<%= social.href %>"><%= social.name %></a></li> <% }); %> </ul> <% } %>

yardımcılar

Şablonlar genellikle veri filtrelemeyi destekler. Örneğin, başlığı büyük harf yapmak istiyorsanız, bunu şöyle yapabilirsiniz:

{{ page.title | upcase }}

Aracının benzer sözdizimi vardır:

<%= current_page.data.title.upcase %>

Hugo aşağıdaki komutu kullanır:

{{ .Title | upper }}

Hexo'nun farklı sözdizimi vardır, ancak sonuç aynıdır.

<%= page.title.toUpperCase() %>

Statik Sayfa Üreticileri Varlıkları Nasıl İşler?

Varlık yönetimi, statik sayfa oluşturucularda farklı şekilde işlenir. Jekyll, varlık dosyalarını yerleştirildikleri her yerde derler. Aracı, yalnızca kaynak klasörde depolanan varlıkları işler. Hugo'daki varlıklar için varsayılan konum, varlıklar dizinidir. Hexo, varlıkları global kaynak dizinine yerleştirmeyi önerir.

SASS

Jekyll, Sass'ı kutunun dışında destekler, ancak bazı kurallara uymalısınız. Middleman ayrıca Sass'ı kutudan destekler. Hugo, Sass için Hugo Pipes aracılığıyla Sass'ı derler. Hexo bunu eklenti aracılığıyla yapıyor.

ES6

es6'nın modern JavaScript özelliklerini kullanmak istiyorsanız, bir eklenti yüklemelisiniz. Benzer bir eklentinin birden fazla sürümü olabilir, bu nedenle kodu kontrol etmek veya açık sorunları veya en iyi olanı bulmak için en son taahhütleri görmek isteyebilirsiniz.

Görüntüler

Görüntü optimizasyonu da varsayılan olarak desteklenmez. Ayrıca, es6 eklentileri gibi, görüntüleri optimize etmek için birden fazla eklenti vardır. Ödevini yap ve iş için en iyi eklentiyi bulmaya çalış. Alternatif olarak, üçüncü taraf bir çözüm kullanabilirsiniz. Hexo ile oluşturulan blogumda Cloudinary ücretsiz plan kullanıyorum. Cloudinary etiketi geliştirdim ve Cloudinary dönüşümleri aracılığıyla duyarlı ve optimize edilmiş görüntüler sağlıyorum.

Eklentiler, Uzantılar

Statik sayfa oluşturucular, web sitenizi özelleştirmenize olanak tanıyan güçlü kitaplıklara sahiptir. Her eklenti farklı bir amaca hizmet eder. Daha iyi bir geliştirme ortamı için LiveReload'dan Site Haritası veya RSS beslemesi oluşturmaya kadar çok çeşitli eklentiler bulabilirsiniz.

Yeni bir eklenti veya uzantı yazabilirsiniz. Yapmadan önce, benzer bir eklentinin olup olmadığını kontrol edin. Jekyll eklenti listesine, Middleman uzantılarına ve Hexo eklentilerine bakın. Hugo'nun eklentileri veya uzantıları yoktur. Ancak, özel kısa kodları destekler.

Markdown'daki kısa kodlar

Kısa kodlar, Markdown belgelerine yerleştirebileceğiniz kod parçacıklarıdır. Bu snippet'ler HTML kodu verir. Hugo ve Hexo kısa kodları destekler. Hugo'daki şekil gibi yerleşik kısa kodlar vardır:

{{< figure src="/lint/to/image.jpg" title="My image" >}}

Hexo youtube kısa kodu:

{% youtube video_id %}

Uygun bir kısa kod bulamazsanız, yeni bir tane oluşturabilirsiniz. Örneğin, Hexo CanIUse yerleştirmelerini desteklemiyor ve ben CanIUse yerleştirmeyi destekleyen yeni bir etiket geliştirdim. Eklentinizi npm veya resmi jeneratör sitesinde yayınlamayı unutmayın. Bunu yaparsanız toplum minnettar olacaktır.

İYS

Statik sayfa oluşturucular, teknik olmayan bir kişi için ek yük olabilir. Komutların veya Markdown'ın nasıl kullanılacağını öğrenmek herkes için kolay bir şey değildir. Bu durumda, bir kullanıcı JAMstack siteleri için İçerik Yönetim Sisteminden yararlanabilir. Bu listede ihtiyaçlarınıza en uygun sistemi bulabilirsiniz. CMS'yi yapılandırmanın biraz zaman aldığını bilin, ancak uzun vadede siz ve diğer kullanıcılar içerik yayınlamaktan daha verimli bir şekilde faydalanabilirsiniz.

Bonus: JAMstack Şablonları

Projenizi yapılandırmak için çok fazla zaman harcamak istemiyorsanız JAMstack şablonlarından yararlanabilirsiniz. Bu şablonlardan bazıları, size çok zaman kazandırabilecek CMS ile önceden yapılandırılmıştır.

Kodu inceleyerek de çok şey öğrenebilirsiniz. Bir şablon yüklemeye çalışın, diğerleriyle karşılaştırın ve sizin için en iyisini seçin.

Toplama

Statik sayfa oluşturucular, bir web sitesi oluşturmanın hızlı ve güvenilir bir yoludur. Hatta günümüzde bir jeneratör ile önemsiz olmayan ve son derece özelleştirilmiş web siteleri bile oluşturabilirsiniz.

Örneğin, Smashing Magazine geçen yıl JAMstack'e taşındı ve sitelerini önemli ölçüde hızlandırmayı başardılar. Statik web sitelerinin başka başarılı örnekleri de vardır ve hepsi aynı prensibi paylaşır: daha hızlı yükleme ve üstün bir kullanıcı deneyimi için statik kaynaklar üretmek ve bunları İçerik Dağıtım Ağları üzerinden teslim etmek.

Statik web sitenizle yapabileceğiniz çok daha fazlası var: Wordpress REST API'sini arka uç olarak kullanmaktan Lambda işlevlerini kullanmaya kadar. Kullanıma hazır HTTPS kullanmak veya form gönderimlerini işlemek gibi basit web siteleri için bile mükemmel çözümler vardır.

Umarım statik sayfa çerçevelerine ilişkin bu genel bakış, potansiyellerini fark etmenize ve bir dahaki sefere yeni bir proje düşündüğünüzde bunları kullanmayı düşünmenize yardımcı olmuştur.