Bir Angular uygulamasını GitHub Pages’de ücretsiz olarak barındırarak hemen başlatın.

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şenleri 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:

• Uygulama kavramı, ayarlar, URL’ler vb. gibi Angular’ın temellerine aşina olmalısınız .
• GitHub hesabı oluşturmak, git deposu (repo) ve GitHub sayfaları (GH sayfaları) oluşturmak gibi GitHub ve Git’in temellerini biliyorsunuz .
• Dağıtıma hazır bir Angular uygulamanız var.
• Temel URL’niz doğru yolda. GH sayfalarına dağıtımlar, yanlış temel-href (temel-url) ayarlandığından başarısız oluyor.
• 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 ana/ana dalına göndermiş olmalısınız.

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

1. Bir GH sayfaları Şubesi oluşturun

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

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

git branch gh-pages

Ardından, tüm kodu aktarmak için ana daldan GH sayfalarına bakın.

git checkout gh-pages

Ardından, uzak bir GH sayfaları dalı oluşturmak için GH sayfalarını GitHub’a aktarın.

git push origin gh-pages

2. Repo Bağlantısını Alın

Depo adının altındaki araç çubuğunda Ayarlar > Sayfalar ‘ı tıklayın .

Derleme ve dağıtım altında , Şubeden dağıt’ı seçin . Ardından, dalın adı olarak gh-pages’i seçin ve ardından Save ‘i tıklayın . 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 temel başvuruyu ayarlamak için bağlantıyı kullanacaksınız.

3. Angular-CLI-GHpages yükleyin

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

Yerel proje deponuza geri dönün. Ardından, bu komutla angular-cli-ghpages kurun ve çalıştırın:

ng add angular-cli-ghpages

4. Uygulamayı Dağıtın

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

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

ng deploy –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 yapı aşağıdaki resimdeki gibi görünecektir:

• Resim, uygulamanın başarılı bir şekilde oluşturulmasını ve gh sayfalarına dağıtılmasını gösterir
• Ardından, dağıtılan projenizi görmek için GitHub’a gidin ve GH sayfaları bağlantısını 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 sayfaları 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 Angular belgelerini ziyaret edin .

GitHub Sayfalarına Angular Uygulaması Nasıl Dağıtılır

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

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