Yapay zekadan makale özeti
- Kısa
- Ayrıntılı
- Bu video, bir konuşmacının kendi web sitesi oluşturma sürecini adım adım anlattığı eğitim içeriğidir.
- Video, sıfırdan bir blog sitesi oluşturma sürecini ele almaktadır. İlk bölümde Next.js framework ve Tailwind CSS kurulumu gösterilirken, ikinci bölümde Tailwind JIT özelliği, GitHub'a proje yükleme, Gitignore dosyası oluşturma, Pratier kurulumu ve Versel platformunda proje deploy edilmesi anlatılmaktadır. Video serisi altı bölümden oluşacak olup, sonraki bölümlerde layout tasarımı, blog listesi, yorum kutusu entegrasyonu ve Redis veritabanı kullanımı gibi konular ele alınacaktır.
- 00:06Kendi Web Sitemizi Nasıl Yaparız
- Videoda kendi web sitemizi nasıl yapacağımız ve genel bir blok nasıl tasarlanacağı anlatılacak.
- Sıfırdan web sitesi yaparken basit bir ana sayfa ve blog yazılarının listelendiği, detay sayfalarına giriş yapılabilen bir sayfa gerekiyor.
- Web framework olarak Next.js, basit stillendirmeler için Tailwind CSS kullanılacak.
- 01:06MDX Formatı ve Yorum Sistemi
- Dinamik blog yazıları MDX formatında yazılacak, bu Markdown'ın sonuna "x" eklenerek elde edilen bir format.
- MDX formatı, Markdown'a React komponentlerinin uygulanmış hali olarak düşünülebilir ve blog yazılarına React komponentleri eklenebilir.
- Yorum sistemi için OutZero kullanılacak, bu sistem kullanıcıları doğrulayarak troll hesapları engelleyecek.
- 03:03Redis Database ve Yorum Yönetimi
- Yorumlar Appstash aracılığıyla ücretsiz olarak Redis database'i kullanılarak saklanacak.
- Appstash günlük 10.000 sorgu atabilen ücretsiz bir Redis database sunuyor.
- Yorumlar URL'ye göre key-value olarak Redis'e kaydedilecek ve kullanıcılar tekrar sayfayı ziyaret edince tüm yorumları görebilecekler.
- 04:51Proje Planı
- Web Store'da "next block with out zero ve ups" adında boş bir proje oluşturulmuş.
- Toplam altı video olacak: Next.js ve Tailwind kurulumu, layout, blog listesi, yorum kutusu entegrasyonu, Redis entegrasyonu ve yorumları listeleme.
- Her video kısa olacak ve izleyiciler ilgili kısımları direkt izleyebilecekler.
- 06:00Next.js ve Tailwind Kurulumu
- Proje için package.json dosyası oluşturulup Next.js, React ve React DOM bağımlılıkları eklendi.
- Pages klasörü altına index.js dosyası eklendi ve proje ayağa kaldırıldı.
- Tailwind CSS entegrasyonu için gerekli paketler kuruldu ve Tailwind'in kendi dosyaları oluşturuldu.
- 08:01Tailwind'in Projeye Eklenmesi
- Purge paketi eklendi ve Tailwind için gerekli klasörler belirlendi.
- Tailwind'in ana root'a eklenmesi için özel bir app.js dosyası oluşturuldu.
- Proje yeniden ayağa kaldırıldığında Tailwind'in reset CSS'i sayesinde fontlar serif olarak görüntülenmeye başladı.
- 09:39Tailwind'in Yeni Jit Özellikleri
- Tailwind'in yeni duyurduğu Tailwind Jit, Tailwind'in arka tarafta class nameleri tanımlaması için compile ederken yavaş olabileceğini belirtiyor.
- Jit, Tailwind'in browser'a yansıması bir iki saniye sürerken, milisaniyelere indiriyor.
- Jit'i kullanmak için sadece development bağımlılıklarını kurup, Git pluginlerindeki Tailwind satırını Jit olarak değiştirmek yeterli.
- 11:31Projeyi GitHub'a Yükleme
- Projeye Git init komutu ile Git başlatılıyor ve turuncu olanlar henüz GitHub'a gönderilmemiş dosyalar.
- Gitignore dosyası eklenerek git yollamamak istenen dosya veya klasörlerin pathleri belirleniyor.
- Pratier kod kalitesi için formatlama aracı kurulup, development bağımlılıklarına ekleniyor.
- 13:43GitHub'a Commit ve Etiketleme
- Tüm dosyalar ve dizinler hazırlandıktan sonra ilk commit yapılıyor ve kendi GitHub hesabına publish ediliyor.
- Projeye "video bir" etiketi eklenerek, farklı videoların kaynak zip dosyalarını indirirken etiketleme yapılıyor.
- Bu şekilde izleyiciler, hangi video izlediklerini kolayca görebilecekler.
- 14:55Versele'da Deploy Alma
- Versele'da yeni proje oluşturulup, GitHub'daki proje import ediliyor.
- Proje deploy edildiğinde önce GitHub'tan çekiliyor, sonra build işlemi yapılıyor.
- Build işlemi tamamlandıktan sonra Next klasörü CDN'lerine dağıtılıyor ve web sitesi aktif hale geliyor.
- 16:58Sonuç ve Kapanış
- Purge CSS ile statik CSS dosyası sadece kullanılan class name'ler ve reset CSS'i içeriyor.
- Sayfa hızlı ve hazır hale geliyor.
- Sonraki video layout konusunda olacak.