Eleventy (11ty) — basit ve güçlü bir statik site oluşturucu

Aşağıdaki makale size yardımcı olacaktır:Eleventy (11ty) — basit ve güçlü bir statik site oluşturucu

Statik ve dinamik sitelerin özellikleri

Bu makale, statik site oluşturucuların veya özellikle Eleventy (11ty olarak da bilinir) adı verilen bir site oluşturucunun faydalarına odaklanmaktadır. Ancak projenizde kullanılacak doğru teknoloji olup olmadığına karar vermek için, oluşturmayı planladığınız site türünü açıkça anlamalısınız: statik veya dinamik.

Dinamik siteler, içeriği özelleştirmek için daha fazla seçenek sunar. Örneğin, farklı kullanıcılar için kişiselleştirilmiş içerik göstermek ve onların paylaşım ve yorum yapmalarını sağlamak istiyorsanız, dinamik bir siteye ihtiyacınız olacaktır.

Bununla birlikte, içerik tutarlı kalacaksa, statik bir site daha uygun bir seçim olacaktır. Statik siteler makaleleri, incelemeleri veya belgeleri görüntülemek için çok uygundur ve bir açılış sayfası, promosyon web sitesi, kişisel blog veya ürün kataloğu oluşturuyorsanız Eleventy sizin için uygun olabilir. Ayrıca, statik web sitelerinin kullanıcılarının bir sunucudan belirli verileri talep edememesine rağmen, web sitelerinin kaydırıcılar ve resim galerileri gibi etkileşimli UI öğeleriyle özel görünebileceğini de belirtmekte fayda var.

Dolayısıyla, statik ve dinamik siteler arasındaki temel fark, içeriği nasıl ele aldıklarıdır:

Statik siteler, hazır içerikleri sunucudan alır ve tüm kullanıcılara aynı şekilde gösterir.

Statik bir site tüm kullanıcılar için aynı şekilde görüntülenir.

Dinamik siteler ise içeriği hazır bir biçimde depolamaz. Bunun yerine içerik, istek sırasında oluşturulur ve belirli parametrelere göre değişebilir. Bu, dinamik bir sitenin farklı kullanıcılarının farklı içerik görebileceği anlamına gelir.

Dinamik bir site, belirli parametrelere dayalı olarak her kullanıcı için farklı içerik üretir.

Burada, oturum açmış bir kullanıcının ve gizli modda gezinen bir ziyaretçinin farklı ürün önerileri aldığı bir dinamik site örneği verilmiştir.

Farklı ürün önerileri veya giriş yapmış ve yeni kullanıcılar için

Statik sitelerin avantajları ve dezavantajları

Hâlâ seçeneklerinizi düşünüyorsanız, statik sitelerin artılarını ve eksilerini tartmanız yararlı olabilir. İşte düşünmeniz gereken bazı avantaj ve dezavantajlar.

Statik sitelerin dinamik sitelere göre avantajları:

• Bir veritabanından içerik almaları gerekmediğinden genellikle dinamik sitelerden daha hızlıdırlar.
• Ortak bir güvenlik riski oluşturabilecek kullanıcı etkileşimlerini içermedikleri için daha güvenlidirler.
• Statik sitelerin teslim edilmesi ve önbelleğe alınması kolaydır. İçerik ancak ilk istekten sonra sunucudan indirilir ve kullanıcı siteyi tekrar ziyaret ettiğinde bilgiler tarayıcı önbelleğinden alınarak daha hızlı görüntülenmesi sağlanır.
• Sunucu kaynaklarına daha az ihtiyaç duyarlar ve her yerde barındırılabilirler. Ayrıca barındırması daha ucuz ve taşıması daha kolay.
• Statik siteler yüksek esnekliğe sahiptir ve DDOS saldırılarına ve dinamik sitelerin başarısız olmasına neden olabilecek ani trafik artışlarına dayanabilir.
• Statik web siteleri, daha yüksek yükleme hızları ve arama robotlarının taraması ve dizine eklemesi daha kolay olan içeriği nedeniyle arama motorlarında daha üst sıralarda yer alabilir. Bununla birlikte, arama sonuçlarında üst sıralarda yer alma eğiliminde olanların düzenli olarak güncellenen web siteleri olduğunu belirtmekte fayda var. Dinamik bir web sitesinde, kullanıcılar tarafından yorum yapma ve yayınlama gibi özellikler aracılığıyla içerik eklenebilirken, statik bir web sitesinde, içerik güncellemeleri genellikle site sahibi ve editörler tarafından yapılır.

Statik içeriğin özellikleri

Statik sitelerin dezavantajları:

• Statik web siteleri daha az işlevseldir. Metin, resimler ve animasyonlar gibi statik içeriği görüntülemek için yapılmıştır. Ancak, kullanıcı yönetimi, arama, panolar vb. gibi karmaşık mantığı yönetemezler.
• Ayrıca daha az ölçeklenebilirler. Dinamik siteler için yeni mantık eklemek nispeten kolaydır, statik siteler için ise çok daha zordur, hatta imkansızdır.

Dinamik içeriğin özellikleri

Artık statik siteler hakkında daha fazla bilgi sahibi olduğunuza göre, statik site oluşturucuların bunları oluşturmamıza ve sürdürmemize nasıl yardımcı olabileceğine bakalım.

Statik site oluşturucuların sunabileceği avantajlar nelerdir?

HTML, CSS ve JavaScript’i birleştirerek statik web sitesi oluşturucu kullanmadan statik siteler oluşturmak mümkün olsa da, statik site oluşturucular, onları geliştiriciler arasında popüler yapan çeşitli avantajlar sunar.

Göz önünde bulundurmanız gereken başlıca avantajlar şunlardır:

• Statik web sitesi oluşturucuları, geliştiricilerin görevleri otomatikleştirmesine yardımcı olur geliştirilmiş web sitesi performansı için. Bunu, önceden yapılandırılmış şablonları kullanarak optimize edilmiş ve hızlı yüklenen HTML sayfaları oluşturarak yapabilirler. Bu, en iyi uygulamaları uygulamayı kolaylaştırır ve statik sayfaların manuel olarak oluşturulması ve optimize edilmesi ihtiyacını ortadan kaldırır.
• Bazıları destekliyor İşaretleme biçimlendirme dili, bu da kaynak kodunu düzenlemeye kıyasla içeriği düzenlemeyi daha kolay ve daha güvenli hale getirir. Bu, tam özellikli bir metin düzenleyici veya kullanıcı dostu bir kontrol paneli içermeyen statik siteler için özellikle kullanışlıdır.
• Genellikle yerleşik düzenler ve şablonlarla birlikte gelirler. blog gönderileri, resim galerileri ve daha fazlası gibi farklı içerik türleri oluşturmak için kullanılabilen. Desteklenen belirli içerik türleri, statik web sitesi oluşturucuya ve odağına veya uzmanlığına bağlı olarak değişebilir.
• Birçok statik site üreticisi de yerleşik arama motoru optimizasyonu (SEO) işlevi sunarsite içeriğinin arama motoru robotları tarafından kolayca erişilebilir olmasını sağlamaya yardımcı olur ve sitenin arama sonuçlarındaki sıralamasını yükseltebilir.

Temel olarak, statik site oluşturucuları kullanmanın tek zorluğu, birlikte çalışmak için daha yetenekli ve bilgili profesyoneller gerektirmesi ve geliştirme sürecinin biraz daha yavaş olabilmesidir. Bununla birlikte, bu tür sitelerin bakımı önemli ölçüde daha kolay olduğundan ve görevler daha verimli bir şekilde tamamlanabileceğinden, bu ek çaba buna değer.

11ty, en verimli statik site üreticilerinden biri olarak

Bir statik web sitesi oluşturucu seçerken, mevcut farklı seçeneklerin özelliklerini ve yeteneklerini dikkate almak önemlidir. En popüler statik site oluşturuculardan bazıları, verileri kabul ederek ve HTML’yi döndürerek statik siteler oluşturma konusunda uzmanlaşmış Eleventy, Hugo ve Jekyll’dir. Gatsby, Next ve Nuxt gibi diğer oluşturucular hem statik hem de dinamik siteler oluşturabilir, bu da onları daha çok yönlü ve popüler ama aynı zamanda daha karmaşık ve potansiyel olarak daha yavaş hale getirir.

Çalışmalar Eleventy’nin Gatsby ve Next gibi daha popüler seçenekleri geride bırakarak birkaç düzine sayfaya sahip küçük ve orta ölçekli siteler için en hızlı oluşturuculardan biri olduğunu gösterdiler.

Statik site oluşturucular için hız karşılaştırması

Hız önemli olsa da, statik bir site oluşturucu seçerken göz önünde bulundurulması gereken tek gösterge değildir. Bir site oluşturucunun çalışması, her zaman hızı ile gerçekleştirebileceği görevler arasında bir dengeyi içerir. Bir statik site oluşturucu seçmek, yalnızca “en hızlı” seçeneği seçmekle ilgili değildir, daha çok belirli bir proje ve belirli bir programcı için becerilerini ve kişisel tercihlerini dikkate alarak en uygun aracı bulmakla ilgilidir.

Eleventy, daha basit bir statik site oluşturucu

İşte bu yüzden 11ty’yi seçmek isteyebilirsiniz:

• Eleventy, birçok ön uç geliştiricinin aşina olduğu JavaScript ve Node.js ile yazılmıştır. Bu, Eleventy’yi etkili bir şekilde kullanmak için yeni bir programlama dili öğrenmenize gerek kalmayabileceği anlamına gelir. Şirketimizin geliştiricileri de Eleventy’yi resimlerle çalışmayı geliştirmek için bir kitaplık oluşturan yararlı bir araç olarak gördüler.
• Eleventy, Markdown, HTML, WebC, JavaScript, Liquid, Nunjucks, Gidon, Mustache, EJS, Haml ve Pug dahil çok çeşitli şablonları destekler. Bu, belirli bir şablonu kullanabileceğiniz veya farklı dillerde yazılmış birden çok şablonu birleştirebileceğiniz için proje oluşturmada esneklik sağlar. Örneğin, HTML, Markdown ve JavaScript şablonlarını birleştirebilirsiniz.
• Eleventy, hızlı yüklenen ve çalışan verimli, yüksek kaliteli siteler üretmesiyle ünlüdür. Gibi tanınmış şirketler ve siteler tarafından kullanılır. Google, Netleştir, CSS Püf Noktaları, W3C, MİT, CERN, A11Y Projesi, ESLint, Yığın TaşmasıVe diğerleri.

Doğal olarak, Eleventy’nin kendi web sitesi, https://www.11ty.dev/, Eleventy oluşturucu kullanılarak da oluşturulur. Eleventy ile oluşturulmuş gerçek çalışan bir sitenin performansını ve hızını görmek için siteyi ziyaret edebilirsiniz. nasıl olduğuna bir bak Google Deniz Feneri performansını değerlendirdi.

Eleventy’nin kendi web sitesi için Google Lighthouse sonuçları

Gördüğünüz gibi, sonuç mükemmelden başka bir şey değil ve bu oldukça anlamlı.

11ty’nin en önemli özelliklerinden biri olarak hız

Bu makale boyunca, Eleventy ile ilgili olarak hızın önemini vurguladık ve bunun iyi bir nedeni var. Hız, herhangi bir web sitesinin başarısı için çok önemli bir faktördür. İçerik ne kadar faydalı olursa olsun, tasarım ne kadar çekici olursa olsun, bir kullanıcı buna erişemezse, tüm bu çaba boşa gidecektir.

Buna göre HTTP Arşivi2022’de ortalama web sayfası boyutu, masaüstü bilgisayarlarda 2,3 MB ve mobil cihazlarda 2,0 MB oldu. Ortalama sayfa boyutunun sadece on yıl önce çok daha küçük olduğu düşünülürse, bu rakamlar oldukça yüksektir. Hem masaüstü hem de mobil cihazlar için benzer sayfa boyutu, birçok web sitesinin mobil cihazlar için optimize edilmediğini gösterir.

2011’den 2022’ye kadar ortalama web sayfası boyutu

Buna göre Neil Patel, Masaüstü kullanıcılarının %40’ı ve mobil kullanıcıların %50’den fazlası, yüklenmesi üç saniyeden uzun süren bir sayfadan ayrılacak. Bu, yavaş bir web sitesinin düşük performans nedeniyle hedef kitlesinin yarısını kaybedebileceği anlamına gelir. Ek olarak, yavaş bir web sitesi muhtemelen SEO’yu olumsuz yönde etkileyecek ve arama motorlarından gelen trafiğin azalmasına neden olacaktır.

Web sayfası boyutuna katkıda bulunan temel bileşenlere bir göz atmak da ilginçtir. Tipik olarak, resimler bir web sitesinin en ağır bileşenidir ve onu ortalama olarak resimlerin dosya boyutunun yaklaşık yarısını oluşturan JavaScript takip eder.

Web sayfası boyutunun bileşene göre dökümü

Bu nedenle, görüntüleri optimize etmek ve JavaScript’in ağırlığını azaltmak, bir web sayfasının boyutunu ve hızını önemli ölçüde artırabilir.

Eleventy tam olarak bu şekilde yardımcı olabilir. Bazı JavaScript kodlarını çalıştırsa da, bunu Next.js ve Gatsby gibi diğer statik site oluşturuculara kıyasla çok daha düşük düzeyde gerçekleştirerek kaynak kullanımını en aza indirir. Ek olarak, Eleventy Image Plugin yüklendikten ve yapılandırıldıktan sonra, projenin ayarlarına bağlı olarak tüm web sayfası görüntülerini otomatik olarak en modern WebP veya AVIF biçimlerine dönüştürür. Deneyimlerimize göre, görüntü formatındaki bu değişiklik, boyutta iki ila beş kat küçülme sağlıyor.

Aynı eklenti, farklı ekran çözünürlükleri için farklı görüntülerin kullanılmasını da kolaylaştırır. Masaüstü cihazlar için 1280px, tabletler için 640px ve akıllı telefonlar için 320px genişliğinde görseller kullandığımızı varsayalım. Bu stratejinin kare şeklindeki görüntüler için uygulanması, masaüstü cihazlardaki dosya boyutuna kıyasla tabletlerdeki görüntülerin dosya boyutunun dört kat, akıllı telefonlarda ise on altı kat azalmasına neden olacaktır.

Şirket sitesini 11ty’ye taşıma durumumuz

Eleventy’nin web sayfalarının hızını artırma yeteneği, onu şirketimizin web sitesinin yeniden tasarımı için kullanma kararımızda önemli bir rol oynadı. Ama önce bazı verilere bakalım. Aşağıda, Eleventy’yi uygulamadan önce Halo Lab ana sayfasının performansını değerlendirmeye ilişkin Google Lighthouse sonuçlarını görebilirsiniz.

Eleventy’yi uygulamadan önce Halo Lab ana sayfasının performans sonuçları

Rapora göre web sitemizin mobil cihazlardaki performans puanı %82 olarak gerçekleşti. Bu iyi kabul edilse de, mükemmel bir %90 veya daha yüksek puanın gerisinde kalıyor. Genel olarak Google Lighthouse, iyileştirilmesi gereken birkaç alan belirledi:

• Hız İndeksi, bir sayfanın görünen bölümlerinin görüntülenme süresidir (8,2 saniye, optimum değer 3,4 saniyeye kadardır).
• En Büyük İçerikli Boyama, sayfanın ana içeriğinin muhtemelen yüklendiği zamandır (2,6 saniye, optimum değer 2,5 saniyeye kadardır).
• Etkileşim Süresi, kullanıcıların web sayfasıyla etkileşimde bulunabileceği noktayı (6,5 saniye) yansıtır.

Şimdi Eleventy ile bu değerlerin nasıl değiştiğini karşılaştırın. Eleventy’yi uyguladıktan sonra Halo Lab ana sayfasının performansını değerlendirmeye ilişkin Google Lighthouse sonuçları aşağıdadır.

Eleventy’yi uyguladıktan sonra Halo Lab ana sayfasının performans sonuçları

Aşağıdaki sonuçları aldık:

• Performans puanı %10 artarak %92’ye yükseldi.
• Hız İndeksi 8,2’den 2,4 saniyeye düşürüldü (5,8 saniye veya %70 hızlanma).
• Etkileşim Süresi de 6,5 saniyeden 4,6 saniyeye düşürüldü (1,9 saniye veya %30 hızlanma).
• Sitede çok fazla resim olması nedeniyle En Büyük İçerikli Boya puanı optimal olmasa da, bu gösterge bizim için nelerin ele alınması gerektiğini vurguladı.

Genel olarak, bu oldukça iyi bir gelişme, sence de öyle değil mi?

Bir adım ileri gitmek: 11ty ve Sanity’yi entegre etmek

Daha önce, Eleventy’nin mümkün olduğu kadar insan tarafından okunabilir olacak şekilde tasarlanmış bir biçimlendirme dili olan Markdown da dahil olmak üzere ondan fazla farklı şablon türünü desteklediğinden bahsetmiştik. Geliştiricilerimiz siteye veri eklerken, Markdown’u kullanmak çocuk oyuncağıydı. Onlar için dil gerçekten de basitti. Editörleri sürece dahil ettiğimizde sorunlar ortaya çıktı – onlar için Markdown ile çalışmak istediklerinden çok daha fazla zaman alıcı ve karmaşıktı.

Karşılaştığımız ikinci zorluk, bir projeye Markdown dosyaları olarak şablon eklemenin git ve GitHub bilgisi gerektirmesiydi. Bu teknolojileri öğrenmek mümkünken editörlerimizin bu teknik uzmanlığa sahip olması gerekli mi diye merak ettik. Üçüncü zorluk ikinciden kaynaklanıyordu – teknik bilgisi olmayan kişilerin kod havuzunu düzenlemesine izin verilirse, sorunların ortaya çıkması an meselesiydi.

Bu zorlukların üstesinden gelmek için aşağıdaki hedefleri belirledik:

1. Programcı olmayanların kendilerine tanıdık ve kullanışlı bir görsel düzenleyici kullanarak siteye içerik eklemelerini kolaylaştırın.
2. Potansiyel sorunları önlemek için proje kodu deposunu teknik olmayan kişiler tarafından düzenlenmeye karşı koruyun.

Projeye geleneksel CMS sistemlerinde kullanılanlara benzer bir yönetici paneli eklemeye karar verdik. Ancak, statik web sitesi oluşturucuları genellikle bu tür paneller sağlamaz. Neyse ki, Eleventy ile entegrasyonu destekler Akıl sağlığıve içerik eklemek için kullanabileceğimiz şey buydu.

Yeni nesil başsız içerik yönetim sistemi (CMS) olan Sanity, web sitesi verilerinin ayrı bir sunucuda yönetilmesine ve saklanmasına olanak tanır. Bu ayrım, belirli bir teknolojiye veya mimariye bağlı olmadan Sanity’nin verilerinin herhangi bir uygulamada kullanılmasını kolaylaştırır. Aynı zamanda, geleneksel CMS sistemleri, arka ucu ve ön ucu tek bir sistemde birleştirir.

Geleneksel ve Başsız CMS

Sanity, ücretsiz planında bile harika özelliklere sahip, oldukça popüler ve geliştirici dostu bir CMS’dir. API’si ve işlevsel yönetici paneli aracılığıyla metin, resim ve videoların kolay yönetimini sağlar. İçerik taslak olarak kaydedilebilir ve hazır olduğunda yayınlanabilir.

Sanity’nin yönetici paneli

Ayrıca, URL’ye parametreler ekleyerek anında dönüştürmeye olanak tanıyan Sanity’nin görüntü dönüştürme özelliği, verimliliği büyük ölçüde artırır ve görüntülerle çalışmayı kolaylaştırır.

Sanity’nin projeye entegrasyonunun başarılı olduğunu ve tüm beklentilerimizi tam olarak karşıladığını söyleyebiliriz. Yüklenen veriler için Sanity’nin ve onun CDN tabanlı depolamasının kullanılması, daha hızlı veri teslimi sağlıyor ve bu, siteye içerik ekleme sürecini daha verimli, kullanışlı ve güvenli hale getirirken yüksek performansı korumamıza yardımcı oldu.

Çözüm

Web siteleri tasarlarken, bunlara erişecek kullanıcıları göz önünde bulundurmak önemlidir. Birçok kişinin hızlı, sınırsız interneti veya yeni, güçlü cihazları yoktur, bu nedenle modern teknolojiyi kullanmak, web sitelerini daha hafif hale getirmeye ve yavaş internet bağlantılarında veya eski cihazlarda bile iyi performans göstermeye yardımcı olabilir.

İşte İçerik Stratejisti Brice Berdah diyor bunun hakkında:

Gereksiz trafik ağları aşırı yüklediğinden ve daha yüksek talepler hizmet maliyetlerini yükselttiğinden, bunda bir gerçek var. Nihayetinde, üzerinde düşünülmesi gereken bir şey olan “Gereksiz dinamik bir web sitesi yayınlamanın ortak bir iyinin kötüye kullanılması olduğu” sonucuna varır.

Ancak durumu iyileştirebiliriz. Yetersiz teknolojiye güvenmek yerine, web sitesi geliştirmede modern yaklaşımları ve mekanizmaları kullanmayı düşünün. Statik bir siteye ihtiyaç varsa, statik bir web sitesi oluşturucu kullanmak makul bir karar olacaktır ve Eleventy tam da ihtiyacınız olan şey olabilir.

Kaynaklar

Bu makalede tartışılan teknolojilerle ilgilenen bir geliştiriciyseniz, Eleventy’yi öğrenmeye ve onu Sanity ile entegre etmeye başlamanıza yardımcı olacak ayrıntılı kaynakları aşağıda bulabilirsiniz. Bu modern ve ilerici teknolojileri öğrenme deneyiminizin hem başarılı hem de eğlenceli olmasını umuyoruz. Bu araçlarda uzmanlaşarak bir geliştirici olarak gelişebilir ve projelerinizi daha hızlı, daha verimli ve daha kullanıcı dostu hale getirebilirsiniz.

1. 110 Dokümantasyon

2. Eleventy Statik Site Oluşturucuyu Öğrenin

3. 11ty (Eleventy) Blog Starter’a nasıl başlanır?