Hexo ve WordPress Kullanan Statik Site Üreticilerine Yönelik Bir Kılavuz

Statik site oluşturucular, şablonları statik HTML sayfalarında derleyen sistemlerdir. Kulağa verimli geliyorsa - evet, öyle. Sunucu işleme veya oluşturma yoktur, bu nedenle statik web siteleri çok hızlı ve hafif olma eğilimindedir, bu da size ve kullanıcılarınıza değerli zaman ve bant genişliğinden tasarruf sağlar. Bu artan verimlilik, daha düşük maliyetlere ve potansiyel olarak daha yüksek gelirlere yansır.

WordPress'i Optimize Etmekten Statik Olmaya

Verimli gelir oluşturuculardan bahsetmişken, WordPress akla geliyor. İnternetin yüzde 28'ine güç sağlar ve bir dizi eklenti, tema, API vb. tarafından desteklenen kapsamlı kullanıcı ve içerik yönetimi dahil olmak üzere birçok harika özelliğe sahip güçlü bir platformdur.

Sektörümüzdeki büyük oyuncular bile WordPress kullanıyor. Smashing Magazine ve CSS-Tricks gibi web siteleri, her iki durumda da önemli ölçüde özelleştirilmiş örnekler de olsa WordPress kullanır. Ancak, WordPress ile çalışmak, özellikle performans için özelleştirme ve optimizasyon yaparken sıkıcı bir görev olabilir.

2015 yılında küçük bir blog başlattım. İlk içgüdüm WordPress kullanmaktı. Zaten WordPress ile çalıştığım için bu bana hızlı bir başlangıç ​​yaptı. DigitalOcean'da sunucu olarak yeni bir droplet oluşturdum, Hosting Kontrol Paneli olarak Vesta'yı kurdum ve blog platformu olarak WordPress'i kurdum. Sonunda yepyeni bir WordPress teması tasarladım ve geliştirdim. Eksik olan tek şey içerikti.

O zamanlar bu harika editörü kullandığım için Atom hakkında bazı ipuçlarını paylaşmak istediğimi biliyordum. Bununla ilgili birkaç makale yayınladım ve bunları toplulukla paylaştım.

İlk başta, içeriğe çok fazla odaklandığım için performansa çok fazla dikkat etmedim. Bir süre sonra, bazı performans sorunları fark ettim. Google PageSpeed ​​Insights'taki puan berbattı, bu yüzden web sitemi düzeltmek ve optimize etmek için çok çalıştım ve neredeyse mükemmel bir 99/100 puan aldım:

• Nginx+Apache'den Nginx+PHP-FPM'ye geçtim.

• Hız ve koruma için CloudFlare kullandım.

• Görüntüleri barındırmak için Cloudinary kullandım.

• Temamı değiştirdim ve Critical CSS kullandım.

Tek uyarı, o sırada nasıl düzelteceğimi bilmediğim bir Google Analytics önbelleğe alma sorunu içindi.

Peki ya 99/100 veya 100/100 yine de istediğiniz performansı sağlayamazsa? Statik sayfa oluşturucuların mücadeleye girdiği yer burasıdır.

Statik Sayfa Oluşturucuları ve Hexo'yu Girin

Peki statik site oluşturucu nedir?

Adından da anlaşılacağı gibi, statik bir web sitesi oluşturucu, statik HTML dosyaları oluşturan bir sistemdir. Statik HTML dosyaları sunmak, anında sayfa oluşturmaktan çok daha hızlıdır. Sunucu oluşturma veya derleme yoktur, bu genellikle sayfa yüklemede gecikmeye neden olur.

Performans hakkında konuşurken, önbelleğe alma hakkında düşünmek gerekir. WordPress'i önbelleğe almak için birden fazla teknik olmasına rağmen, bu, statik dosyaları önbelleğe almaktan farklı olarak genellikle basit bir görev değildir. Önbelleğe alınmış dosyaların sunulması, sunucudan gerçek dosyaların sunulmasından daha performanslıdır ve web sitelerini yüklerken zaman kazandırabilir.

Bu yılın Haziran ayında, Smashing Magazine'den Vitaly Friedman, şehrimdeki bir atölyede JAMstack'i tanıttı. Hiç duymamıştım ve çok merak ettim. Seminer bittikten sonra bu yeni konsepti biraz inceledim ve ne kadar harika olduğunu anladım. Web sitemin bir WordPress'e ihtiyacı olmadığını fark ettim.

İlk adım, hangi statik sayfa oluşturucunun kullanılacağına karar vermekti. Kaç tane olduğunun farkında değildim. Hexo blog çerçevesini denemeye karar verdim. Netlify'a dağıtılabilir, WordPress'ten geçiş yapmak için bir eklentiye sahiptir ve sırasıyla Ruby ve Go'ya dayanan Jekyll ve Hugo'nun aksine aşina olduğum Node.js'yi kullanır. Ve daha sonra keşfettiğim gibi, hızla parlıyor.

WordPress'i Hexo'ya Taşıma

Hexo kurulumu olabildiğince basittir. npm kullanarak hexo -cli'yi global olarak kurun, hexo init komutunu çalıştırın, npm bağımlılıklarını kurun ve işte:

 npm i -g hexo-cli hexo init <blog-name> cd <blog-name> npm install

Geçişi yapmak için hexo-migrator-wordpress eklentisini yükleyin. Bu eklenti, kaynak olarak XML dosyalarını bekler. XML dosyaları, yönetim panelinde Araçlar -> Dışa Aktar -> Wordpress altında bulunan WordPress dışa aktarma aracı aracılığıyla dışa aktarılabilir. Son olarak, içe aktarmayı bitirmek için hexo move komutunu yazın.

 hexo migrate wordpress <source>

Geriye sadece sonucu kontrol etmek kalıyor. Sunucuyu başlatmak için hexo server komutunu çalıştırın ve verilen adreste tarayıcıyı açın.

 hexo server

Markdown ve Sınırlamaları

Hexo, Markdown'ı kutunun dışında destekler. Markdown, birçok kişinin README dosyalarını, yorumları ve gönderileri biçimlendirmek için kullandığı bir biçimlendirme dilidir. Ancak makalenizi yazmak için de kullanılabilir. Sözdizimi sezgiseldir ve öğrenmesi kolaydır.

Markdown'ın bir başka avantajı da temiz ve geçerli HTML oluşturmasıdır. Bu, geliştiricilerin blog makalelerini ve sayfalarını şekillendirmek için temiz ve sürdürülebilir CSS kuralları oluşturmasına olanak tanır.

Bir geliştiricinin hayatı asla kolay değildir. Beklenmedik şeylere zaman harcamamıza neden olabilecek sorunlarla sık sık karşılaşırız. Bu arada bir şeyler öğrenirsek, bu zamanı boşa harcamamış oluruz ve bu iyi bir şey. Aynısı bana da oldu. Derleme hatası olmadığı için her şeyin yolunda gittiğini düşündüm ama sonra bazı şeylerin beklendiği gibi çalışmadığını fark ettim.

Örneğin, Codepen demoları yüklenmedi. Bir Hexo eklentisi aradım ve buldum. Ne yazık ki, bu eklenti resmi değildi ve kabul edilemez HTML hataları üretti. Katkıda bulunmak ve sorunları çözmek istedim, ancak son çekme talebi bir buçuk yıldan fazla bir süredir çözülmedi. Depoyu çatallamanın, sorunları çözmenin ve eklentiyi herkesin kullanabilmesi için Hexo sayfasında yayınlamanın daha kolay olacağına karar verdim. Eklenti kabul edildi, içeriği güncelledim ve Codepen demoları bir cazibe gibi çalıştı.

CanIUse yerleştirmelerinde de benzer sorunlar oluştu. Artık bir Hexo eklentisinin nasıl oluşturulacağını bildiğime göre, bunu yapmamak için hiçbir mazeret yoktu. Cloudinary CDN'den yüklenen duyarlı görüntüler için hexo-cloudinary eklentim gibi hexo-caniuse eklentim de yayınlandı.

Yeniden Tasarım ve Optimizasyon

Web sitesinin tasarımı oldukça temeldir. Hexo, resmi web sitesinde bir avuç ücretsiz tema sunuyor, ancak Hexo sitem için benzersiz bir tema istedim. Belgeleri okuyup Hexo'yu nasıl özelleştireceğimi öğrendikten sonra sıfırdan orijinal bir tema geliştirmeye başladım.

Yeni şablonlar oluşturmak için şablonlama için EJS kullanmaya karar verdim. EJS ile hiç çalışmadığım için, bunu yeni şablon sözdizimini öğrenmek için bir şans olarak gördüm. EJS'den hoşlanmıyorsanız, Hexo, eklentiler aracılığıyla size Swig, Haml veya pug desteği sağlar.

Yeniden tasarım sürecinde performansa çok dikkat ettim. En iyi uygulamaları takip ederek statik web sitemizi daha da hızlandırabiliriz. JavaScript dosyalarını belgenin altına yerleştirmek ve Kritik CSS tekniğini kullanmak, hedef kitleniz için en iyi deneyimi oluşturur.

SEO optimizasyonu, Google gibi arama motorlarında blog görünürlüğü için çok önemlidir. Hexo, Açık Grafik verilerini eklemek için yerleşik bir yardımcıya sahiptir. Hexo, site ve tema yapılandırmasını depolamak için YAML dosyalarını kullanır. Site adını, açıklamayı ve çeşitli sosyal kimlikleri yapılandırmak için tema yapılandırma dosyasını kullandım.

Oluşturma işleminize Gulp veya Webpack eklemek her zaman yardımcı olur ve önerilir. CSS ve JavaScript dosyalarını küçültmek ve sıkıştırmak için Gulp'u kullandım ve her şey hazırdı. dağıtabilirdim.

netleştir

Netlify, çok hızlı performansa sahip web siteleri ve uygulamalar için barındırma sağlayan bir platformdur. Performanslı ve bakımı kolay web siteleri oluşturmak için kodu otomatikleştiren birleşik bir platform olarak pazarlamaktadır.

Sadece kodunuzu girin ve gerisini bize bırakın.

Beklediğiniz gibi, web sitesini yapılandırmak basittir:

1. Etki alanını ayarlayın.

2. DNS kayıtlarını değiştirin.

3. Derleme ve dağıtımı ayarlayın.

4. SSL'yi açın.

Her şey ayarlandığında, puanları görmek için Pingdom Web Sitesi Hız Testi, Web Sayfası Testi ve Testmysite.io dahil olmak üzere bir avuç temel test yaptım. Site her araçta en yüksek puanları aldığından sonuçlar mükemmeldi.

Bulut Parlaması

Mükemmel puanlara rağmen, web sitesini ek olarak ne kadar hızlandıracağını görmek için CloudFlare'i denemek istedim. CloudFlare ilk başta bunaltıcı olabilir, ancak nasıl kullanılacağını öğrenmek esastır. CloudFlare'i yapılandırdıktan sonra testleri yeniden yaptım ve sonuçlar daha da iyi oldu.

Son test Google PageSpeed ​​Insights oldu. Skor, hem mobil hem de masaüstü sürümleri için neredeyse %100'dü. Sorun, Google Analytics tarayıcısının önbelleğe alınmasıydı. Google Analytics için CloudFlare Uygulamasını kullanarak sorunu çözmeyi başardım.

Fiyatı ne kadar?

Hexo'yu Netlify'da CloudFlare ile kullanmanın hiçbir maliyeti yoktur.

Hexo açık kaynaklı bir platformdur, bu nedenle onu nasıl kullanmaya karar verirseniz verin ücretsizdir. Geniş bir topluluğa sahiptir ve StaticGen'e göre üçüncü en popüler açık kaynaklı statik sayfa oluşturucudur.

Netlify, barındırma hizmetimiz için bize harika seçenekler sunan açık bir plana sahiptir. Görüntüler, Cloudinary'nin açık planında da barındırılıyor. CloudFlare'in ücretsiz planı, zaten hızlı olan web sitenizi hızlandırabilecek çok sayıda kural yapılandırmamıza olanak tanır. Ayrıca, Google Analytics tarayıcı önbelleğe alma sorununu düzeltmemize de olanak tanır. Devlet tarafından sağlanan ücretsiz bir kişisel alan adını kullandığım için alan adı için de ödeme yapmadım.

Bu proje kurulumu bütçemi minimuma indirdi. Projeniz için daha gelişmiş özelliklere ihtiyacınız varsa, statik bir sayfa oluşturucu size yine de birkaç dolar kazandırabilir.

Önbelleğe alınmış dosyalara hizmet vermek, CPU ve bant genişliği kullanımının azalması anlamına gelir; bu da, daha az güçlü donanımla daha ucuz barındırma planlarını kullanabileceğiniz anlamına gelir. Sadece bu değil, web siteniz çok daha hızlı olacak, yani kullanıcılarınız hem mobil hem de masaüstü cihazlarda gezinmekten keyif alacak. Ayrıca, sayfa yükleme hızı Google Arama sıralamalarını etkileyebileceğinden, web siteniz daha üst sıralarda yer alacak ve daha fazla ziyaretçi kazanacaktır.

Tüm bunlar, bütçenizin bir kısmını başka bir yere, örneğin web sitenizi tanıtmaya veya biraz daha fazla gelir elde etmenize yardımcı olacak ek içerik oluşturmaya harcayabileceğiniz anlamına gelir.

Statik Site Üreticileri İçin Durum

WordPress'ten statik bir sayfa oluşturucuya geçiş yapmak basit bir iş değildir ve kesinlikle her WordPress kullanıcısının yapması gereken bir şey değildir. Ancak Hexo, eklentileri, mükemmel belgeleri ve basit bir API sayesinde bu geçişi nispeten ağrısız hale getirdi.

Ürününüzü statik bir çözüme geçirmek isteyip istemediğinize karar vermeden önce, içerik kısıtlamaları, Markdown öğrenme eğrisi ve sürüm kontrolü gibi statik sayfa oluşturucularla birlikte gelen sınırlamaların farkında olmanız gerekir.

Hexo'nun bir blog çerçevesi olduğunu da bilmelisiniz. Metin düzenleyici ve terminal kullanmayı bilen geliştiriciler ve teknoloji uzmanları için mükemmeldir. İçeriğinizi yönetmek için bir web arayüzü kullanmayı seviyorsanız, bu işlevi sağlayan bir eklenti de vardır. Adı hexo-admin ve oldukça popüler.

Halihazırda WordPress kullanıyorsanız, durup şu anda WordPress'in hangi özelliklerini kullandığınızı ve hangilerinin vazgeçilmez olduğunu düşünmelisiniz. Karmaşık bir içerik yapınız mı var? Kullanıcı yönetimini kullanıyor musunuz? WordPress örneğinizde çok fazla eklenti mi kullanıyorsunuz ve hepsi gerekli mi? Sitenizin performansından memnun musunuz?

Bu soruların çoğunun veya tümünün yanıtı hayır ise, web sitenizi statik bir sayfa oluşturucu ile güçlendirmeye hazırsınız demektir. Kullanım durumuna ve gereksinimlerinize bağlı olarak, statik sayfalar maliyeti en aza indirirken verimliliği en üst düzeye çıkarmaya yardımcı olabilir. Öte yandan, WordPress esnekliği talep ediyorsanız, muhtemelen böyle bir hareketi düşünmüyorsunuz bile.