WordPress'ten Eleventy Statik Site Üreticisine Nasıl Geçilir?

Eleveny, statik bir site oluşturucudur. Neden statik bir site oluşturucu kullanmak istediğinizi inceleyeceğiz, basit bir WordPress sitesini Eleventy'ye dönüştürmenin özüne gireceğiz ve içeriği bu şekilde yönetmenin artıları ve eksileri hakkında konuşacağız. Hadi gidelim!

Statik Site Oluşturucu Nedir?

Web geliştirme kariyerime onlarca yıl önce 1990'ların ortalarında, bir web sitesini hazır ve çalışır hale getirmek için ihtiyacınız olan tek şeyin HTML ve CSS olduğu zaman başladım. Bu basit, statik web siteleri hızlı ve duyarlıydı. Yine de günümüze hızlı bir şekilde ilerleyin ve basit bir web sitesi oldukça karmaşık olabilir.

WordPress durumunda, bir web sayfası oluşturmak için ne gerektiğini düşünelim. Bir sunucunun sunucularında çalışan WordPress sunucu tarafı PHP, meta veriler ve içerik için bir MySQL veritabanını sorgulamanın ağır yükünü üstlenir, statik bir dosya sisteminde depolanan görüntülerin doğru sürümlerini seçer ve daha önce hepsini tema tabanlı bir şablonda birleştirir. tarayıcıya geri döndürüyor. WordPress tarafından oluşturulan web sayfalarının çoğu gerçekten o kadar dinamik olmasa da, her sayfa isteği için dinamik bir işlemdir. Hepsi olmasa da çoğu ziyaretçi aynı içeriği deneyimler.

Statik site oluşturucular, modeli onlarca yıllık yaklaşıma geri döndürür. Statik site oluşturucular, web sayfalarını dinamik olarak bir araya getirmek yerine, içeriği Markdown biçiminde alır, şablonlarla birleştirir ve statik web sayfaları oluşturur. Bu işlem, kullanıcılar sitenize göz atarken istek döngüsünün dışında gerçekleşir. Tüm içerik önceden oluşturulmuştur ve her istek üzerine yıldırım hızında sunulur. Web sunucuları tam anlamıyla reklamlarını yapıyorlar: hizmet etmek. Veritabanı yok. Üçüncü taraf eklentileri yok. Sadece saf HTML, CSS, JavaScript ve resimler. Bu basitleştirilmiş teknoloji yığını, bilgisayar korsanları için daha küçük bir saldırı yüzeyine de eşittir. Sömürülecek küçük bir sunucu tarafı altyapısı vardır, bu nedenle siteniz doğası gereği daha güvenlidir.

Önde gelen statik site oluşturucular da zengin özelliklere sahiptir ve bu, modern içerik yönetim sistemlerinin ayırt edici özellikleri olan teknoloji yığınlarına veda etmek için zorlayıcı bir argüman oluşturabilir.

Bir süredir bu sektörün içindeyseniz, Macromedia'nın (Adobe öncesi) Dreamweaver ürününü hatırlayabilirsiniz. Kitaplık öğeleri ve şablonları kavramını, özellikle birden çok web sayfasında tutarlılık oluşturmama nasıl izin verdiklerini sevdim. Eleventy söz konusu olduğunda, şablonlar, filtreler, kısa kodlar ve eklentiler kavramları yakın analoglardır. Tüm bu yolculuğa Smashing'in kurumsal JamStack'e dönüşümünü okuduktan sonra başladım. Ayrıca Mathias Biilmann ve Phil Hawksworth'un JAMstack'teki Modern Web Geliştirme adlı ücretsiz kitabını okudum ve kollarımı sıvayıp kendime ait bir şeyi dönüştürmeye hazır olduğumu biliyordum.

Neden Statik Site Oluşturucu Kullanmıyorsunuz?

Statik site oluşturucular biraz öğrenme eğrisi gerektirir. İçerik girmek için editoryal işlevleri kolayca devre dışı bırakamayacaksınız ve belirli kullanım durumları bir tanesini kullanmanızı engelleyebilir. Göstereceğim işlerin çoğu Markdown'da ve komut satırı aracılığıyla yapılır. Bununla birlikte, dinamik veri, e-ticaret, yorum yapma ve derecelendirme sistemleri ile birlikte statik site oluşturucuları kullanmak için birçok seçenek vardır.

Ayrıca tüm sitenizi bir kerede dönüştürmek zorunda değilsiniz. Karmaşık bir kurulumunuz varsa, küçük bir başlangıç ​​yapabilir ve kurumsal ölçekte bir şeyi çözmek için bir plan oluşturmadan önce statik site oluşturma hakkında ne hissettiğinizi görebilirsiniz. Ayrıca WordPress'i sınıfının en iyisi başsız içerik yönetim sistemi olarak kullanmaya devam edebilir ve WordPress içeriğini sunmak için bir SSG kullanabilirsiniz.

Statik Site Oluşturucu Olarak Eleveny'i Nasıl Seçtim?

Popüler statik site oluşturucuları için hızlı bir arama yapın ve başlamak için birçok harika seçenek bulacaksınız: Eleventy, Gatsby, Hugo ve Jekyll listemde önde gelen yarışmacılardı. Nasıl seçilir? Doğal olanı yaptım ve bazı arkadaşlara sordum. Eleveny, Twitter anketimde açık ara liderdi, ancak bunu perçinleyen şey, “@eleven_ty, ne yaptığını bilmeyen biri için çok cana yakın hissettiriyor” şeklindeki bir yorumdu. Hey bu benim! Ne yazık ki analiz felcine kapılabilirim. Bugün değil… bir ankete ve bir yoruma göre Eleventy'yi seçmek iyi hissettirdi. O zamandan beri, kodu saklamak için GitHub'ı ve dosyaları güvenli bir şekilde sunmak için Netlify'ı kullanarak dört WordPress sitesini Eleventy'ye dönüştürdüm. Bugün tam olarak bunu yapacağız, hadi kollarımızı sıvayalım ve dalalım!

Başlarken: İlk Siteyi Önyükleme

Eleveny, harika bir başlangıç ​​projeleri koleksiyonuna sahiptir. Dan Urbanowicz'in "Eleventy ile basit bir blog web sitesi oluşturmak ve onu Netlify'a yerleştirmek için bir şablon" olarak reklamı yapılan eleventy-netlify-boilerplate'i başlangıç ​​noktası olarak kullanacağız. Netlify CMS ve Netlify Formlarını içerir.” Başlamak için "Netlify için konuşlandır"ı tıklayın. Netlify'ı GitHub'a bağlamanız, deponuzu adlandırmanız (benimki smashing-eleventy-dawson olarak adlandırıyorum) ve ardından “Save & Deploy” istenecektir.

Bu yapıldığında, birkaç şey oldu:

1. Standart proje, GitHub hesabınıza eklendi.
2. Netlify, projeye dinamik bir ad atadı, oluşturdu ve dağıttı.
3. Netlify, projeyi Kimlik (CMS özelliklerini kullanmak istiyorsanız) ve Formlar (basit bir iletişim formu) kullanacak şekilde yapılandırdı.

Ekran görüntüsünün önerdiği gibi, proje için bir alan satın alabilir veya eşleyebilir ve ayrıca siteyi HTTPS ile güvence altına alabilirsiniz. Ev sahibim SSL için fahiş bir ücret talep ettiğinden, ikinci özellik benim için gerçekten zorlayıcı bir satış noktasıydı. Netlify'da ücretsizdir.

Sitem için daha uygun bir ad oluşturmak için Site Ayarları'nı ve ardından Site Adını Değiştir'i tıkladım. Jovial-goldberg-e9f7e9'u ne kadar sevsem de elizabeth-dawson-piano daha uygun. Sonuçta, dönüştürdüğümüz site bu! elizabeth-dawson-piano.netlify.app'i ziyaret ettiğimde, standart içeriği görüyorum. Mükemmel!

Yeni depoyu yerel makinemize indirelim, böylece siteyi özelleştirmeye başlayabiliriz. Bu proje için GitHub havuzum, dosyaları kopyalamak için Visual Studio Code'un terminalinde kullanabileceğim git klon komutunu veriyor:

• Git'i klonla →

Ardından, bağımlılıkları yerel olarak kurmak için standart kılavuzun BENİOKU dosyasında kalan talimatları takip eder, _data/metadata.json dosyasını projeyle eşleşecek şekilde düzenler ve projeyi yerel olarak çalıştırırız.

• npm install @11ty/eleventy
• npm install
• npx eleventy --serve --quiet

Bu son komutla Eleventy, localhost:8080 8080'de yerel geliştirme sitesini başlatır ve değişiklikleri izlemeye başlar.

WordPress Gönderilerini, Sayfalarını ve Görsellerini Koruma

Dönüşüm yaptığımız site, elizabethrdawson.wordpress.com adresindeki mevcut bir WordPress sitesidir. Site basit olsa da, mevcut içeriğin mümkün olduğunca çoğunu kullanmak harika olurdu. Kimse kopyalayıp yapıştırmayı bu kadar sevmez, değil mi? WordPress, dışa aktarma işlevini kullanmayı kolaylaştırır.

İçeriği Dışa Aktar bana site içeriğinin bir XML özünü içeren bir zip dosyası veriyor. Medya Kitaplığını Dışa Aktar bana sitenin resimlerinden oluşan bir zip dosyası veriyor. Bu alıştırma için model olarak kullanmayı seçtiğim site 3 sayfalık basit bir sitedir ve Wordpress.com'da barındırılmaktadır. Kendi kendini barındırıyorsanız, XML özünü almak için Araçlar > Dışa Aktar'a gidebilirsiniz, ancak ana makinenize bağlı olarak, görüntüleri indirmek için FTP kullanmanız gerekebilir.

XML dosyasını düzenleyicinizde açarsanız, size pek faydası olmayacaktır. Eleventy ile kullanacağımız dil olan Markdown'a bireysel gönderileri almanın bir yoluna ihtiyacımız var. Şansımıza, WordPress gönderilerini ve sayfalarını Markdown'a dönüştürmek için bir paket var. Bu depoyu makinenize klonlayın ve XML dosyasını aynı dizine koyun. Dizin listeniz şöyle görünmelidir:

XML'den gönderileri çıkarmak istiyorsanız, bu kutudan çıkar. Ancak örnek sitemiz üç sayfadan oluşuyor, bu yüzden küçük bir ayar yapmamız gerekiyor. parser.js 39. satırında, devam etmeden önce "post"u "page" olarak değiştirin.

wordpress-export-to-markdown markdown dizininde bir "npm kurulumu" yaptığınızdan emin olun, ardından "node index.js" girin ve komutları izleyin.

Bu süreç benim için üç dosya oluşturdu: about.md welcome.md contact.md . Her birinde, sayfanın başlığını ve tarihini ve XML'den ayıklanan içeriğin Markdown'ını açıklayan ön konu vardır. 'Ön madde' sizin için yeni bir terim olabilir ve “sayfalar” dizinindeki örnek .md dosyalarının üst kısmındaki bölüme bakarsanız, dosyanın üst kısmında bir veri bölümü görürsünüz. Eleventy, sitenizi özelleştirmenize yardımcı olacak çeşitli ön konuları destekler ve başlık ve tarih yalnızca başlangıçtır. Örnek sayfalarda, bunu ön konu bölümünde göreceksiniz:

 eleventyNavigation: key: Home order: 0

Bu söz dizimini kullanarak, sayfaların sitenin navigasyonuna otomatik olarak eklenmesini sağlayabilirsiniz. Bunu yeni sayfalarımla korumak istedim, bu yüzden sayfaların içeriğini kopyalayıp ana sayfa, iletişim ve hakkında mevcut ortak .md dosyalarına yapıştırdım. Örnek sitemizin şimdilik bir blogu olmayacağı için .md dosyalarını “posts” dizininden de siliyorum. Şimdi yerel önizleme sitem şuna benziyor, o yüzden oraya gidiyoruz!

Bu, güncellemeleri GitHub'a göndermek ve göndermek için iyi bir zaman gibi görünüyor. Güncellemeler yaptığımda birkaç şey oluyor. GitHub'dan güncellemelerin yapıldığı bildirildiğinde, Netlify derlemeyi çalıştırır ve canlı siteyi günceller. Dosyaları güncellerken ve kaydederken yerel olarak gerçekleşen işlemin aynısıdır: Eleveny, Markdown dosyalarını HTML sayfalarına dönüştürür. Aslında, _site dizininize yerel olarak bakarsanız, web sitenizin HTML sürümünü statik sunuma hazır olarak görürsünüz. Bu nedenle, taahhütte bulunduktan kısa bir süre sonra elizabeth-dawson-piano.netlify.app'e gittiğimde, yerel olarak gördüğüm güncellemeleri görüyorum.

Resim Ekleme

Orijinal sitedeki görüntüleri kullanacağız. .eleventy.js dosyasında, statik resim varlıklarının static/img klasörüne gitmesi gerektiğini göreceksiniz. Her sayfada bir kahraman resmi olacak ve işte ön konunun gerçekten iyi çalıştığı yer burası. Her sayfanın ön madde bölümünde, kahraman resmine bir referans ekleyeceğim:

 hero: `/static/img/performance.jpg`

Eleveny, sayfa düzenlerini _includes/layouts klasöründe tutar. base.njk tüm sayfa türleri tarafından kullanılır, bu yüzden bu kodu navigasyonun hemen altına ekleyeceğiz çünkü bu bizim kahraman resmimizi istediğimiz yer.

 {% if (hero) %} <img class="page-hero" src="{{ hero }}" alt="Hero image for {{ title }}" /> {% endif %}

Ayrıca, Elizabeth'in resmi için, hizalamak ve uygun dolguyu vermek için bir CSS sınıfı kullanarak Hakkında sayfasına bir resim etiketi ekledim. Şimdi taahhütte bulunmak ve tam olarak neyin değiştiğini görmek için iyi bir zaman.

Bir Eklentiyle Bir YouTube Oynatıcısını Gömme

Ana sayfada birkaç YouTube videosu var. Youtube'un gömme kodunu otomatik olarak oluşturmak için bir eklenti kullanalım. eleventy-plugin-youtube-embed bunun için harika bir seçenektir. Kurulum talimatları oldukça açık: paketi npm ile kurun ve ardından .eleventy.js dosyamıza ekleyin. Daha fazla değişiklik yapılmadan bu YouTube URL'leri gömülü oynatıcılara dönüştürülür. (bkz: taahhüt)

Koleksiyonları ve Filtreleri Kullanma

Bu site için bir bloga ihtiyacımız yok, ancak insanlara yaklaşan etkinlikler hakkında bilgi vermenin bir yoluna ihtiyacımız var. Etkinliklerimiz - tüm niyet ve amaçlar için - tıpkı blog gönderileri gibi olacak. Her birinin bir başlığı, açıklaması ve tarihi vardır.

Bu yeni koleksiyon tabanlı sayfayı oluşturmak için ihtiyacımız olan birkaç adım var:

• Sayfalar dizinimizde yeni bir events.md dosyası oluşturun.
• Gönderiler dizinimize birkaç etkinlik ekleyin. Bir tatil konseri, bir bahar konseri ve bir sonbahar resitali için .md dosyaları ekledim.
• Bu olayları bir koleksiyon olarak ele alabilmemiz için .eleventy.js bir koleksiyon tanımı oluşturun. Koleksiyon şu şekilde tanımlanır: gönderiler dizinindeki tüm Markdown dosyalarını toplarız ve ön maddede konumu belirtilmeyen her şeyi filtreleriz.

 eleventyConfig.addCollection("events", (collection) => collection.getFilteredByGlob("posts/*.md").filter( post => { return ( item.data.location ? post : false ); }) );

• Her olayı bir tablodaki bir girdi olarak gösteren events.md dosyamıza koleksiyona bir referans ekleyin. Bir koleksiyon üzerinde yineleme şuna benzer:

 <table> <thead> <tr> <th>Date</th> <th>Title</th> <th>Location</th> </tr> </thead> <tbody> {%- for post in collections.events -%} <tr> <td>{{ post.date }}</td> <td><a href="{{ post.url }}">{{ post.data.title }}</a></td> <td>{{ post.data.location }}</td> </tr> {%- endfor -%} </tbody> </table>

Ancak, tarih biçimlendirmemiz oldukça kötü görünüyor.

Neyse ki, standart .eleventy.js dosyası zaten readableDate başlıklı bir filtreye sahip. Markdown dosyalarındaki ve şablonlarındaki içerikte filtreleri kullanmak kolaydır:

 {{ post.date | readableDate }}

Şimdi, tarihlerimiz uygun şekilde biçimlendirildi! Eleventy'nin filtre belgeleri, çerçevede hangi filtrelerin mevcut olduğu ve kendi filtrelerinizi nasıl ekleyebileceğiniz konusunda daha derine iner. (bkz: taahhüt etmek)

Site Tasarımını CSS ile Parlatma

Tamam, şimdi oldukça sağlam bir site oluşturduk. Sayfalarımız, kahraman resimlerimiz, etkinlik listemiz ve iletişim formumuz var. Herhangi bir tema seçimiyle sınırlı değiliz, bu yüzden sitenin tasarımıyla ne istersek yapabiliriz… sınır gökyüzü! Sitenizi performanslı, duyarlı ve estetik açıdan hoş hale getirmek size kalmış. İşleri son taahhüdümüze getirmek için bazı stil ve biçimlendirme değişiklikleri yaptım.

Artık tüm sıkı çalışmalarımızı dünyaya anlatabiliriz. Bu siteyi yayınlayalım.

Siteyi Yayınlamak

Ama bekle. Zaten yayınlandı! GitHub'daki güncellemelerimizin otomatik olarak Netlify'a yayıldığı ve yeni, hızlı HTML'de yeniden oluşturulduğu bu güzel iş akışında başından beri çalışıyoruz. Güncellemeler git push kadar kolaydır. Netlify, git'teki değişiklikleri algılar, işaretlemeyi HTML'ye işler ve statik siteye hizmet eder. Özel bir alan adı için işiniz bittiğinde ve hazır olduğunuzda, Netlify mevcut alan adınızı ücretsiz olarak kullanmanıza izin verir. Özel etki alanınızla Netlify'ın ücretsiz HTTPS sertifikasından nasıl yararlanabileceğiniz dahil tüm ayrıntılar için Site Ayarları > Etki Alanı Yönetimi'ni ziyaret edin.

Gelişmiş: Görseller, İletişim Formları ve İçerik Yönetimi

Bu sadece birkaç resim içeren basit bir siteydi. Yine de daha karmaşık bir siteniz olabilir. Netlify'ın Büyük Ortam hizmeti, tam çözünürlüklü görüntüleri GitHub'a yüklemenize olanak tanır ve görüntüye bir işaretçiyi Büyük Ortamda saklar. Bu şekilde, GitHub deponuz görüntü verileriyle dolup taşmaz ve istek anında optimize edilmiş mahsuller ve boyutlar istemek için sitenize kolayca işaretleme ekleyebilirsiniz. Bunu kendi büyük sitelerimde denedim ve yanıt verme hızından ve kurulum kolaylığından gerçekten memnun kaldım.

Kazanım levhamızla birlikte yüklenen iletişim formunu hatırlıyor musunuz? Sadece çalışıyor. İletişim formunu gönderdiğinizde, Netlify'ın yönetim bölümünde gönderimleri göreceksiniz. Siteniz için “Formlar”ı seçin. Netlify'ı yeni bir form gönderimi aldığınızda size e-posta gönderecek şekilde yapılandırabilir ve ayrıca formunuzun koduna özel bir onay sayfası ekleyebilirsiniz. Örneğin, sitenizde /contact/success konumunda bir sayfa oluşturun ve ardından form etiketinizin içine ( form.njk içinde), form gönderildikten sonra kullanıcıları oraya yönlendirmek için action="/contact/success" ekleyin.

Standart ayrıca siteyi Netlify'ın içerik yöneticisiyle kullanılacak şekilde yapılandırır. Bunu teknik bilgisi olmayan bir kişi için iyi çalışacak şekilde yapılandırmak makalenin kapsamı dışındadır, ancak şablonlar tanımlayabilir ve Netlify'ın içerik yöneticisinde yapılan güncellemeleri GitHub'a geri senkronize edebilir ve sitenizin otomatik yeniden dağıtımlarını tetikleyebilirsiniz. Markdown'da güncellemeler yapma ve bunları GitHub'a gönderme iş akışı konusunda rahatsanız, bu yetenek muhtemelen ihtiyacınız olmayan bir şeydir.

• Son Dönüştürülmüş Web Sitesi (Sonuç)
• GitHub Deposu

Daha fazla okuma

Burada, bu eğitimde kullanılan kaynaklara ve daha derine inmek istiyorsanız daha gelişmiş bazı kavramlara bağlantılar verilmiştir.

• Sarah Drasner, “Smashing Magazine İçeriği Nasıl Yönetiyor: WordPress'ten JAMstack'e Geçiş”
• “JAMstack'te Modern Web Geliştirme,” Mathias Biilmann ve Phil Hawksworth
• "Eleventy, Daha Basit Bir Statik Site Oluşturucudur," Eleventy Docs
• "Başlangıç ​​​​Projeleri", Eleveny Docs
• "Büyük Medya Belgeleri", Netlify
• “Yapılandırma Seçenekleri,” Netlify CMS
• “WordPress Sitelerini Eleveny'e Çevirdikten Sonra Öğrendiğim 12 Şey,” Scott Dawson