Angular uygulamalarını GitHub sayfalarına dağıtmak, onları ücretsiz olarak barındırmanın harika bir yoludur. Angular, tek sayfalık uygulamalar oluşturmak için popüler bir JavaScript çerçevesidir.

Angular, JavaScript uygulamalarının hızlı bir şekilde oluşturulmasını ve kurulmasını destekleyen kapsamlı bir komut satırı arayüzüne sahiptir. Angular CLI, uygulama bileşenlerini oluşturmak, oluşturmak, sunmak ve oluşturmak için çeşitli komutlara sahiptir.

Angular uygulamalarını GitHub sayfaları da dahil olmak üzere çeşitli hedeflere dağıtmak için CLI'yi de kullanabilirsiniz.

Neye ihtiyacın var

Bu kılavuzdan en iyi şekilde yararlanmak için aşağıdaki becerilere ve araçlara sahip olmanız gerekir:

  • aşina olmalısın Angular'ın temelleri, uygulamalar, ayarlar, URL'ler vb. kavramları gibi.
  • aşina olduğun GitHub'ın temelleri ve Git, bir GitHub hesabı oluşturmak, bir git deposu (repo) ve GitHub sayfaları (GH-sayfaları) oluşturmak gibi.
  • Dağıtıma hazır bir Angular uygulamanız var.
  • Temel URL'niz doğru yolda. Yanlış base-href (base-url) ayarı nedeniyle GH sayfalarına yapılan dağıtımlar başarısız oluyor.
    • instagram viewer
  • Bir GitHub hesabı.
  • Uygulama kodu içeren bir GitHub deposu (repo).

Artık tüm bunları yerine getirdiğinize göre dağıtım sürecini başlatalım.

Dağıtım Süreci

Başlamak için, projeniz için bir GitHub deposu oluşturmuş ve kodu şuraya göndermiş olmalısınız: ana/ana dal.

Ardından, bir GH sayfaları dalı oluşturun.

1. GH sayfaları Şubesi oluşturun

Bu, base-href'i ayarlamanıza yardımcı olacak GH sayfaları bağlantısını almanıza yardımcı olacak bir hack'tir.

İlk olarak, aşağıdaki komutla yerel deponuzda GH sayfaları oluşturun:

git şubesi gh-sayfaları

Ardından, tüm kodu aktarmak için ana şubeden GH sayfalarına göz atın.

git ödeme gh-sayfaları

Ardından, uzak bir GH sayfaları dalı oluşturmak için GH sayfalarını GitHub'a gönderin.

git itme kaynağı gh-sayfaları

Depo adının altındaki araç çubuğunda, Ayarlar > Sayfalar.

Altında Derleme ve dağıtım, seçme Şubeden dağıtma. Sonra, seçin gh-sayfaları şubenin adı olarak, ardından tıklayın Kaydetmek. Bu, GH sayfaları etiketinin altında sağ üstte bir GH sayfaları bağlantısı oluşturacaktır.

Ardından, bu bağlantıyı aşağıda gösterildiği gibi yayınlanan siteye kopyalayın. Dağıtım sırasında base-ref'i ayarlamak için bağlantıyı kullanacaksınız.

3. Angular-CLI-GHpages'i kurun

angular-cli-ghpages paketi, Angular CLI'nin dağıtım amacıyla kullandığı bir araçtır.

Yerel proje havuzunuza geri dönün. Ardından angular-cli-ghpages'i şu komutla kurun ve çalıştırın:

angular-cli-ghpages ekleme

4. Uygulamayı dağıtın

Uygulamayı üretimde oluşturmak için GitHub'daki bir uzak sunucuya bağlamanız gerekir.

Aşağıdaki komutu çalıştırarak uygulamanızı uzak bir sunucuya yapılandırın:

konuşlandır --base-href=https://GithubUserName.github.io/GithubRepoName/

Yukarıdaki bağlantıyı GH sayfalarından canlı bağlantıyla değiştirmeyi unutmayın

Başarılı bir derleme aşağıdaki resimdeki gibi görünecektir:

Ardından GitHub'a gidin ve dağıtılan projenizi görmek için GH sayfaları bağlantısına tıklayın.

Tebrikler, Angular Uygulamanızı dağıttınız!

Bağlantı yalnızca BENİOKU dosyasını gösteriyorsa, lütfen GitHub GH sayfaları ayarlarına geri dönün. Seçilen dalın ana veya ana dal değil, gh-pages olduğundan emin olun. Ardından beş dakika verin ve yeniden yükleyin. Bazen GitHub'ın değişiklikleri yansıtması zaman alır.

Angular CLI'yi dağıtımda nasıl kullanabileceğiniz hakkında daha fazla bilgi edinmek için şu adresi ziyaret edin: Açısal belgeler.

Açısal Uygulamayı GitHub Sayfalarına Dağıtma

Angular uygulamalarını GH sayfalarına dağıtmanın birkaç yolu vardır, ancak bu yöntem en kolay olanıdır. GH sayfaları repo bağlantınızı kurarsınız ve uygulamanızı GitHub sayfalarına dağıtmak için Angular-CLI ile kullanırsınız.

Angular ve Angular CLI ile yapabileceğiniz daha çok şey var. Keşfetmekten çekinmeyin. Uygulamalarınız için ücretsiz görünürlük ve barındırma amacıyla uygulamaları GH sayfalarına dağıtmak için CLI'yi kullanın.