Разполагането на приложения на Angular в страниците на GitHub е чудесен начин да ги хоствате безплатно. Angular е популярна JavaScript рамка за изграждане на приложения с една страница.

Angular има изчерпателен интерфейс на командния ред, който поддържа бързо изграждане и настройка на JavaScript приложения. Angular CLI има няколко команди за създаване, изграждане, обслужване и генериране на компоненти на приложения.

Можете също да използвате CLI за внедряване на Angular приложения към различни цели, включително GitHub страници.

От какво имаш нужда

За да се възползвате максимално от това ръководство, трябва да имате следните умения и инструменти:

  • Трябва да сте запознати с основите на Angular, като концепцията за приложения, настройки, URL адреси и др.
  • Вие сте запознати с основите на GitHub и Git, като създаване на GitHub акаунт, създаване на git хранилище (repo) и GitHub страници (GH-страници).
  • Имате приложение Angular, готово за внедряване.
  • Вашият основен URL е на правилния път. Внедряването на GH-страници е неуспешно поради настройка на грешна базова href (основен URL адрес).
    • instagram viewer
  • Акаунт в GitHub.
  • Хранилище (репо) на GitHub с код на приложение.

Сега, след като разполагате с всичко това, нека започнем процеса на внедряване.

Процес на внедряване

За да започнете, трябва да сте създали GitHub хранилище за вашия проект и да сте изпратили кода към основен/главен клон.

След това създайте клон на GH-страници.

1. Създайте клон на GH-страници

Това е хак, който ще ви помогне да получите връзката към GH-страниците, за да ви помогне да зададете base-href.

Първо създайте GH-страници във вашето локално хранилище със следната команда:

git клон gh-страници

След това излезте от основния клон към GH-страниците, за да прехвърлите целия код.

git checkout gh-страници

След това изпратете GH-страници към GitHub, за да създадете отдалечен клон на GH-страници.

git push origin gh-страници

Щракнете върху лентата с инструменти под името на репото Настройки > Страници.

Под Изграждане и внедряване, изберете Разположете от клон. След това изберете gh-страници като име на клона, след което щракнете Запазване. Това ще създаде връзка към GH-страници горе вдясно под етикета GH-страници.

След това копирайте тази връзка към публикувания сайт, както е показано по-долу. Ще използвате връзката, за да настроите base-ref по време на внедряването.

3. Инсталирайте Angular-CLI-GHpages

Пакетът angular-cli-ghpages е инструмент, който Angular CLI използва за целите на внедряването.

Върнете се обратно към вашето локално хранилище на проекти. След това инсталирайте и стартирайте angular-cli-ghpages с тази команда:

ng добави angular-cli-ghpages

4. Разположете приложението

За да изградите приложението в производствена среда, трябва да го свържете към отдалечен сървър на GitHub.

Конфигурирайте приложението си към отдалечен сървър, като изпълните следната команда:

ng разгръщане --base-href=https://GithubUserName.github.io/GithubRepoName/

Не забравяйте да замените връзката по-горе с връзката на живо от страниците на GH

Успешното изграждане ще изглежда като илюстрацията по-долу:

След това отворете GitHub и щракнете върху връзката GH-страници, за да видите внедрения си проект.

Поздравления, внедрихте вашето Angular приложение!

Ако връзката показва само файла README, моля, върнете се към настройките на GitHub GH-страници. Уверете се, че избраният клон е gh-pages, а не основният или главният клон. След това му дайте пет минути и презаредете. Понякога GitHub отнема време, за да отрази промените.

За да научите повече за това как можете да използвате Angular CLI при внедряване, посетете Ъглова документация.

Как да внедрите приложение Angular в страници на GitHub

Има няколко начина за внедряване на Angular приложения в GH-страници, но този метод е най-лесният. Настройвате връзката си за репо GH-страници и я използвате с Angular-CLI, за да внедрите приложението си в страници на GitHub.

Има много повече, които можете да правите с Angular и Angular CLI. Чувствайте се свободни да изследвате. Използвайте CLI, за да разположите приложения на GH-страници за безплатна видимост и хостинг за вашите приложения.