Tembel Programcının Kişisel Web Sitesini Koruma Kılavuzu

Birçok geliştiricinin ya kişisel bir web sitesi vardır ya da sahip olmak ister.

Herhangi bir kodlama becerisi olmadan güzel bir web sitesi oluşturmak için pek çok harika seçenek olsa da, biz yazılım geliştiricileriyiz, bu nedenle becerilerimizi sergilemek ve sıfırdan bir şeyler oluşturmak istiyoruz.

Web sitesini kodlamak bir şeydir ve bunu 1-2 gün içinde tamamlayabilirsiniz. Ancak web siteniz yayına girdikten sonra kullanılabilir, güncel ve güvenli olduğundan emin olmak için onu korumanız gerekir.

Bu nedenle aşağıda, 10 kolay adımda minimum çabayla kişisel bir web sitesinin nasıl oluşturulacağına ve bakımının yapılacağına bir göz atacağız. Çünkü kodlamayı sevsek de bilgisayardan uzakta vakit geçirmeyi de seviyoruz. 🌳🤸🍝

Örnek olarak yakın zamanda React'ta yeniden oluşturduğum web sitemi kullanacağım. Kaynak kodunu GitHub depomda bulabilirsiniz.

Aşağıdaki ipuçları ve püf noktaları, yalnızca ön uç kısımdan oluşan son derece basit, statik bir web sitesi olduğunu varsayar. Ancak bu kavramları, arka uç, veritabanı veya diğer altyapı parçaları dahil olmak üzere daha karmaşık projelere kolaylıkla genişletebilirsiniz.

Bahsedilen teknolojilerin hiçbirinin ayrıntısına girmeyeceğiz, bunun yerine teknolojiden bağımsız kalması için üst düzey bir genel bakış sunacağız.

1. Bir Depo Kurun

GitHub veya GitLab gibi bir geliştirme platformu seçin ve yeni, boş bir depo oluşturun. Topluluğun kodunuzla neler yapabileceklerini bilmesi için bir lisans ve README eklediğinizden emin olun.

2. Bir JS Çerçevesi Seçin

Web sitenizi oluşturmak için kullanmak üzere React, Vue veya Svelte gibi bir JavaScript çerçevesi veya kitaplığı seçin. Veya yapmayın ve denemek istediğiniz bir şeyse Vanilla HTML ve JavaScript ile devam edin.

Hangi çerçeveyi seçeceğinizi seçerken en önemli şey, bunun üzerinde çalışmaktan keyif alacağınız bir şey olmasıdır.

Bu sizin web sitenizdir ve istediğiniz araçları kullanabilirsiniz. Zaten bildiğiniz ve beğendiğiniz bir şeyle gidebilir veya merak ettiğiniz tamamen yeni bir şeyi deneyebilirsiniz.

İlk kişisel ana sayfamı Vue.js'de oluşturdum. Yaklaşık bir yıl sonra onu React'ta yeniden oluşturdum çünkü daha fazla uygulamalı React deneyimi edinmek ve bazı React kütüphanelerini denemek istedim.

Bazı ortak kodlar oluşturmak için JS çerçevenizin oluşturma araçlarını kullanın ve localhost'ta sunulan basit bir Merhaba Dünya tarzı örnek alın.

3. Bir Kullanıcı Arayüzü Bileşen Kitaplığı Seçin

Bu adım isteğe bağlıdır, ancak burada çabayı minimumda tutmaktan bahsettiğimiz için, projenize Material UI veya Bootstrap gibi bir UI bileşen kütüphanesi eklemenizi tavsiye ederim. Web sitem için Chakra kullanıcı arayüzünü seçtim.

Bu kitaplıklar, bir dizi kullanıcı arayüzü bileşeninin yanı sıra düzen ve stil yardımcı programlarıyla birlikte gelir ve süper hızlı oluşturmanıza olanak tanır.

Görsel olarak çekici bulduğunuz, birçok bileşen içeren ve kolayca özelleştirilebilen, iyi belgelenmiş bir bileşen kitaplığı seçtiğinizden emin olun. Web sitenizdeki kitaplığın görünümünü özelleştirmek için yazı tipleri ve renk şemalarıyla oynamak eğlenceli olabilir. 🎨

4. Süper Basit Bir Şey Oluşturun

Ana sayfanızda görüntülemek istediğiniz bilgi parçalarını düşünün ve ardından kullanıcı arayüzü bileşen kitaplığınızdaki bileşenleri kullanarak bir şeyler oluşturun. Fazla düşünmeyin.

Artık asıl amaç bir şeyi hızlı bir şekilde hayata geçirmektir ve Voltaire'in zaten bildiği gibi mükemmellik iyinin düşmanıdır.

Söyleyecek çok şeyiniz ve web sitenizde neleri göstereceğinize dair birçok fikriniz varsa, bu harika! Devam edin ve oluşturun, ancak önce içeriğinizi nasıl düzenleyeceğinize ilişkin bir plan yapın - yönlendirmeyi, farklı görünümleri, bölümleri, düzeni, gezinmeyi vb. düşünün.

Ama eğer siz de benim gibiyseniz, bu noktada kendinize ana sayfanıza ne koymanız gerektiğini ve neden bir tane oluşturmanız gerektiğini sorabilirsiniz çünkü KİMİN UMURUNDA?! 😳

Duygularınız tamamen geçerli, ancak size şunu söyleyeyim, çevrimiçi ortamda var olmak için kimsenin iznine veya süslü içeriğe ihtiyacınız yok.

Bunu son derece basit tutun ve ziyaretçilerle (internet erişimi olan herhangi biri olabilir - bunu aklınızda bulundurun) kendinizle ilgili rahatça paylaşabileceğiniz bazı şeyleri paylaşın.

Web sitem için kendimle ilgili bir resim ve kısa açıklama, teknoloji yığınımın bir listesi, beğendiğim bazı şeyler ve birkaç kitap önerisiyle bunu oldukça minimum düzeyde tuttum. 📚 Ayrıca LinkedIn ve GitHub'uma bağlantılar da ekledim.

5. Eğlenceli Bir Şey Ekleyin

4. Adımda son derece basit bir şey oluşturduk, ancak basit olması sıkıcı anlamına gelmemelidir. O halde şimdi etkileşime geçelim. 🚀

Web sitenizi ziyaret etmeyi daha eğlenceli ve ilgi çekici hale getirmenin bazı kolay yollarını düşünmeye çalışın. Bu, animasyonlar, kullanıcı etkileşimleri veya renk şeması değişiklikleri gibi şeyleri içerebilir. Yine de tekerleği yeniden icat etmeyin.

Ne yapacağınıza dair bir fikriniz varsa, büyük olasılıkla tam olarak bunu yapan bir npm paketi zaten vardır.

Gezinme çubuğu için bir kaydırma animasyonu, güzel bir geçişle karanlık ve aydınlık mod arasında geçiş yapmak için bir düğme ve kullanarak sürpriz bir konfeti partisi başlatan bir simge düğmesi ekledim.

tepki-konfeti .

İşte bu kadar, kendinize bir web sitesi kurdunuz! 🥳 Şimdi onu nasıl dağıtacağımızı ve sürdüreceğimizi görelim.

6. Dağıtın

Netlify, Vercel veya GitHub Pages gibi web sitenizi internete tamamen ücretsiz olarak nasıl dağıtacağınıza dair birçok seçenek vardır.

Tam adımlar seçtiğiniz sağlayıcıya bağlı olacaktır; bu nedenle web siteniz bir URL altında yayına girene kadar kılavuzları izleyin.

Netlify'ı kullandım ve kurulumunun inanılmaz derecede kolay olduğunu gördüm.

İsteğe bağlı bir adım olarak, özel bir alan adı satın almaya ve aldığınız rastgele URL'yi değiştirmek için bunu sağlayıcınızın DNS'sine bağlamaya karar verebilirsiniz. Bunu yapmak zorunda değilsiniz, ancak özel bir alan adının hoş bir dokunuş olduğunu düşünüyorum ve bir alan adı satın almanın maliyeti yıllık 10$'dan fazla olmamalıdır.

7. CI/CD'yi Kurun

Artık web siteniz internette yayında olduğuna göre, gelecekteki taahhütlerle yanlışlıkla bozmadığınızdan emin olmak istiyorsunuz. Ayrıca main şubenizin en son sürümünü otomatik olarak dağıtmak istiyorsunuz.

Geliştirme platformunuz zaten GitHub Actions veya GitLab CI/CD gibi yerleşik CI/CD araçlarıyla birlikte gelebilir.

Depom GitHub'da yaşadığı için GitHub Actions'ı kullanıyorum.

Sürekli Entegrasyon için, her Çekme İsteği ve main şubeye yapılan her birleştirme için bazı otomatik kontroller ayarlayabilirsiniz. Bu, astarlama ve biçimlendirme veya birim testleri gibi kontrolleri içerebilir.

Ayrıca birçok şablon mevcut; örneğin, CodeQL ile güvenlik açıklarını keşfetmek için önceden oluşturulmuş bir GitHub Action kullanıyorum.

Sürekli Dağıtım için, tüm kontroller tamamlandıktan sonra her main aktarımda çalışacak kendi dağıtım komut dosyanızı oluşturabilirsiniz. Ancak 6. Adımda seçtiğiniz barındırma sağlayıcısına bağlı olarak hiçbir şey yapmanız gerekmeyebilir.

Örneğin Netlify, GitHub ile güzel bir şekilde bütünleşir, böylece main şube otomatik olarak dağıtılır.

8. Bağımlılıklarınızı Güncel Tutmak için Dependabot Kullanın

Bir web sitesi oluşturduk, onu yayına aldık ve şimdi tek yapmak istediğimiz sakinleşmek. Ancak JS ekosistemi ve güvenlik açıkları hızla gelişiyor.

Uygulamamızı güvende tutmak için bağımlılıklarımızın güncel olduğundan emin olmak istiyoruz, ancak npm bağımlılık yönetimi sancılı olabilir ve kesinlikle her gün güncellemeleri kontrol etmek istemiyoruz.

Neyse ki, Dependabot adında bizim için tüm bunları halledebilecek harika küçük bir araç var. 🤖 Dependabot, GitHub tarafından otomatik bağımlılık güncellemeleri için oluşturulmuş bir araçtır. Artık GitLab için de bir sürüm mevcut.

Tek yapmanız gereken bir dependabot.yml dosyası eklemek; kullandığınız paketlerin yeni bir sürümü mevcut olduğunda GitHub otomatik olarak Çekme İstekleri oluşturacaktır. YAML dosyasında Dependabot'u, örneğin PR'ler için Atanan'ı ve maksimum açık PR sayısını ayarlamak için yapılandırabilirsiniz.

7. Adımda PR'ler için bazı otomatik kontroller ayarladığımızdan, bunlar her Dependabot PR'de çalışacaktır ve yeni bir sürümün web sitemizi bozmayacağından emin olabiliriz.

Depo güvenliği ayarlarında, Dependabot'u bağımlılıklarınızdaki herhangi bir güvenlik açığı konusunda sizi uyaracak şekilde de yapılandırabilirsiniz.

9. Erişilebilirlik Sorunlarını Kontrol Edin

Erişilebilirlik o kadar tuhaf bir konudur ki, bir web sitesinin erişilebilirliğini iyileştirme konusunda çok önemli sonuçlar olmasına rağmen çok önemlidir, ancak sıklıkla ihmal edilir.

Bir JS çerçevesi ve bir kullanıcı arayüzü bileşen kitaplığı kullanıyorsanız erişilebilirlik puanınız tamamen kötü olmamalıdır. Özellikle özel yazı tipleri veya renk şemaları eklediyseniz muhtemelen hala geliştirilebilir.

Potansiyel iyileştirmeleri keşfetmek için Chrome Geliştirme Araçları'nda Lighthouse gibi bir aracı çalıştırabilirsiniz. Lighthouse sizin için bir rapor oluşturacak ve erişilebilirliği artırmak için değişiklikler önerecektir.

Yazı tipi boyutunu artırmak, metin ile arka plan arasındaki kontrastı değiştirmek veya DOM'daki HTML öğelerinin sırasını yeniden düzenlemek gibi bu önerilerin uygulanması genellikle kolaydır.

Lighthouse ayrıca performans, en iyi uygulamalar ve SEO için raporlar oluşturabilir. 🆒

10. Web Sitenize Ping Atmak için bir Cron işi çalıştırın

Web sitemi yayına aldıktan sonra günde en az bir kez hâlâ orada olup olmadığını kontrol etme isteği duydum. 🕵️‍♀️

İlk başta, web sitemin hâlâ kullanılabilir olduğunu her gördüğümde mutlu oluyordum ama sonra hızla sıkıcı olmaya başladı.

Web siteniz herhangi bir nedenle kapanırsa otomatik olarak bilgilendirileceğinizden emin olmak için, web sitenizin URL'sine düzenli aralıklarla ping gönderen bir cron işi ayarlayabilirsiniz.

Projeniz bir arka uç ve veritabanı içeriyorsa, örneğin API'nizde bazı GET isteklerini yürüten bazı temel duman testleri de ayarlayabilirsiniz.

Benim durumumda, günde bir kez çalışan ve sayfama ping atan başka bir GitHub Eylemi kurdum. Ana sayfanıza ve beklediğiniz trafik türüne uygun gördüğünüzde sıklığı artırın.

Çözüm

Ve işimiz bitti! En azından şimdilik.

Benim için web sitem her şeyden önce merak ettiğim teknolojileri deneyebileceğim bir oyun alanı işlevi görüyor, bu yüzden ara sıra sitemde değişiklik yapmayı seviyorum. Web sitenizin kodunu düzenli olarak tekrar ziyaret etmenizi ve onunla eğlenmenizi tavsiye ederim. 💃

Umarım bu kılavuz size kişisel bir ana sayfa oluşturmanın ve sürdürmenin ne kadar kolay olabileceğine dair bir fikir vermiştir. Muhtemelen 1-2 gün içinde basit bir şey oluşturabilirsiniz (benim gibiyseniz CSS düzenini doğru yapmak için iki gün daha ekleyin 🙄).

Web sitenizi dağıtmak ve bakımı kolaylaştırmak için biraz otomasyon eklemek 2 saatten kısa sürede yapılabilir.

Oluşturacağınız tüm muhteşem web sitelerini görmeyi sabırsızlıkla bekliyorum! 🤩