Netlify ve GitHub Kullanarak Açısal Bir Web Sitesini Nasıl Barındırırsınız?

Bir Angular web sitesini çevrimiçi olarak barındırırken, mevcut birçok platform arasından seçim yapabilirsiniz. Ücretsiz olarak kullanabileceğiniz bunlardan biri de Netlify.

Web sitenizin kaynak kodunun bir kopyasını bir GitHub deposunda saklıyorsanız, o siteyi barındırmak için Netlify'ı kullanabilirsiniz.

Netlify ayrıca, barındırdığınız veri havuzu dalında herhangi bir yeni değişiklik yaptığınızda sitenizi otomatik olarak yeniden konuşlandırır.

Temel Örnek Açısal Uygulama Nasıl Oluşturulur

Visual Studio Code gibi bir düzenleyici kullanarak basit bir Angular uygulaması oluşturabilirsiniz. Daha sonra bu web sitesini Netlify kullanarak barındırabilirsiniz.

1. Oluşturmak yeni Açısal uygulama.
instagram viewer
2. Basit bir ana sayfa oluşturun. İçindeki kodu değiştir uygulama.bileşen.html aşağıdaki açılış sayfası içeriğine sahip dosya:

   <div sınıfı="kapsayıcı-karanlık başlık">
   <h2>İşletme Web Sitemiz</h2>
   </div>
   <div sınıfı="konteyner beyazı">
   <div sınıfı="içerik">
   <h2>İşletme Web Sitemiz</h2>
   <P>Profesyonel web sitenizi hemen tasarlamayı, geliştirmeyi ve sürdürmeyi öğrenin.</P>
   </div>
   </div>
   <div sınıfı="konteyner-portakal">
   <div sınıfı="içerik">
   <h2>Ne Yapıyoruz?</h2>
   <P>Size müşterileriniz için web siteleri ve benzersiz çözümler geliştirmeniz için araçlar sunuyoruz. için de eğitimler veriyoruz.
    bakım ve web sitesiyle ilgili diğer konular.</P>
   </div>
   </div>
   <div sınıfı="konteyner beyazı">
   <div sınıfı="içerik">
   <h2>Hakkımızda</h2>
   <P>Biz Melbourne, Avustralya'da faaliyet gösteren küçük bir işletmeyiz. Alanlarımız benzersiz bir şekilde tasarlanmıştır, böylece müşteriler de
    bizi bizzat ziyaret edin.</P>
   </div>
   </div>
   <div sınıfı="kapsayıcı karanlık altbilgi">
   <P>telif hakkı 2022</P>
   </div>

3. Açısal uygulamaya biraz CSS ekleyerek stil ekleyin. uygulama.bileşen.css dosya:

   * {
    font ailesi: "Arial", sans Serif;
   }
   .başlık {
    dolgu: 30 piksel 50 piksel;
   }
   .alt bilgi {
    dolgu: 5 piksel 50 piksel;
    metin hizalama: merkez;
   }
   .container-karanlık {
    arka plan rengi: #202C39;
    Beyaz renk;
    ekran: esnek;
    hizalama öğeleri: merkez;
   }
   .konteyner-turuncu {
    arka plan rengi: #FFD091;
    renk: #202C39;
   }
   .konteyner beyazı {
    arka plan rengi: beyaz duman;
    renk: #202C39;
   }
   .içerik {
    dolgu: 100 piksel %25;
    ekran: esnek;
    esnek yön: sütun;
    satır yüksekliği: 2rem;
   yazı Boyutu: 1.2em;
    hizalama öğeleri: merkez;
    metin hizalama: merkez;
   }

4. Genel Angular uygulaması için biraz stil ekleyin. stiller.css:

   vücut {
    kenar boşluğu: 0;
    dolgu: 0;
   }

5. Uygulamayı test etmek için bir terminal veya komut satırı kullanarak uygulamanın kök klasörüne gidin. Yaz hizmet etmek emretmek:

   hizmet etmek

6. Kodunuzun derlenmesini bekleyin ve ziyaret edin http://localhost: 4200/ uygulamanızı görüntülemek için bir web tarayıcısında.
7. İçinde .browserslistrc dosya, iOS safari sürüm 15.2-15.3'ü kaldırın. Bu, projeyi oluşturduğunuzda uyumluluk hatalarının konsolda gösterilmesini engelleyecektir.

   son 1 Chrome sürümü
   son 1 Firefox sürümü
   son 2 Edge ana sürümü
   son 2 Safari ana sürümü
   son 2 iOS ana sürümü
   Firefox ESR'si
   Olumsuzios_saf 15.2-15.3
   Olumsuzsafari 15.2-15.3

8. kullanarak kodunuzu oluşturun. inşa etmek terminaldeki komut:

   inşa etmek

9. İçinde .gitignore dosyalayın, kaldırın veya yorumlayın /dist astar. Bunu kaldırmak, şunları sağlayacaktır: mesafe klasörü, GitHub deponuza gönderdiğiniz dosya kümesindedir.

   # / mesafe

Açısal Kodunuzu GitHub'a Nasıl Aktarırsınız?

Netlify'ın kaynak koduna erişmesi için kodunuzu uzak bir havuzda saklamanız gerekecektir.

GitHub'da yeni bir depo oluşturabilir ve web sitenizin kodunu bu depoya gönderebilirsiniz. GitHub'a aşina değilseniz, bazılarını anlamak yararlı olabilir. GitHub'ın temel özellikleri Birinci.

1. GitHub'da yeni bir depo oluşturun. Bunu GitHub'da oturum açıp üzerine tıklayarak yapabilirsiniz. Yeni.
2. Yeni deponuz için ayrıntıları girin. Ona "netlify-app" gibi bir ad ve bir açıklama verin. Depoyu bir README dosyası, .gitignore dosyası veya lisansla başlatmayın.
3. Bilgisayarınızdaki bir terminalde, Angular uygulamanızı sakladığınız dizine gidin. Klasörünüzü bir git deposu olarak başlatmak için aşağıdaki komutları çalıştırın:

   git başlatma
   git ekle .
   git işlemek -m "ilk işlemek"

4. Bu klasörün içindeki kodu GitHub'da oluşturduğunuz yeni uzak depoya gönderin. Takip et git uzaktan orijinal ekle, git şubesi, Ve git itme uzak depo sayfanızda GitHub tarafından sağlanan komutlar:

   git uzaktan orijinal ekle <GitHub depo bağlantınız>
   git şubesi -M ana
   git push -u kaynak ana

5. GitHub deposu sayfasını yenileyerek Angular uygulama kodunuzun artık uzak GitHub deponuzda olduğunu onaylayabilirsiniz.

Kodunuzu Barındırmak için Netlify Nasıl Kullanılır?

Netlify kullanarak kodunuzu barındırmak için GitHub kaynak kodunuza erişmesine izin vermeniz gerekir. Netlify daha sonra mesafe Kodunuzun oluşturulmuş sürümünü yayınlamak için Angular projenizin klasörü.

Yeni bir site oluştururken yapılandırma adımlarını izleyerek tüm bu ayarları yapılandırabilirsiniz:

1. giriş yapın veya kaydolun Netleştir. GitHub kimlik bilgilerinizi kullanarak bunu yapabilirsiniz.
2. Ana kontrol panelinden ve site listesi sayfasından genişletin yeni site ekleve seçin Mevcut bir projeyi içe aktarın.
3. Seçme GitHub.
4. Tıklamak Netlify'ı GitHub'da yapılandırın.
5. Tıklamak Düzenlemek.
6. Netlify, GitHub depolarınızın bir listesini görüntüler. Barındırmak istediğinizi seçin. Örneğin, deponuzu "netlify-app" olarak adlandırdıysanız, listeden "netlify-app" öğesini seçin.
7. Yapılandırma ekranında, Mal sahibi, Dağıtılacak şube, Ve Temel dizin alanlar varsayılan değerlerinde. Ayrı bir "Üretim" dalı gibi belirli bir dalı yayınlıyorsanız, bunu Dağıtılacak şube alan. Değiştir Derleme komutu "ng build" alanına. İçin Dizini yayınla alanına dist/ yazın. Proje adının ne olduğunu bilmiyorsanız, projenizin dist klasörüne gidip orada bulabilirsiniz. Örneğin, "dist/netlify-app".
8. Tıklamak Siteyi dağıt.
9. Dağıtımın tamamlanmasını bekleyin. Bu işlem birkaç dakika sürebilir ve sayfayı yenilemeniz gerekebilir. Her şey yolunda giderse, dağıtım listesinde başarılı dağıtımı görebileceksiniz. Yayınlanmış dağıtımınıza tıklayın, örneğin, Üretim: main@HEAD.
10. Tıkla Açık üretim dağıtımı düğme.
11. Artık web sitenizi şu biçimde bir URL kullanarak başka bir sekmede görüntüleyebilirsiniz: .netlify.app. Birden fazla yönlendirme içeren bir web sitesi barındırıyorsanız, diğer sayfalara yönlendirme yapamayabilirsiniz. Bu durumda, bir yol var Netlify'da başarısız bir yönlendirmeyi düzeltin. İsterseniz siz de yapabilirsiniz ücretsiz alan adınızı değiştirin.

Web Sitenizi GitHub ve Netlify Kullanarak Barındırma

Umarız artık GitHub ve Netlify kullanarak bir web sitesini başarıyla barındırabilirsiniz. Bir GitHub deposunun belirli dallarına otomatik dağıtımlar ayarlayabilirsiniz. Bu şekilde, web sitenizin dağıtımını otomatikleştirebilir ve kolaylaştırabilirsiniz.

Ancak Netlify, bir Angular uygulamasını çevrimiçi dağıtmanın tek yolu değildir. GitHub Pages gibi diğer platformları da kullanabilirsiniz.