Ücretsiz Aylık Ücretle Yüksek Hızlı Web Sitesi Oluşturmak

Yüksek hızda bir web sitesi oluşturmak her zaman bir challenge olmuştur. özellikle de ücretsiz olarak. Ancak ben bunu başardım. WordPress sitesindeshared hosting kullandım ve aylık 15 dolar ödüyordum. Ayrıca her Salı günü bir eklenti güncellemesi yapıyordum ve Time to First Byte değerim çok yüksek oluyordu.

Sık kullanılan bir sorun var. Bir缓存 eklentisi kuruyorsunuz ve bu da başka bir yapılandırma eklentisi gerektiriyor. Ardından SEO eklentisi ile çatışmaya başlıyor. Sonuç olarak, üç eklenti bir işi kötü bir şekilde yapıyor ve Core Web Vitals skorunuz çok düşük oluyor.

Ben de bu sorunlardan bıktım ve her şeyi sıfırdan yeniden oluşturmaya karar verdim. Sonuç olarak, laserengraverexpert.com adlı bir lazer kazıma makinesi inceleme sitesi oluşturdum. Bu site Hugo 0.147.0 kullanarak oluşturuldu, Cloudflare Pages üzerinde barındırıldı ve yaklaşık 25 saniyede derleniyor. Ayrıca, hosting için aylık olarak hiçbir ücret ödemiyorum.

Tam Stack İnceleme

Aşağıdaki tabloda kullandığım tüm araçları ve maliyetleri görebilirsiniz.

| Katman | Araç / Maliyet | | --- | --- | | Statik Site Oluşturucu | Hugo 0.147.0 — Ücretsiz | | Barındırma + CDN | Cloudflare Pages ücretsiz katmanı — 0$/ay | | Analitik | Cloudflare Web Analitiği — 0$/ay | | Derleme Yapılandırması | wrangler.toml | | Görseller | WebP (kaynak dosyadan dönüştürülmüş) — Ücretsiz | | Alan Adı | Namecheap — ~10$/yıl | | Veritabanı | Yok | | Sunucu Çalışma Zamanı | Yok |

Toplam altyapı maliyeti: ~10$/yıl. Bu, sadece alan adı maliyetidir. Diğer tüm araçlar ücretsizdir.

Hugo Neden Seçildi

Bu, en çok zaman harcadığım soru oldu. Size dürüst bir cevap vereceğim, 'tüm araçlar farklı kullanım durumları için harika' gibi bir cevap vermeyeceğim.

• Next.js — Bunu düşündüm. Ekosistem mükemmel ve React'i biliyorum. Ancak Next.js uygulamalar için oluşturuldu. Statik dışa aktarma işlemi çalışıyor, ancak her zaman saf statik çıktı almak için çerçeveyi zorluyorsunuz. Derleme çıktısı, bir içerik sitesi için gerekli olandan daha ağır.

• Gatsby — 2019'da doğru cevap buydu. GraphQL veri katmanı güçlü, ancak benim için gereksiz bir yük. Derleme süreleri büyük sitelerde notoriously yavaşladı ve ekosistem parçalandı. Üretim sitesini buna bahis yapmak istemedim.

• Eleventy (11ty) — Bu, en yakın rakipti. Eleventy gerçekten mükemmel. JavaScript tüm şekilde, sıfır görüş, yüksek olarak bileşendir. Zaten Node ekosistemindeyseniz ve maksimum esneklik istiyorsanız, Eleventy sizin seçiminizdir. Kullanmaya çok yakındım.

• Neden Hugo kazandı: Hız. Web sitesi hızı değil — derleme hızı. Hugo derlemeleri milisaniyeler içinde ölçülür. Mevcut sitemin tüm içeriğiyle birlikte derlenmesi 400 milisaniyeden az sürüyor. Eleventy ile benzer bir site için 3-5 saniye gibi bir süre düşünüyordum. Şablonlar ve düzenler üzerinde iterasyon yaptığınızda bu fark geliştirme sırasında önemli bir fark yaratıyor.

• Hugo ayrıca tek bir ikilidir. Hiçbir node_modules. Hiçbir package.json. Hiçbir bağımlılık cehennemi. Tek bir ikili yüklersiniz ve çalışmaya başlar. Cloudflare Pages üzerinde bu, derleme ortamının temiz, yeniden üretilebilir ve hızlı olduğu anlamına gelir.

• Ticaret: Go şablonlama. Hugo'un şablon sözdizimi keskin kenarlara sahiptir — pipe sözdizimi, .context kapsamı ve parça işleme modeli insanları yanıltabilir. Öğrenme eğrisinin olmadığını iddia etmeyeceğim. Var. Ancak ödemeye değer.

Cloudflare Pages Kurulumu

Cloudflare hesabınız yoksa bir hesap oluşturun. GitHub deposunu bağlayın. Bunun özü budur, ancak birkaç özgüllük bilinmeye değer.

Cloudflare Pages panosunda:

• 'Proje oluşturun' → 'Git'e bağlan'a tıklayın
• Deposunu seçin
• Derleme komutunu ayarlayın: hugo --minify
• Derleme çıktı dizinini ayarlayın: public
• Çevre değişkeni ekleyin: HUGO_VERSION = 0.147.0

Ücretsiz katman size ayda 500 derleme sağlar. Makul bir yayın ritmine sahip bir içerik sitesi için bu limite asla ulaşmayacaksınız. Ayda 30'un üzerine çıkmadım.

Her bir ana dalına yapılan her push, bir derleme ve dağıtım tetiklenir. Her bir çekme isteği, değişiklikleri birleştirmeden önce gözden geçirmek için kendi URL'sine sahip bir önizleme dağıtımı alır.

wrangler.toml Yapılandırması — Tam İnceleme

Bu dosya, sitenizin nasıl derleneceği ve servis edileceği hakkında her şeyi kontrol eder.

[build] command = "hugo --minify" publish = "public" [build.environment] HUGO_VERSION = "0.147.0" [[headers]] for = "/*" [headers.values] X-Content-Type-Options = "nosniff" X-Frame-Options = "DENY" Referrer-Policy = "strict-origin-when-cross-origin" Permissions-Policy = "camera=(), microphone=(), geolocation=()" Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload" Content-Security-Policy = "default-src 'self'; script-src 'self' 'unsafe-inline' static.cloudflareinsights.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; font-src 'self'; connect-src 'self' cloudflareinsights.com; frame-ancestors 'none';"

Önbellek Stratejisi — Neden Değişmez Önbellekleme Bir Değişim Yaratan

max-age=31536000, tarayıcıların dosyaları bir yıl boyunca önbelleğe alması anlamına gelir. Değişmez, tarayıcıya dosyayı önbellekte tutması ve ağ turu yapmaması talimatını verir.

Açık soru: CSS'nizi güncellerseniz ne olur? İçerik adresli dosyalar kullanırsınız.

Gelecekte, daha da hızlı ve güvenli web siteleri oluşturmak için yeni teknolojileri ve araçları keşfetmeye devam edeceğim.