Beş Komutla Yayında: Yapay Zekâyla Fitness Sitesi Kurmak ve Barındırmak

Profesyonel site genelde pahalı ve yavaş diye satılır, oysa bu kurulum aksini somut bir demoyla savunuyor: yapay zekâlı bir kod aracında beş aşamalı komutla dizilen eksiksiz bir fitness markası sitesi. Sunucu React Vite yığını , statik üretim derlemesi fikri ve paylaşımlı barındırma hedefini en başta söylüyor, böylece izleyici daha düzen belirmeden bitiş çizgisini biliyor. vite.dev kılavuzlarına göre bu statik çıktı ucuz barındırmanın en iyi sunduğu şeydir; bu da tüm akışı bugünkü düzen işi ve asla sunucu derdi yok çerçevesine oturtur.

Önce plan seçimi

Barındırma seçimi gürültülü gelir çünkü her sağlayıcı aynı anda başka limitler bağırır, bu yüzden video alanı hızlı NVMe depolamalı, sayaçsız bant genişlikli, ücretsiz SSL sertifikalı ve gelişmiş panelli tek bir paylaşımlı Pro seçeneğe indirger. Bu ayrıntılar önemlidir çünkü bitmiş site çalışan bir sunucu değil sade dosyalardır, planın da onları hızlı sunup büyüme payı bırakması yeter. Bu bölüm hosting.com plan sayfalarına yaslanır; dürüst okuma hosting.com tarafının statik yüklemelere uygun olduğudur, ancak ekrandaki indirim kodu önerinin tam bağımsız olmadığını gösterir.

Temel komut en yüksek kaldıraçlı işi yapar: Tailwind uyumlu React Vite TypeScript projesi, panel için bölü çizgili taban yolu, bileşen yapısı, yumuşak kaydırmalı bağlantılı gezinme çubuğu ve krem, sıcak füme ile altın renklerde tam ekran karşılama ister. Yalnızca gezinme ve karşılama kurulur, fotoğrafın geleceği yerde koyu bir yer tutucu durur. Bu tutumluluk bilinçlidir, çünkü erken renk ve yazıtipi kararları sonraki her bölüme yansır; erken sabitlemek beş bileşeni iki kez tasarlatmaktan kurtarır.

İçerik bölümleri sırayla

Tarz kilitlenince ikinci komut kişisel antrenman, beslenme koçluğu ve toparlanma için kısa açıklamalı ve altın detay bağlantılı üç kartlık hizmet dizisiyle stüdyo anlatısının yanına füme yer tutuculu iki sütunlu hikâye bölümü ekler. Bileşenler kahramanın altına iner, eski işe dokunmaz; sayfa bir anda ziyaretçinin ilk sorduğu iki soruyu yanıtlar: ne sunuluyor ve arkasında kim var. Aynı boşluk ve yazıtipi burada korunduğu için büyüme üst üste yığılmış değil tasarlanmış durur.

İkna sıfatla değil kanıtla olur, bu yüzden sonra sosyal kanıt gelir. Üçüncü komut alıntı, isim ve sonuçlu üç müşteri kartı, ardından hâlâ füme yer tutuculu altılı galeri ekler. Sunucu fotoğraf doldurmadan önce okunabilirlik, sıkışıklık ve ızgara ritmini denetler; sıra doğrudur, çünkü boş kutularla nefes alan düzen gerçek fotoğrafla da nefes alır. Sayfa böylece metni yoğun bölgelerle görsel bölgeleri dengeler.

Form ve üstveri ilgiyi iletişime ve bulunabilirliğe çevirir. Dördüncü komut ortalı başlıklı, ad, e-posta, telefon ve ileti alanlı, uyumlu gönder düğmeli iletişim bölümü ekler; index.html içine başlık, açıklama, Open Graph etiketleri ve geçici standart bağlantı işler. Form değerleri yalnızca React durumunda tutulur, yani aslında hiçbir şey iletilmez; bu sınırı açık söylemek gerekir. Arama motorları ve sosyal ağlar önce bu başlık bölümünü okur; ogp.me belirtimi de paylaşımda bağlantı önizlemesinin görünümüne bu dört sosyal etiketin karar verdiğini açıklar.

Görseller ve küçük ekranlar sitenin bitmiş hissettirip hissettirmediğine karar verir. Beşinci komut karşılama, hikâye ve galerideki her yer tutucuyu uzak Unsplash görselleriyle değiştirir, sonra tüm düzeni 375 piksel genişliğe sıkılaştırır: katlanır hamburger menü, üst üste dizilen kartlar, metnin üstüne alınan görsel, iki sütunlu galeri ve sade bir altbilgi. Uzak Unsplash dosyalarına doğrudan atıf proje klasörünü yalın tutar, ancak unsplash sıcak bağlantı kılavuzu erişilebilirlik ve görüntülenme sayımının doğru dosya adreslerine bağlı olduğunu uyarır. Mobil turda da klasik arıza noktaları denetlenir: boşluk, görsel boyutu, dizilim ve gezinme davranışı.

Kaynak dosyalardan canlı alana

Geliştirme dosyaları olduğu gibi yayına çıkamaz, bu yüzden sonraki adım onları derler. Yardımcı üretim derlemesini aynı kod oturumunda çalıştırır; karma adlı küçültülmüş betik ve stil paketleriyle derlenmiş index.html içeren bir dist klasörü üretirken kaynak dosyaları, TypeScript kökenleri ve ağır modülleri dışarıda bırakır. Temizliğin amacı budur: yükleme küçük kalır, sunucu yalnızca tarayıcının gereksinimini alır. vite.dev derleme kılavuzu da bu sözleşmeyi anlatır; giriş dosyası ve varlıklar klasörü konuşlandırılabilir birimi oluşturur.

Konuşlandırma kısmı ferahlatıcı biçimde sıkıcıdır: panele girilir, FTP alanı açılır ve dist içindeki her şey klasörün kendisi değil içindekiler olarak public_html köküne kopyalanır, böylece index.html alan adının beklediği yerde durur. Sade dosyalar için arşiv açmaya ve sunucu ayarı yapmaya gerek yoktur; tek sayfa yönlendirme uç durumları için küçük bir yönlendirme dosyası yeter. tailwindcss.com responsive belgeleri bu adımın düzeni neden nadiren bozduğunu açıklar: kırılımlar zaten sınıflarda yaşar, canlı sunucunun yalnızca aynı baytları vermesi gerekir.

Kapanış denetimi demoyla teslimatı ayırır. Sunucu gerçek alan adını açar, karşılamadan altbilgiye kaydırır, yazıtipi, renk ve boşlukların yerel önizlemeyle aynı olduğunu doğrular, yumuşak kaydırmanın derlemeden sağ çıktığını görmek için gezinme bağlantılarını tıklar, sonra turu telefon görünümünde yineler. İletişim formu gösterilir ama gönderim olarak sınanmaz, çünkü önyüz yer tutucusu olarak kalır. Bu dürüst sınır, doğrulanmış hosting.com davranışı ve vite.dev çıktı kurallarıyla birleşince tekrarlanabilir bir yol bırakır: beş komut, tek derleme komutu, tek yükleme ve içeriğini herkesin kopyalayabileceği bir işletme sitesi.