Nasadenie aplikácií Angular na stránky GitHub je skvelý spôsob, ako ich bezplatne hostiť. Angular je populárny rámec JavaScriptu na vytváranie jednostránkových aplikácií.

Angular má komplexné rozhranie príkazového riadku, ktoré podporuje rýchle zostavenie a nastavenie aplikácií JavaScript. Angular CLI má niekoľko príkazov na vytváranie, zostavovanie, obsluhu a generovanie komponentov aplikácie.

Môžete tiež použiť CLI na nasadenie aplikácií Angular na rôzne ciele vrátane stránok GitHub.

Čo potrebuješ

Aby ste z tejto príručky vyťažili maximum, musíte mať nasledujúce zručnosti a nástroje:

  • Mali by ste byť oboznámení s základy Angularu, ako napríklad koncept aplikácií, nastavení, adries URL atď.
  • Ste oboznámení s základy GitHubu a Git, ako je vytvorenie účtu GitHub, vytvorenie úložiska git (repo) a stránky GitHub (stránky GH).
  • Máte pripravenú aplikáciu Angular na nasadenie.
  • Vaša základná adresa URL je na správnej ceste. Nasadenie na stránky GH zlyhá kvôli nastaveniu nesprávnej základnej hodnoty (base-url).
  • Účet GitHub.
  • Úložisko GitHub (repo) s kódom aplikácie.
instagram viewer

Teraz, keď to všetko máte na mieste, začnite proces nasadenia.

Proces nasadenia

Na začiatok by ste mali pre svoj projekt vytvoriť úložisko GitHub a vložiť kód do hlavný/hlavný pobočka.

Ďalej vytvorte vetvu stránok GH.

1. Vytvorte pobočku stránok GH

Toto je hack, ktorý vám pomôže získať odkaz na stránky GH, ktorý vám pomôže nastaviť základnú hodnotu.

Najprv vytvorte stránky GH vo svojom lokálnom úložisku pomocou nasledujúceho príkazu:

git branch gh-pages

Potom prejdite z hlavnej pobočky na stránky GH, aby ste preniesli celý kód.

git checkout gh-pages

Potom odošlite stránky GH na GitHub a vytvorte vzdialenú vetvu stránok GH.

git push origin gh-pages

Na paneli s nástrojmi pod názvom repo kliknite na Nastavenia > Stránky.

Pod Zostavenie a nasadenie, vyberte Nasadenie z pobočky. Ďalej vyberte gh-stránky ako názov pobočky, potom kliknite Uložiť. Tým sa vytvorí odkaz GH-pages vpravo hore pod štítkom GH-pages.

Potom skopírujte tento odkaz na publikovanú lokalitu, ako je znázornené nižšie. Odkaz použijete na nastavenie základnej referencie počas nasadenia.

3. Nainštalujte Angular-CLI-GHpages

Balík angular-cli-ghpages je nástroj, ktorý Angular CLI používa na účely nasadenia.

Prejdite späť do miestneho úložiska projektov. Potom nainštalujte a spustite angular-cli-ghpages pomocou tohto príkazu:

pridajte angular-cli-ghpages

4. Nasaďte aplikáciu

Ak chcete vytvoriť aplikáciu v produkcii, musíte ju pripojiť k vzdialenému serveru na GitHub.

Nakonfigurujte svoju aplikáciu na vzdialený server spustením nasledujúceho príkazu:

nasadenie --base-href=https://GithubUserName.github.io/GithubRepoName/

Nezabudnite nahradiť vyššie uvedený odkaz živým odkazom zo stránok GH

Úspešná zostava bude vyzerať ako na obrázku nižšie:

Potom prejdite na GitHub a kliknutím na odkaz GH-pages zobrazte svoj nasadený projekt.

Gratulujeme, nasadili ste aplikáciu Angular!

Ak odkaz zobrazuje iba súbor README, vráťte sa späť na nastavenia stránok GitHub GH. Uistite sa, že vybratá vetva je gh-pages a nie hlavná alebo hlavná vetva. Potom dajte päť minút a znova nabite. Niekedy GitHub potrebuje čas, aby reflektoval zmeny.

Ak sa chcete dozvedieť viac o tom, ako môžete použiť Angular CLI pri nasadení, navštívte stránku Uhlová dokumentácia.

Ako nasadiť aplikáciu Angular na stránky GitHub

Existuje niekoľko spôsobov, ako nasadiť aplikácie Angular na stránky GH, ale táto metóda je najjednoduchšia. Nastavíte svoj repo odkaz na stránky GH a použijete ho s Angular-CLI na nasadenie svojej aplikácie na stránky GitHub.

S Angular a Angular CLI môžete robiť oveľa viac. Neváhajte a preskúmajte. Použite CLI na nasadenie aplikácií na stránky GH pre bezplatnú viditeľnosť a hosťovanie vašich aplikácií.