Implementacija Angular aplikacija na GitHub stranice izvrstan je način da ih besplatno hostirate. Angular je popularan JavaScript okvir za izradu jednostraničkih aplikacija.
Angular ima sveobuhvatno sučelje naredbenog retka koje podržava brzu izradu i postavljanje JavaScript aplikacija. Angular CLI ima nekoliko naredbi za stvaranje, izgradnju, posluživanje i generiranje komponenti aplikacije.
Također možete koristiti CLI za implementaciju Angular aplikacija na različite ciljeve, uključujući GitHub stranice.
Što trebaš
Da biste maksimalno iskoristili ovaj vodič, morate imati sljedeće vještine i alate:
- Trebali biste biti upoznati s osnove Angulara, poput koncepta aplikacija, postavki, URL-ova itd.
- Vi ste upoznati sa osnove GitHuba i Git, poput stvaranja GitHub računa, stvaranja git repozitorija (repo) i GitHub stranica (GH-stranica).
- Imate Angular aplikaciju spremnu za implementaciju.
- Vaš osnovni URL je na ispravnom putu. Implementacije na GH-stranice ne uspijevaju zbog pogrešnog postavljanja base-href (base-url).
- GitHub račun.
- GitHub spremište (repo) s kodom aplikacije.
Sada kada ste sve to postavili, počnimo s postupkom implementacije.
Proces implementacije
Za početak, trebali ste stvoriti GitHub repozitorij za svoj projekt i gurnuti kod u glavni/glavni podružnica.
Zatim stvorite granu GH-stranica.
1. Stvorite podružnicu GH-pages
Ovo je hack koji će vam pomoći da dobijete vezu GH-stranica za pomoć pri postavljanju base-href.
Prvo kreirajte GH-stranice u vašem lokalnom repozitoriju sljedećom naredbom:
git grana gh-straniceZatim se odjavite iz glavne grane na GH-stranice da biste prenijeli sav kod.
git checkout gh-straniceZatim gurnite GH-stranice na GitHub da biste stvorili udaljenu granu GH-stranica.
git push origin gh-straniceKliknite na alatnoj traci ispod naziva spremišta Postavke > Stranice.
Pod, ispod Izrada i implementacija, Izaberi Postavite iz podružnice. Zatim odaberite gh-stranice kao naziv podružnice, zatim kliknite Uštedjeti. Ovo će stvoriti vezu GH-stranica u gornjem desnom kutu ispod oznake GH-stranica.
Zatim kopirajte ovu vezu na objavljenu stranicu kao što je prikazano u nastavku. Koristit ćete vezu za postavljanje base-ref tijekom implementacije.
3. Instalirajte Angular-CLI-GHpages
Paket angular-cli-ghpages je alat koji Angular CLI koristi za potrebe implementacije.
Vratite se na svoje lokalno spremište projekta. Zatim instalirajte i pokrenite angular-cli-ghpages ovom naredbom:
ng dodajte kutne-cli-gh stranice4. Postavite aplikaciju
Da biste izradili aplikaciju u produkciji, morate je povezati s udaljenim poslužiteljem na GitHubu.
Konfigurirajte svoju aplikaciju na udaljenom poslužitelju pokretanjem sljedeće naredbe:
ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/Ne zaboravite zamijeniti gornji link sa živim linkom sa GH stranica
Uspješna izgradnja izgledat će kao na slici ispod:
Zatim idite na GitHub i kliknite vezu GH-pages da biste vidjeli svoj implementirani projekt.
Čestitamo, implementirali ste svoju Angular aplikaciju!
Ako poveznica prikazuje samo datoteku README, vratite se na postavke GitHub GH stranica. Osigurajte da je odabrana grana gh-pages, a ne glavna ili glavna grana. Zatim pričekajte pet minuta i ponovno učitajte. Ponekad GitHubu treba vremena da odrazi promjene.
Da biste saznali više o tome kako možete koristiti Angular CLI u implementaciji, posjetite Kutna dokumentacija.
Kako implementirati Angular aplikaciju na GitHub stranice
Postoji nekoliko načina za implementaciju Angular aplikacija na GH stranice, ali ova metoda je najlakša. Postavljate svoju repo vezu GH-stranica i koristite je s Angular-CLI-jem za implementaciju svoje aplikacije na GitHub stranice.
S Angularom i Angular CLI možete učiniti puno više. Slobodno istražujte. Koristite CLI za implementaciju aplikacija na GH-stranice za besplatnu vidljivost i hosting za vaše aplikacije.
