Web Geliştirme için Git: Bir Projenin Tipik İş Akışını Tanıyın

Web geliştirme özünde işbirliği ile ilgilidir. Çoğu zaman diğer geliştiricilerle çalışacaksınız ve çalışmasanız bile Git size başka birçok yönden yardımcı olabilir.

Git, yaptığımız uygulamaların sürümünü kontrol eden yazılımdır. Tek başına geliştiriciler, büyük şirketler ve hatta dünyanın en büyük açık kaynak projesi olan Linux tarafından kullanılıyor.

Bir web geliştiricisi olarak, web geliştirme için Git'in nasıl doğru şekilde kullanılacağını bilmek son derece önemlidir. Sadece “git add”, “git commit” ve “git push”tan bahsetmiyoruz. Git ile bir web projesi oluşturmanın tüm iş akışını bilmelisiniz.

Henüz ikna olmadınız mı? Hadi başlayalım!

Git'i Neden Kullanmalı?

Bunlar Git'i kullanmaya başlama nedenlerinden sadece birkaçı:

• Organizasyon: Projenizi v1, v2, v3 vb. klasörlerde yönetmek yerine, dosyaların tüm sürümlerini depolayan özel bir veritabanına sahip tek bir projeniz var.
• İşbirliği: Git, sizin ve diğer kişilerin çakışma yaratmadan aynı proje üzerinde aynı anda çalışmasına olanak tanır.
• Açık kaynak: Git açık kaynaktır, ancak aynı zamanda işbirliği yapmak ve harika açık kaynaklı yazılımlar oluşturmak için kullandığımız araçtır. Herkes GitHub veya Bitbucket gibi platformlarda açık kaynaklı projelere çekme istekleri yapabilir.
• Platform esnekliği: Günümüzde Gitlab, GitHub, Bitbucket ve SourceForge gibi birçok farklı Git barındırma hizmeti arasından seçim yapabilirsiniz. Tüm projeleriniz için kendi kendine barındırılan bir çözüm bile kullanabilirsiniz.
• Kolay yedeklemeler: Hataları kolaylıkla geri alın ve proje kod tabanınızı asla kaybetmeyin.

GitHub teriminden bir veya iki kez bahsettik, peki Git ve GitHub arasındaki fark nedir?

Git'te tamamen yeniyseniz, bu kafanızı karıştırabilir. Basit bir deyişle, Git ve GitHub, birbiriyle ilişkili ancak farklı araçlardır.

Git, dosyalarımızdaki değişiklikleri kontrol altında tutmak için kullandığımız sürüm kontrol sistemidir (VCS), GitHub ise proje dosyalarımızı ve Git geçmişlerini çevrimiçi olarak depolamak için kullandığımız bir hizmettir ( projenizin .git/ klasöründe bulunur) .

Git, makinenize yerel olarak yüklenir ve GitHub veya GitLab gibi barındırma hizmetleri olmadan diğer geliştiricilerle işbirliği yapmak çok zor olurdu.

GitHub, klonlama, çatallama ve birleştirme gibi işbirliğini geliştiren başka özellikler ekleyerek Git'i güçlendirir. Bu iki araç birlikte, projenizi geliştirmek, yönetmek ve diğer insanlara göstermek için size nispeten dostane bir ekosistem sunmak için birleşir.

Web Geliştirme İş Akışı için Temel Git

Sonraki bölümlerde, uygulamalı alıştırma yoluyla web geliştirme için Git iş akışı hakkında daha fazla bilgi edineceksiniz.

kurulum gereksinimleri

Git'i henüz yüklemediyseniz, bu mükemmel bir zaman. Kurulumu kolaydır ve çoğu işletim sisteminde mevcuttur.

Resmi indirme sayfasından indirin veya Linux veya macOS kullanıyorsanız bir paket yöneticisi ile kurun:

Kurulumda her şeyin yolunda gittiğini test etmek için, uygulamalar menünüzde “Terminal”i arayarak veya Windows'ta Git bash'i açarak (varsayılan olarak Git ile birlikte kurulu olarak gelir) Linux veya macOS'ta bir terminali çalıştırın.

Sonra şunu yazın:

 git --version

Yanıt olarak bir Git sürümü alırsanız, gitmeye hazırsınız.

Ayrıca bir GitHub hesabına ihtiyacımız olacak, bu nedenle GitHub'a kaydolduğunuzdan veya oturum açtığınızdan emin olun:

Git'i yükledikten ve GitHub hesabınıza giriş yaptıktan sonra bir sonraki bölüme geçebilirsiniz.

Ortak Projeler için Temel Git İş Akışı

Daha önce de belirtildiği gibi, çoğu zaman solo projeler geliştirmeyeceksiniz. İşbirliği önemli bir beceridir ve Git ve GitHub, bunu basit ama etkili bir süreç haline getirmemize yardımcı olur.

Git projesinin tipik iş akışı şöyle görünür:

1. Bir depoyu veya depoyu klonlayarak projenin yerel bir kopyasını alın. İşbirliği yapıyorsanız, önce depoyu çatallamalısınız.
2. Üzerinde çalışacağınız özelliğin temsili adıyla bir dal oluşturun.
3. Projeyi düzenleyin.
4. Değişiklikleri yerel makinenize uygulayın.
5. Değişiklikleri uzak depoya aktarın.
6. Orijinal depoya bir çekme isteği oluşturun.
7. Orijinal deponun ana dalındaki çakışmaları birleştirin ve çözün.

öğretici

Şimdi ellerimizi kirletme zamanı!

Bu kılavuzda basit bir HTML web sitesi oluşturacaksınız. Pratik amaçlar için, temel projeyi HTML site deposundan GitHub hesabınıza çatallayacaksınız. Bu, herkese açık tüm depolar için yapılabilir.

HTML sitesini çatallamak için bu GitHub deposuna gidin ve sayfanın sağ üst köşesinde bulunan Çatal düğmesine tıklayın:

Artık yalnızca GitHub hesabınızda bulunan orijinal depodan bir çatalınız var. Tam olarak aynı depo - siz değişiklik yapmaya başlayana kadar.

Gördüğünüz gibi, halka açık bir depoyu çatallamak sadece birkaç saniye sürüyor. Bu, açık kaynaklı projeler için harikadır, ancak kuruluşunuzun özel bir deposu varsa, çatallamaya çalışmadan önce katkıda bulunan olarak dahil edilmeniz gerektiğini unutmayın.

Çatalınızı yerel makinenize getirmenin zamanı geldi. Bunu yapmak için, onu uzak sunucudan Git deposunu alan git clone komutuyla klonlamanız gerekir:

 git clone remote_url

remote_url çatalınızın URL'siyle değiştirmeniz gerekir. GitHub deposunun tam URL'sini almak için sayfasına gidin ve Kod'a tıklayın. Ardından SSH öğesini seçin ve size verdiği bağlantıyı kopyalayın:

Çatallı depoyu klonlamak için çalıştıracağınız komut:

 git clone [email protected]:yourusername/HTML-site.git

Bir repoyu klonladığınızda, adına sahip bir klasör alırsınız. Bu klasörün içinde projenin kaynak kodu (bu durumda HTML sitesi) ve .git adlı bir klasörün içinde bulunan Git deposu bulunur.

Yeni klasörü bir grafik dosya yöneticisinde açarak veya doğrudan terminalden ls veya dir komutlarıyla listeleyerek yeni dizindeki dosyaların listesini görebilirsiniz:

 # Linux/macOS ls HTML-site/ # Windows dir HTML-site\ .git images .gitignore index.html LICENSE README.md styles.css

Bu HTML sitesi çok basittir. Pratik amaçlar için Bootstrap ve siteniz için ücretsiz görseller indirebileceğiniz Unsplash'tan birkaç resim kullanır.

index.html dosyasını tarayıcınızda açarsanız, birkaç resim içeren basit bir sayfa görürsünüz:

Bu projeyle oynamanın zamanı geldi. Çok boş geliyor ve belki de sitenin adını içeren bir başlık, kullanıcı deneyimini iyileştirebilir.

Bunu yapmak için HTML-site dizinine girin ve header adında bir dal oluşturun. Bu yeni dalda, ana (orijinal) dalı etkilemeyeceği için tüm dosyaları düzenleyebilir ve istediğimiz kadar kod uygulayabiliriz.

Aşağıdaki komutu çalıştırın:

Bülten için Kaydolun

Trafiğimizi nasıl %1000'in üzerine çıkardığımızı bilmek ister misiniz?

İçeriden WordPress ipuçlarıyla haftalık bültenimizi alan 20.000'den fazla kişiye katılın!

Şimdi Abone Ol

 git checkout -b header

Bu, “header” adında bir dal oluşturacak ve bundan hemen sonra sizi ona yönlendirecektir. Şuna eşdeğerdir:

 git branch header git checkout header

Her şeyin yolunda gittiğini onaylamak için şunu çalıştırın:

 git status # On branch header # nothing to commit, working tree clean

“Ana” daldan “başlık” dalına geçtiğinizi göreceksiniz, ancak herhangi bir dosya düzenlemediğimiz için çalışan ağaç hala temiz.

Favori kod düzenleyicinizde dallara ayrılmış projenizdeki index.html dosyasını açın. Bu dosya, Bootstrap 5'e bazı bağlantılar içerir, böylece çerçevenin kullanıma hazır bileşenlerinden yararlanabiliriz.

<body> etiketinin içindeki ve resim kabının üstündeki index.html dosyasına aşağıdaki kodu ekleyin:

 <header> <nav class="navbar navbar-light bg-light"> <div class="container-fluid"> <span class="navbar-brand mb-0 h1">HTML site</span> </div> </nav> </header>

Çok daha iyi görünümlü! Dilediğiniz diğer şubeleri ve değişiklikleri yapmaktan çekinmeyin.

Projeyi düzenlemeyi bitirdikten sonra, tüm değişiklikleri yerel deponuza kaydetme zamanı. Proje dizininin içinde, terminalinize aşağıdakini yazın:

 git add --all git commit -m "Added simple header in index.html file"

Bir projeye ilk başladığınızda, açıklayıcı taahhüt mesajlarına sahip olmak yaygındır, ancak zamanla ve değişen odakla, mesajların kalitesi düşme eğilimindedir. İyi adlandırma uygulamalarına ayak uydurduğunuzdan emin olun.

Artık yerel deponuz için bir taahhütte bulundunuz (ki bu hala yalnızca bilgisayarınızda mevcuttur), onu uzak depoya göndermenin zamanı geldi.

Taahhüdü normal şekilde zorlamaya çalışırsanız, şu anda header dalında çalıştığınız için çalışmaz. header için yukarı akış dalını ayarlamanız gerekir:

 git push --set-upstream origin header

13 Ağustos 2021'den itibaren GitHub, SSH kimlik doğrulamasının kullanılmasını gerektiriyor, bu nedenle anahtarlarınızı doğru şekilde ayarladığınızdan emin olun.

Bundan sonra, çatallı deponuzda header adında yeni bir dal görebilmeniz gerekir (örneğin, https://github.com/yourusername/HTML-site/branches ):

Orijinal depoya bir çekme isteği oluşturmak için, Etkin dallar bölümünde, Karşılaştır'a tıklayın.

Bu sizi, hangi dalı (orijinal veya çatalınız) birleştirmek istediğinizi seçmeniz gereken bir çekme talebine yönlendirecektir. Varsayılan olarak, temel depoyla birleştirme seçeneğini gösterir:

Çekme isteği seçeneğine tıkladığınızda, daha önceki taahhütlerinizde olduğu gibi, yapılan değişikliklerin kısa bir açıklamasını yazmanız gerekir. Bir kez daha, kısa ama açıklayıcı olmaya çalışın:

Çekme isteği oluştur düğmesine tıklayın ve temel depo sahibinin değişikliklerinizi kabul etmesini veya size geri bildirimde bulunmasını bekleyin.

Tebrikler - web geliştirme için ortak bir Git iş akışının tüm adımlarını tamamladınız!

Bu gerçekten basit bir örnekti, ancak mantık her büyüklükteki projeye yayılıyor. Bu iş akışını daha büyük ortak projelerde de yakından uyguladığınızdan emin olun.

Git Kinsta'da Nasıl Kullanılır

Kinsta kullanıcısıysanız, MyKinsta portalınızdan Git ve GitHub'ı kullanmak için zaten iki yolunuz vardır.

İlk seçenekle başlayalım. GitHub, Gitlab veya Bitbucket gibi herhangi bir Git barındırma hizmetinden kolayca SSH girebilir ve bir repo çekebilirsiniz.

Bunu yapmak için Siteler sekmenize gidin, bir site seçin ve SSH ayrıntıları bölümüne gidin ve SSH terminal komutunu kopyalayın.

Yukarıdaki komutu terminalinize yapıştırarak ve sitenizin ortak klasörüne girerek ( /www/yoursitename/ altında bulunur) SSH ile sitenize giriş yapın. Tüm WordPress dosyalarınızın bulunduğu yer burasıdır, böylece üzerinde çalıştığınız özel bir tema veya eklentiye sahip bir Git deposunu aşağı çekebilirsiniz.

Basit bir komutla Git deposunu şu şekilde aşağı çekersiniz:

 ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

Şimdi, Kinsta'da yeni GitHub dağıtım özelliğini tanıtarak, bir GitHub deposundan tam bir WordPress sitesi dağıtabilirsiniz.

GitHub deponuz, WordPress çekirdek dosyalarının bir kopyasını ve elbette sitenizin içeriğini wp-content klasörünün içinde içermelidir.

Bu seçeneğe hızlıca bir göz atalım.

Şirketinizin sitelerinden birine gidin ve bir hazırlık ortamı yaratın. Bu birkaç dakikadan fazla sürmez.

Hazırlama sitenize girdikten sonra, Dağıtım sekmesine gidin ve Kuruluma başla düğmesine tıklayın. Kinsta'nın GitHub hesabınızla bağlantı kurmasını sağlayacak bir GitHub modeli göreceksiniz.

Şimdi sitenizi çekeceğiniz repoyu seçin.

Son olarak, sitenizi dağıtın ve hazırlama sitesi URL'niz aracılığıyla ziyaret edin.

Bu özellik hala Beta'da , ancak yakında her Kinsta kullanıcısı buna erişebilecek.

Git ve Kinsta'yı iyi kullanmayı biliyorsanız, güçlü bir kombinasyon olabilir. Buradaki öğreticimiz yalnızca basit bir örnek sunarken Git bilgi bankası makalemizden çok daha fazlasını öğrenebilirsiniz.

Özet

Günümüzde Git, web geliştirme için öğrenilmesi gereken bir araçtır, çünkü çoğu zaman yapabileceğiniz en iyi projeyi oluşturmak için başkalarıyla işbirliği yapacaksınız.

Bu makalede, projelerinizde Git'i kullanmanın bazı önemli nedenlerini tartıştık ve size bir Git deposunda işbirliği yapmanın temel iş akışını gösterdik.

Git o kadar güçlü bir araçtır ki, kullanımını WordPress barındırmaya kadar genişletebilirsiniz, bu nedenle onu yalnızca web geliştirme becerileri cephaneliğinizin bir parçası olarak öğrenmeniz ve uygulamanız için fayda sağlayabilir.

Web geliştirme için bu temel Git iş akışını geliştirmek için başka önerileriniz var mı? Yorumlar bölümünde bize bildirin!