Găzduiește gratuit site-ul tău Angular folosind acest proces simplu.
Când găzduiți un site web Angular online, puteți alege dintre multe platforme disponibile. Unul dintre acestea pe care le puteți folosi gratuit este Netlify.
Dacă stocați o copie a codului sursă al site-ului dvs. într-un depozit GitHub, puteți utiliza Netlify pentru a găzdui site-ul respectiv.
Netlify îți redistribuie automat site-ul atunci când introduci orice modificări noi în ramura depozitului pe care o găzduiești.
Cum să creați un exemplu de bază de aplicație angulară
Puteți crea o aplicație simplă Angular folosind un editor precum Visual Studio Code. Apoi puteți găzdui acest site web folosind Netlify.
- Creeaza o noua aplicație Angular.
- Creați o pagină de pornire simplă. Înlocuiți codul din
app.component.html fișier cu următorul conținut al paginii de destinație:
<div class="antet container-întunecat">
<h2>Site-ul nostru de afaceri</h2>
</div>
<div class="recipient-alb">
<div class="conţinut">
<h2>Site-ul nostru de afaceri</h2>
<p>Aflați cum să proiectați, să dezvoltați și să întrețineți site-ul dvs. profesional în cel mai scurt timp.</p>
</div>
</div>
<div class="container-portocaliu">
<div class="conţinut">
<h2>Ce facem</h2>
<p>Vă oferim instrumentele pentru a dezvolta site-uri web și soluții unice pentru clienții dvs. Oferim, de asemenea, instruire pentru
întreținere și alte subiecte legate de site-ul web.</p>
</div>
</div>
<div class="recipient-alb">
<div class="conţinut">
<h2>Despre noi</h2>
<p>Suntem o afacere mică care operează din Melbourne, Australia. Spațiile noastre sunt amenajate în mod unic, astfel încât și clienții să poată
vizitați-ne personal.</p>
</div>
</div>
<div class="container-subsol întunecat">
<p>Copyright 2022</p>
</div> - Adăugați ceva stil aplicației Angular adăugând câteva CSS la app.component.css fişier:
* {
familie de fonturi: "Arial", sans-serif;
}
.antet {
umplutură: 30px 50px;
}
.subsol {
umplutură: 5px 50px;
text-align: centru;
}
.container-întuneric {
culoare de fundal: #202C39;
culoare albă;
display: flex;
alinierea elementelor: centru;
}
.container-portocaliu {
culoare de fundal: #FFD091;
culoare: #202C39;
}
.recipient-alb {
culoare de fundal: fum alb;
culoare: #202C39;
}
.conţinut {
umplutură: 100px 25%;
display: flex;
flex-direcție: coloană;
linie-inaltime: 2rem;
marimea fontului: 1.2em;
alinierea elementelor: centru;
text-align: centru;
} - Adăugați ceva stil pentru aplicația generală Angular în stiluri.css:
corp {
marja: 0;
umplutură: 0;
} - Pentru a testa aplicația, navigați la folderul rădăcină folosind un terminal sau o linie de comandă. Tastați ng servi comanda:
ng servi - Așteptați compilarea codului și vizitați http://localhost: 4200/ într-un browser web pentru a vedea aplicația.
- În .browserslistrc fișier, eliminați iOS safari versiunea 15.2-15.3. Acest lucru va împiedica afișarea erorilor de compatibilitate în consolă atunci când construiți proiectul.
ultima versiune Chrome
ultima versiune de Firefox
ultimele 2 versiuni majore Edge
ultimele 2 versiuni majore Safari
ultimele 2 versiuni majore de iOS
Firefox ESR
nuios_saf 15.2-15.3
nusafari 15.2-15.3 - Construiește-ți codul folosind ng construi comanda din terminal:
ng construi - În .gitignore fișier, eliminați sau comentați /dist linia. Îndepărtarea acestuia va asigura dist folderul se află în setul de fișiere pe care le împingeți în depozitul dvs. GitHub.
# /dist
Cum să împingeți codul unghiular în GitHub
Va trebui să stocați codul într-un depozit de la distanță pentru ca Netlify să acceseze codul sursă.
Puteți crea un nou depozit pe GitHub și puteți împinge codul site-ului dvs. în acel depozit. Dacă nu sunteți familiarizat cu GitHub, ar putea fi util să înțelegeți unele dintre ele Caracteristicile de bază ale GitHub primul.
- Creați un nou depozit pe GitHub. Puteți face acest lucru conectându-vă la GitHub și făcând clic pe Nou.
- Introduceți detaliile pentru noul dvs. depozit. Dați-i un nume precum „netlify-app” și o descriere. Nu inițializați depozitul cu un fișier README, fișier .gitignore sau licență.
- Într-un terminal de pe computer, navigați la directorul în care ați stocat aplicația Angular. Rulați următoarele comenzi pentru a vă inițializa folderul ca depozit git:
git init
git add .
git comite -m "în primul rând comite" - Împingeți codul din acest folder în noul depozit de la distanță pe care l-ați creat pe GitHub. Urmează git remote adauga original, ramură git, și git push comenzile furnizate de GitHub pe pagina de depozit la distanță:
git remote adauga original <Link-ul dvs. de depozit GitHub>
git branch -M main
git push -u origin main - Puteți confirma că codul aplicației dvs. Angular se află acum în depozitul GitHub de la distanță, reîmprospătând pagina depozitului GitHub.
Cum să utilizați Netlify pentru a vă găzdui codul
Pentru a vă găzdui codul utilizând Netlify, va trebui să îi oferiți acces la codul sursă GitHub. Netlify va folosi apoi dist folderul proiectului Angular pentru a publica versiunea construită a codului.
Puteți configura toate aceste setări urmând pașii de configurare când creați un site nou:
- Conectați-vă sau înscrieți-vă la Netlify. Puteți face acest lucru folosind acreditările GitHub.
- Din tabloul de bord principal și pagina cu lista de site-uri, extindeți Adăugați site nou, și selectați Importați un proiect existent.
- Selectați GitHub.
- Click pe Configurați Netlify pe GitHub.
- Click pe Instalare.
- Netlify va afișa o listă a depozitelor dvs. GitHub. Selectați-l pe cel pe care doriți să îl găzduiți. De exemplu, dacă ați numit depozitul „netlify-app”, atunci selectați „netlify-app” din listă.
- În ecranul de configurare, lăsați Proprietar, Filială de desfășurat, și Directorul de bază câmpurile la valorile implicite. Dacă ați publica o anumită ramură, cum ar fi o ramură separată „Producție”, ați putea adăuga aceasta în Filială de desfășurat camp. Schimba Comanda de construire câmp la „ng build”. Pentru Publicați directorul câmp, tastați dist/
. Dacă nu știți care este numele proiectului, puteți naviga la folderul dist al proiectului pentru a-l găsi acolo. De exemplu, „dist/netlify-app”. - Click pe Implementează site-ul.
- Așteptați finalizarea implementării. Acest lucru poate dura câteva minute și poate fi necesar să reîmprospătați pagina. Dacă totul merge bine, veți putea vedea implementarea cu succes în lista de implementări. Faceți clic pe implementarea dvs. publicată, de exemplu, Producție: main@HEAD.
- Faceți clic pe Deschideți implementarea producției buton.
- Acum puteți vizualiza site-ul dvs. într-o altă filă, folosind o adresă URL în formatul de
.netlify.aplicația. Dacă găzduiți un site web cu mai multe redirecționări, este posibil să nu puteți redirecționa către alte pagini. În acest caz, există o modalitate de a remediați o redirecționare eșuată pe Netlify. Dacă vrei, poți și tu modificați numele de domeniu gratuit.
Găzduiți site-ul dvs. folosind GitHub și Netly
Sperăm că acum puteți găzdui cu succes un site web folosind GitHub și Netlify. Puteți configura implementări automate în anumite ramuri ale unui depozit GitHub. În acest fel, puteți automatiza și eficientiza implementarea site-ului dvs. web.
Dar Netlify nu este singura modalitate prin care poți implementa o aplicație Angular online. De asemenea, puteți utiliza alte platforme, cum ar fi GitHub Pages.