Az Kodla Haftasonu Projesi: Landing Page Checklist
Şöyle bir baktım da son Medium postunun ardından dört ay geçmiş. Yazmaya değer bir şeyler buldum, geldim :)
Bu yazıda sizlere bir şeyler üretme hevesiyle başladığım hafta sonu projesini geliştirme sürecimden bahsettim. Günde 1–2 saat çalışarak 7–8 günde hayata geçirdiğim Landing Page Checklist projesini nasıl geliştirdiğimi kendi tarzımla anlatmaya çalıştım..
Aslında her şey 2018 yılında yazmaya başladığım Startup Bülten adlı yatırım blogu ile başladı. Yok yok o kadar geriden almayacağım merak etmeyin. Bu bültenin içeriklerini paylaştığım twitter adresi uzun süredir pasif konumdaydı. 2009 yılında açtığım twitter hesabım da olduğu için yok etmeye kıyamıyordum. Bu hesabını nasıl değerlendirsem diye düşünüyordum bir yandan da.
Derken beğendiğim girişimlerin web sayfalarını (bundan böyle landing page diyoruz) bu hesapta paylaşabilir miyim acaba diye düşündüm. Hem çok vaktimi almayacak hem de keyif aldığım karşılama sayfalarını (landing pages) kenara not etmiş olacaktım. Akılma yatmaya başladı..
Bir yandan da beğendiğim landing page örneklerini “Bir Yudum Kitap” misali -her gün bir landing page- olarak bir bülten haline getirmek de geldi aklıma. Benim için çok zor olmayacaktı; Twitter’da ileri zamanlı tweet atmak, Mailerlite ve alternatifi tüm araçlarla planlı mail göndermek mümkündü..
“Bu bülteni nasıl daha çok kişiye ulaştırırım 🤔” diye düşünürken bu projeyi yapmak geldi aklıma.
Diğer taraftan sevgili Barış ile birlikte Kasım 2020 gibi bir haftasonu projesine başlamıştık. İçimizdeki dijital ürün üretme aşkına yenik düşmüş; termini olmayan, sadece keyif aldığımızda çalışacağımız bir projeye başlamıştık. Yeni şeyler öğrenmenin ve kendimizi geliştirmenin en güzel yolunun kolları sıvayıp işe koyulmak olduğunu biliyorduk. Neyse bu başka bir yazının konusu; incelemek isteyenler için proje linkini bırakayım: Business Name Generator
Solda responsive’likten nasibini almamış Figma tasarımı, sağda ise Tailwind.css ile yaptığımız anasayfa ¯\_(ツ)_/¯
Bahsettiğimiz ürünü geliştirme için herşeyden önce bir yazılımcıya (aka. Hacker) ihtiyaç vardı; Barış yetenekli bir backend developer olarak bu eksiği hemen kapattı. Arayüzleri kim çizecekti ? Ben sketch’te çizebilirdim ama bunları da bir şekilde frontend’e aktarılması gerekiyordu ? Ben no-code araçları kullanma taraftarıydım ama Barış’ın da anlayabileceği temiz bir kod olması gerekiyordu. Barış’ın “Yaa sen yaparsın, nolcak” demesiyle başladık çalışmaya. Yine Barış’ın önerileriyle Tailwind ve Chakra UI’a ufaktan bakmaya Adam Wathan videoalırını izlemeye başladım.
Tabi ben Tailwind’e bakayım dedim ama bir yandan da istiyorum HTML, CSS’e ufaktan gireyim, güzelce öğreneyim! Kolaya kaçmak için nocode araçlarına da bakıyorum göz ucuyla; Webflow nasıl olur, code-export mümkün ama bizim işimizi görebilir mi derken günlük Product Hunt ziyaretlerimde adeta benim için yaratılmış ürünü buldum. Dedim oldu bu iş. 🤟🏻
“Meşgul geliştiriciler için online editör” demişler ama benim gibi yazılımcı-geliştirici olmayanlar için de çok iyi bir deneyim sunuyor Tailwind.build. Hazır blokları sürükleyip sağ tarafa bırakarak sayfaları oluşturabilmek çok konforlu ve kolay. Hele ki “Export Project” butonuna tıkladığınızda size config.js, main.js, README.md, index.pug, robots.txt, css elementlerini tek bir klasör içerisinde veriyor olması… İşte bu özellik tam yazılımcı olmayanlara göre 👏🏻👏🏻👏🏻
Tailwind.build yeni adıyla shuffle.dev ücretsiz olarak proje oluşturup çıktı almanıza izin veriyor. Siz de sayfasını ziyaret ederek deneyebilirsiniz.
Ben tailwind.build ile uğraşırken benzer bir ürün daha çıktı: Tails. Arayüz olarak göze daha hoş gelse de sonradan mobil-uyumluluk konusunda tailwind.builde’e göre geriden geldiğine tanık oldum. Tails’ten kopyaladığım bloklar, mobilde düzgün görünsün diye uğraşırken kendimi daha da geliştirdim sanırım :)
Shuffle’ın aksine Tails config.js, main.js, README.md gibi dosyaları vermiyor. Sadece HTML kodunu veriyor size. Suffle.dev bu konuda ve mobil uyumlu blokları ile biraz daha önde bana sorarsanız. Tabi ben ikisinin nimetlerinden de faydalandım.
Amma uzun giriş olmuş be! Uzun zamandır yazmayınca tabii.. Toparlıyorum (:
Bu araçların en güzel tarafı ürettiğiniz bloğu editlerken gide-gele HTML ve CSS’i farketmeden kavrıyor oluşunuz. Az biraz da altyapınız varsa tailwind ile statik web sayfalar, landing page’ler geliştirmek çok kolay. Ortaya göze hoş gelen, modern ve seo-dostu sayfalar çıkması da ayrıca motive ediyor insanı.
-Lan şaka maka ben de kod yazıyorum! Dur bi çekeyim kendimi 😎
-Abi yok ya, ekranda kod var ama bi bilsen o kod oraya nasıl geldi 🙂
Benim gibi yazılımcı olmayan birisinin tek başına bu tarz işler çıkarabilmesine imkan veren tüm no-code, low-code araçlarına selam olsun.
Hosting, Deployment | Siteyi nereye yüklüyoruz ?
Burayı çok uzatmayacağım zaten Landing Page Checklist’te araçları verdim.
Öncelikle yukarda bahsettiğim araçlarla ürettiğimiz proje dosyasına sahip olmamız lazım. Sonra usulca Github Desktop’ı bilgisayarımıza indiriyoruz. Ya da elimizdeki klasörü webden Github’a yüklüyoruz.
Ardından Vercel, Netlify, Render, Cloudlflare Pages ile artık canınız hangisini çekiyorsa hesap açıyorsunuz ve Githuba bağlıyorsunuz. Üstteki komutları takip edince sitenizi ücretsiz olarak barındırıyorsunuz. Zor değil biraz araştırınca ne kadar kolay olduğunu görüyorsunuz. Adem Abi anlatmış herzamanki gibi tane tane; izleyin :)
Bu tarz araçlar olmasa bu haftasonu projesi çıkar mıydı emin değilim. Netlify’ı yıllar önce Onur Çevik kardeşimden duymuştum ama bana gelmez diye bakmadım doğru düzgün. İşte bunlar hep ön yargı.
Landing Page Checklist
Siteyi hayata geçirme adımlarım yukarıda anlattığım gibi gerçekleşti. Aşağı yukarı 7 günde kendimi zorlamadan, haftasonları ve akşamları çay eşliğinde şimdiki haline geldi. Tamamen kendim kodladım diyemem elbette, tailwind builder araçlarından da faydalandım.
Tailwind.css + Vercel + bol bol .svg ile ortaya çıkan sonuç bu. Purge olayını tam çözemedim çözsem daha da hızlanacak hergele :D
Landing Page hazırlamayla ilgili bir kürasyon yapmamın sebebi ise bu konuda bir ciddi ihtiyaç olması. Sadece Landing Page ile bile yapılabilecek o kadar çok test olmasına rağmen girişimciler tarafından yeterince hatta hiç önemsenmediğini gördük. Landing Page’i, web sitesi olmayan her girişimciye tek tek bu araçları anlatmak yerine buraya yönlendirmek herkese zaman kazandıracak. (yani öyle olur diye umuyorum)
Hatta sevgili Murat Tortopoğlu ile birlikte bir webinar da düzenledik bu konuyla ilgili. Webinara gelen ilgiyi de görünce hız verdim bu projeye. “Neden Karşılama Sayfamız Olmalı” sorusunu uzun uzun yanıtladı Murat Hoca.
Evet, yazının sonuna geliyoruz. Özetlemem gereklirse landingpage.fyi ve @landingcool günlük landing page’lerin paylaşılacağı ingilizce bir newsletter olacak. Landing Page Checklist ise Landing Page yapmak isteyenleri adım adım yönlendiren, gerekli araçların derlendiği bir sayfa olacak; oldu bile.
Buraya kadar okuduğunuz için teşekkür ederim. Landing page ya da herhangi bir websitesi yapacak herkesin ihtiyacı olacak araçları belirli bir süzgeçten geçirerek bir araya getirmeye çalıştım. İhitiyaç duyan herkese faydalı olur umarım. 🦄
Arkadaşlarınızla paylaşmaya çekinmeyin lütfen, paylaş butonu için de az uğraşmadım, değmesin mi 😅 🙌
Product Hunt
1, 2 hafta içerisinde de bir Product Hunt lansmanı planlıyorum. Ufak tefek güncelemeler yapmam, PH tanıtım materyallerini hazırlamam gerekiyor. Lansman günü desteklerinizi bekliyorum ✨✨
Lansman günü haber ver diyenleri şöyle alalım 📲
Son olarak da Barış’ın benimle paylaştığı kısa kliple bitirmek istiyorum.
Sevgiler, selamlar herkese.
