Svelte ve Tailwind ile Kullanıma Hazır Web Sitesi Şablonu

Arka Plan

Her ne zaman bir iş fikri ortaya çıksa, neredeyse her zaman bir web sitesi oluşturmayı gerektirir. Bir ticaret veya uygulama fikri olsun, her zaman bir arka uç ile bir arayüz oluşturmam gerekiyor.

Bu, tüm iş fikirlerinin bir web sitesi gerektirdiği anlamına gelmez. Ancak, benim ortaya çıkardıklarım neredeyse her zaman gerektirir. Belki de bu, bu fikirlerin bana ilk bakışta ilginç görünmesinin nedenidir.

Bu yüzden, ben de yüksek frekansta, nispeten benzer yığınlarla (Svelte, Tailwind) web siteleri oluşturduğum için, bir şablon oluşturmaya karar verdim, böylece bir site oluşturmak istediğimde, sadece şablonu kullanabilirim. Bu, bir klasör oluşturma, bir git deposu başlatma, bir gezinti çubuğu ekleme, rotalar oluşturma vb. gibi web sitesi geliştirme işlemlerinde tekrarlayan adımlardan kaçınmama yardımcı olacaktır.

Yöntem

Burada, web sitesi oluştururken sürekli olarak bunları yazmak zorunda kalmamanız için temel unsurlar sağlayan basit bir Svelte & Tailwind web sitesi şablonu oluşturuyorum.

Klasör Yapısı

Yukarıdaki resimde bulunan ana klasör/dosyalar aşağıda listelenmiştir:

• .git: Sürüm kontrolü için git init ile oluşturulan klasör
• .svelte-kit: create app ile oluşturulan klasör
• node modules: Tüm kütüphaneleri yüklemek için npm install --legace-peer-deps kullanın. Bunlar bu klasörde görünecektir
• src: Bu, bir web sitesinin tüm öğelerinin (rotalar, resimler, bileşenler) bulunduğu yerdir. Bu klasöre daha sonra detaylı olarak inceleyeceğiz.
• static: HTML dosyasından başvurulan statik dosyaları saklar. Örn. web sitesi logosu.
• .env: Ortam değişkenlerini (ör. API anahtarları) saklar. Not: Kodu üretime taşıdığınızda, bu ortam değişkenlerini üretim ortamına eklemeniz gerekmektedir.
• .gitignore: Hangi dosyaların takip edilmeyeceğini git'e bildirir. Örn. .env, node_modules. ortam.
• .prettier__: Denetim ve biçimlendirme.
• netlify.toml: Web sitesini yayınlamak için netlify'i kullanıyorum ve bunu kullanmanızı şiddetle tavsiye ederim çünkü yapması çok kolaydır. Bu dosya, netlify'in üretimde sitenizin çalışan bir sürümünü oluşturmasına yardımcı olur.
• package__: Projeyi çalıştırmak için gerekli NPM modülleri.
• README.md: Siteniz hakkında kısa bir açıklama. Bu, GitHub'daki depo giriş sayfanızda görünür.
• svelte.config.js - vite.config.js: Proje üzerinde svelte ve vite'i çalıştırmak için dosyalar.
• tailwind.config.js - postcss.config.js: Web sitesinin biçimlendirilmesi için dosyalar.

Kaynaklar

Netlify'de barındırılan demo sitesine göz atabilirsiniz buradan. Bu web sitesi Adam Smith için oluşturulmuş olsa da, herhangi bir şeye dönüştürülebilir.

Şablon koduna buradan ulaşabilirsiniz.

İyi kodlamalar!