Kuidas majutada nurgelist veebisaiti Netlify ja GitHubi abil

Angulari veebisaiti veebis majutades saate valida paljude saadaolevate platvormide vahel. Üks neist, mida saate tasuta kasutada, on Netlify.

Kui salvestate oma veebisaidi lähtekoodi koopia GitHubi hoidlasse, saate selle saidi hostimiseks kasutada Netlifyt.

Netlify paigutab teie saidi automaatselt ümber ka siis, kui muudate teie hostitavasse hoidla harusse uusi muudatusi.

Kuidas luua põhilist nurgarakendust

Saate luua lihtsa Angular-rakenduse, kasutades redaktorit, näiteks Visual Studio Code. Seejärel saate seda veebisaiti Netlify abil hostida.

1. Loo uus Angular rakendus.
2. Looge lihtne koduleht. Asendage kood jaotises app.component.html fail järgmise sihtlehe sisuga:

   <div klass="konteiner-tume päis">
   <h2>Meie ettevõtte veebisait
   
   
   
   
   
   instagram viewer
   
   </h2>
   </div>
   <div klass="konteiner-valge">
   <div klass="sisu">
   <h2>Meie ettevõtte veebisait</h2>
   <lk>Õppige oma professionaalset veebisaiti kiiresti kujundama, arendama ja hooldama.</lk>
   </div>
   </div>
   <div klass="konteiner-oranž">
   <div klass="sisu">
   <h2>Mida me teeme</h2>
   <lk>Anname teile tööriistad veebisaitide ja ainulaadsete lahenduste arendamiseks teie klientidele. Pakume ka koolitust
    hooldus ja muud veebisaidiga seotud teemad.</lk>
   </div>
   </div>
   <div klass="konteiner-valge">
   <div klass="sisu">
   <h2>Meist</h2>
   <lk>Oleme väikeettevõte, mis tegutseb Austraalias Melbourne'is. Meie ruumid on ainulaadselt kujundatud, et ka kliendid saaksid seda teha
    külastage meid isiklikult.</lk>
   </div>
   </div>
   <div klass="konteiner-tume jalus">
   <lk>Autoriõigus 2022</lk>
   </div>

3. Lisage rakendusele Angular veidi stiili, lisades rakendusele CSS-i app.component.css fail:

   * {
    font-perekond: "Arial", sans-serif;
   }
   .päis {
    polsterdus: 30px 50px;
   }
   .jalus {
    polsterdus: 5px 50px;
    teksti joondamine: keskel;
   }
   .konteiner-tume {
    taustavärv: #202C39;
    värv: valge;
    ekraan: flex;
    joonda-elemendid: keskel;
   }
   .konteiner-oranž {
    taustavärv: #FFD091;
    värv: #202C39;
   }
   .konteiner-valge {
    taustavärv: valge suitsu;
    värv: #202C39;
   }
   .sisu {
    polster: 100px 25%;
    ekraan: flex;
    paindesuund: veerg;
    joone kõrgus: 2rem;
   fondi suurus: 1.2em;
    joonda-elemendid: keskel;
    teksti joondamine: keskel;
   }

4. Lisage üldisele Angular rakendusele veidi stiili stiilid.css:

   keha {
    marginaal: 0;
    polsterdus: 0;
   }

5. Rakenduse testimiseks liikuge terminali või käsurea abil selle juurkausta. Sisestage teenida käsk:

   teenida

6. Oodake, kuni kood kompileeritakse, ja külastage http://localhost: 4200/ oma rakenduse vaatamiseks veebibrauseris.
7. Aastal .browserslistrc faili, eemaldage iOS safari versioonid 15.2–15.3. See hoiab ära ühilduvusvigade kuvamise konsoolis projekti koostamisel.

   viimane 1 Chrome'i versioon
   viimane 1 Firefoxi versioon
   viimased 2 Edge suuremat versiooni
   2 viimast Safari suuremat versiooni
   2 viimast iOS-i peamist versiooni
   Firefox ESR
   mitteios_saf 15.2-15.3
   mittesafari 15.2-15.3

8. Koostage oma kood, kasutades ehitada terminalis käsk:

   ehitada

9. Aastal .gitignoreeri faili, eemaldage või kommenteerige /dist rida. Selle eemaldamine tagab dist kaust on failide komplektis, mille edastate oma GitHubi hoidlasse.

   # /dist

Kuidas lükata oma nurgakood GitHubisse

Peate oma koodi salvestama kaughoidlasse, et Netlify pääseks lähtekoodile juurde.

Saate luua GitHubis uue hoidla ja edastada oma veebisaidi koodi sellesse hoidlasse. Kui te pole GitHubiga tuttav, võib olla kasulik mõnda neist mõista GitHubi põhifunktsioonid esiteks.

1. Looge GitHubis uus hoidla. Seda saate teha, logides GitHubisse sisse ja klõpsates nuppu Uus.
2. Sisestage oma uue hoidla üksikasjad. Andke sellele nimi, näiteks "netlify-app" ja kirjeldus. Ärge lähtestage hoidlat README-faili, .gitignore-faili või litsentsiga.
3. Liikuge arvuti terminalis kataloogi, kuhu oma Angular rakenduse salvestasite. Kausta git-hoidlana lähtestamiseks käivitage järgmised käsud:

   git init
   git add .
   git pühenduma -m "kõigepealt pühenduma"

4. Lükake selles kaustas olev kood GitHubis loodud uude kaughoidlasse. Mine järgi git remote lisa originaal, git filiaalja git push GitHubi antud käsud teie kaughoidla lehel:

   git remote lisa originaal <Teie GitHubi repo link>
   git haru -M main
   git push -u päritolu peamine

5. Saate kinnitada, et teie Angulari rakenduse kood on nüüd teie GitHubi kaughoidlas, värskendades GitHubi hoidla lehte.

Kuidas kasutada Netlifyd oma koodi hostimiseks

Koodi Netlify abil hostimiseks peate andma sellele juurdepääsu oma GitHubi lähtekoodile. Netlify kasutab seejärel dist oma Angular projekti kausta, et avaldada oma koodi ehitatud versioon.

Kõiki neid sätteid saate konfigureerida, järgides uue saidi loomisel konfiguratsioonisamme.

1. Logi sisse või registreeru Netlify. Saate seda teha oma GitHubi mandaatide abil.
2. Laiendage peamisel armatuurlaual ja saitide loendi lehel Lisa uus saitja valige Importige olemasolev projekt.
3. Valige GitHub.
4. Kliki Seadistage Netlify GitHubis.
5. Kliki Installige.
6. Netlify kuvab teie GitHubi hoidlate loendi. Valige see, mida soovite majutada. Näiteks kui olete andnud oma hoidlale nimeks "netlify-app", valige loendist "netlify-app".
7. Konfiguratsioonikuval jätke Omanik, Filiaal kasutuselevõtuksja Põhikataloog väljad nende vaikeväärtustega. Kui avaldasite konkreetse haru, näiteks eraldi "Tootmise" haru, võite selle lisada Filiaal kasutuselevõtuks valdkonnas. Muuda Ehita käsk väljast "ng build". Jaoks Avalda kataloog väli, tippige dist/. Kui te ei tea, mis projekti nimi on, saate selle leidmiseks navigeerida oma projekti kausta dist. Näiteks "dist/netlify-app".
8. Kliki Saidi juurutamine.
9. Oodake, kuni juurutamine on lõpule viidud. Selleks võib kuluda mõni minut ja peate võib-olla lehte värskendama. Kui kõik läheb hästi, näete edukat juurutamist juurutuste loendis. Klõpsake näiteks avaldatud juurutusel, Tootmine: main@HEAD.
10. Klõpsake nuppu Avatud tootmise juurutamine nuppu.
11. Nüüd saate vaadata oma veebisaiti teisel vahekaardil, kasutades URL-i vormingus .netlify.app. Kui hostite mitme ümbersuunamisega veebisaiti, ei pruugi teil olla võimalik teistele lehtedele ümber suunata. Sel juhul on võimalus parandage Netlify ebaõnnestunud ümbersuunamine. Kui soovite, saate ka muuta oma tasuta domeeninime.

Veebisaidi hostimine GitHubi ja Netlify abil

Loodetavasti saate nüüd GitHubi ja Netlify abil veebisaiti edukalt hostida. Saate seadistada automaatse juurutamise GitHubi hoidla teatud harudesse. Nii saate oma veebisaidi juurutamist automatiseerida ja sujuvamaks muuta.

Kuid Netlify pole ainus viis Angulari rakenduse veebis juurutamiseks. Võite kasutada ka muid platvorme, näiteks GitHub Pages.