Kaip priglobti kampinę svetainę naudojant „Netlify“ ir „GitHub“.

Priglobdami Angular svetainę internete, galite rinktis iš daugybės galimų platformų. Vienas iš jų, kurį galite naudoti nemokamai, yra „Netlify“.

Jei saugote savo svetainės šaltinio kodo kopiją „GitHub“ saugykloje, galite naudoti „Netlify“ svetainei priglobti.

„Netlify“ taip pat automatiškai perkelia jūsų svetainę, kai įkeliate bet kokius naujus saugyklos šakos, kurią talpinate, pakeitimus.

Kaip sukurti pagrindinį kampinės programos pavyzdį

Galite sukurti paprastą „Angular“ programą naudodami redaktorių, pvz., „Visual Studio Code“. Tada galite priglobti šią svetainę naudodami „Netlify“.

1. Sukurti nauja Angular programa.
2. Sukurkite paprastą pagrindinį puslapį. Pakeiskite kodą app.component.html failą su tokiu nukreipimo puslapio turiniu:
   instagram viewer

   <div klasė ="konteinerio tamsi antraštė">
   <h2>Mūsų verslo svetainė</h2>
   </div>
   <div klasė ="konteineris-baltas">
   <div klasė ="turinys">
   <h2>Mūsų verslo svetainė</h2>
   <p>Sužinokite, kaip greitai sukurti, kurti ir prižiūrėti savo profesionalią svetainę.</p>
   </div>
   </div>
   <div klasė ="konteineris-oranžinė">
   <div klasė ="turinys">
   <h2>Ką mes darom</h2>
   <p>Suteikiame jums įrankius, leidžiančius kurti svetaines ir unikalius sprendimus savo klientams. Taip pat organizuojame mokymus
    priežiūra ir kitos su svetaine susijusios temos.</p>
   </div>
   </div>
   <div klasė ="konteineris-baltas">
   <div klasė ="turinys">
   <h2>Apie mus</h2>
   <p>Esame mažas verslas, veikiantis iš Melburno, Australijos. Mūsų erdvės yra unikaliai suprojektuotos, kad galėtų ir klientai
    aplankykite mus asmeniškai.</p>
   </div>
   </div>
   <div klasė ="konteineris-tamsi poraštė">
   <p>Autorių teisės 2022 m</p>
   </div>

3. Pridėkite šiek tiek stiliaus „Angular“ programoje, pridėdami šiek tiek CSS app.component.css failas:

   * {
    šrifto šeima: "Arial", sans-serif;
   }
   .antraštė {
    užpildymas: 30 piks. 50 piks.;
   }
   .poraštė {
    pamušalas: 5px 50px;
    teksto lygiavimas: centre;
   }
   .konteineris-tamsus {
    fono spalva: #202C39;
    spalva: balta;
    ekranas: lankstus;
    lygiuoti elementus: centre;
   }
   .konteineris-oranžinė {
    fono spalva: #FFD091;
    spalva: #202C39;
   }
   .konteineris-baltas {
    fono spalva: whitesmoke;
    spalva: #202C39;
   }
   .turinys {
    paminkštinimas: 100px 25%;
    ekranas: lankstus;
    lankstumo kryptis: stulpelis;
    linijos aukštis: 2rem;
   šrifto dydis: 1.2em;
    lygiuoti elementus: centre;
    teksto lygiavimas: centre;
   }

4. Pridėkite šiek tiek bendros „Angular“ programos stiliaus stiliai.css:

   kūnas {
    paraštė: 0;
    paminkštinimas: 0;
   }

5. Norėdami išbandyti programą, eikite į jos šakninį aplanką naudodami terminalą arba komandinę eilutę. Įveskite ng tarnauti komanda:

   ng tarnauti

6. Palaukite, kol kodas bus sukompiliuotas, ir apsilankykite http://localhost: 4200/ žiniatinklio naršyklėje, kad peržiūrėtumėte programą.
7. Viduje .browserslistrc failą, pašalinkite „iOS safari“ 15.2–15.3 versijas. Tai neleis, kad suderinamumo klaidos būtų rodomos konsolėje, kai kuriate projektą.

   paskutinė 1 „Chrome“ versija
   paskutinė 1 Firefox versija
   paskutinės 2 Edge pagrindinės versijos
   paskutinės 2 pagrindinės „Safari“ versijos
   paskutinės 2 pagrindinės iOS versijos
   Firefox ESR
   neios_saf 15.2-15.3
   nesafari 15.2-15.3

8. Sukurkite savo kodą naudodami statyti komanda terminale:

   statyti

9. Viduje .gitignore failą, pašalinkite arba pakomentuokite /dist linija. Jį pašalinus bus užtikrinta raj aplankas yra failų, kuriuos siunčiate į „GitHub“ saugyklą, rinkinyje.

   # /dist

Kaip nusiųsti kampinį kodą į „GitHub“.

Turėsite saugoti savo kodą nuotolinėje saugykloje, kad „Netlify“ galėtų pasiekti šaltinio kodą.

Galite sukurti naują saugyklą „GitHub“ ir perkelti savo svetainės kodą į tą saugyklą. Jei nesate susipažinę su „GitHub“, gali būti naudinga kai kuriuos suprasti Pagrindinės „GitHub“ funkcijos Pirmas.

1. Sukurkite naują saugyklą „GitHub“.. Tai galite padaryti prisijungę prie GitHub ir spustelėję Nauja.
2. Įveskite naujos saugyklos informaciją. Suteikite jam pavadinimą, pvz., „netlify-app“ ir aprašą. Neinicijuokite saugyklos naudodami README failą, .gitignore failą ar licenciją.
3. Kompiuterio terminale eikite į katalogą, kuriame išsaugojote „Angular“ programą. Vykdykite šias komandas, kad inicijuotų aplanką kaip git saugyklą:

   git init
   git pridėti.
   git įsipareigoti -m "pirmiausia įsipareigoti"

4. Perkelkite kodą šiame aplanke į naują nuotolinę saugyklą, kurią sukūrėte „GitHub“. Sekti git nuotolinio valdymo pultas pridėti originalą, gito šaka, ir git stumti komandos, kurias „GitHub“ pateikia nuotolinės saugyklos puslapyje:

   git nuotolinio valdymo pultas pridėti originalą <Jūsų GitHub repo nuoroda>
   git filialas -M pagrindinis
   git push -u kilmės pagrindinis

5. Galite patvirtinti, kad jūsų „Angular“ programos kodas dabar yra nuotolinėje „GitHub“ saugykloje, atnaujindami „GitHub“ saugyklos puslapį.

Kaip naudoti „Netlify“ kodui priglobti

Norėdami priglobti kodą naudodami „Netlify“, turėsite suteikti jam prieigą prie „GitHub“ šaltinio kodo. Tada „Netlify“ naudos raj Angular projekto aplanką, kad paskelbtumėte sukurtą kodo versiją.

Kurdami naują svetainę galite konfigūruoti visus šiuos nustatymus atlikdami konfigūravimo veiksmus:

1. Prisijunkite arba užsiregistruokite Netlify. Tai galite padaryti naudodami savo „GitHub“ kredencialus.
2. Išskleiskite pagrindiniame prietaisų skydelyje ir svetainių sąrašo puslapyje Pridėti naują svetainęir pasirinkite Importuokite esamą projektą.
3. Pasirinkite GitHub.
4. Spustelėkite Sukonfigūruokite „Netlify“ „GitHub“..
5. Spustelėkite Diegti.
6. „Netlify“ parodys jūsų „GitHub“ saugyklų sąrašą. Pasirinkite tą, kurį norite talpinti. Pavyzdžiui, jei saugyklą pavadinote „netlify-app“, tada sąraše pasirinkite „netlify-app“.
7. Konfigūracijos ekrane palikite Savininkas, Filialas diegti, ir Bazinis katalogas laukuose numatytosios vertės. Jei skelbiate konkrečią šaką, pvz., atskirą „Gamybos“ skyrių, galite įtraukti jį į Filialas diegti lauke. Pakeisti Sukurti komandą laukas į "ng build". Už Paskelbti katalogą laukas, įveskite dist/. Jei nežinote, koks yra projekto pavadinimas, galite pereiti į savo projekto dist aplanką ir ten jį rasti. Pavyzdžiui, „dist/netlify-app“.
8. Spustelėkite Įdiegti svetainę.
9. Palaukite, kol diegimas bus baigtas. Tai gali užtrukti kelias minutes ir gali tekti atnaujinti puslapį. Jei viskas klostysis gerai, diegimo sąraše galėsite matyti sėkmingą diegimą. Pavyzdžiui, spustelėkite paskelbtą diegimą, Gamyba: main@HEAD.
10. Spustelėkite ant Atviras gamybos diegimas mygtuką.
11. Dabar galite peržiūrėti savo svetainę kitame skirtuke, naudodami URL formatu .netlify.app. Jei priglobiate svetainę su keliais peradresavimais, gali nepavykti peradresuoti į kitus puslapius. Šiuo atveju yra būdas ištaisyti nepavykusį peradresavimą „Netlify“.. Jei norite, galite ir pakeisti savo nemokamą domeno vardą.

Svetainės priegloba naudojant „GitHub“ ir „Netlify“.

Tikimės, kad dabar galėsite sėkmingai priglobti svetainę naudodami „GitHub“ ir „Netlify“. Galite nustatyti automatinį diegimą tam tikrose „GitHub“ saugyklos šakose. Tokiu būdu galite automatizuoti ir supaprastinti savo svetainės diegimą.

Tačiau „Netlify“ nėra vienintelis būdas įdiegti „Angular“ programą internete. Taip pat galite naudoti kitas platformas, pvz., „GitHub Pages“.