Kulmikkaan verkkosivuston isännöiminen Netlifyn ja GitHubin avulla

Kun isännöit Angular-verkkosivustoa verkossa, voit valita useiden käytettävissä olevien alustojen joukosta. Yksi niistä, jota voit käyttää ilmaiseksi, on Netlify.

Jos tallennat kopion verkkosivustosi lähdekoodista GitHub-tietovarastoon, voit isännöidä sivustoa Netlifyn avulla.

Netlify myös sijoittaa sivustosi automaattisesti uudelleen käyttöön, kun teet uusia muutoksia isännöimääsi arkiston haaraan.

Perusesimerkkikulmasovelluksen luominen

Voit luoda yksinkertaisen Angular-sovelluksen käyttämällä editoria, kuten Visual Studio Code. Voit sitten isännöidä tätä verkkosivustoa Netlifyn avulla.

1. Luo uusi Angular-sovellus.
2. Luo yksinkertainen kotisivu. Vaihda koodi kohtaan app.component.html tiedosto, jossa on seuraava aloitussivun sisältö:
   instagram viewer

   <div class="kontti-tumma otsikko">
   <h2>Yrityksemme verkkosivusto</h2>
   </div>
   <div class="kontti-valkoinen">
   <div class="sisältö">
   <h2>Yrityksemme verkkosivusto</h2>
   <s>Opi suunnittelemaan, kehittämään ja ylläpitämään ammattimaista verkkosivustoasi hetkessä.</s>
   </div>
   </div>
   <div class="kontti-oranssi">
   <div class="sisältö">
   <h2>Mitä me teemme</h2>
   <s>Tarjoamme sinulle työkalut verkkosivustojen ja ainutlaatuisten ratkaisujen kehittämiseen asiakkaillesi. Tarjoamme myös koulutusta
    ylläpitoon ja muihin verkkosivuihin liittyviin aiheisiin.</s>
   </div>
   </div>
   <div class="kontti-valkoinen">
   <div class="sisältö">
   <h2>Meistä</h2>
   <s>Olemme pieni yritys, joka toimii Melbournessa, Australiassa. Tilamme ovat yksilöllisesti suunniteltuja, jotta myös asiakkaamme voivat
    vieraile meillä henkilökohtaisesti.</s>
   </div>
   </div>
   <div class="kontti-tumma alatunniste">
   <s>Tekijänoikeus 2022</s>
   </div>

3. Lisää tyyliä Angular-sovellukseen lisäämällä siihen CSS: ää app.component.css tiedosto:

   * {
    font-family: "Arial", sans-serif;
   }
   .header {
    täyte: 30px 50px;
   }
   .alatunniste {
    täyte: 5px 50px;
    tekstin tasaus: keskellä;
   }
   .container-tumma {
    taustaväri: #202C39;
    väri valkoinen;
    näyttö: flex;
    kohdista kohteet: keskellä;
   }
   .container-oranssi {
    taustaväri: #FFD091;
    väri: #202C39;
   }
   .container-white {
    taustaväri: whitesmoke;
    väri: #202C39;
   }
   .sisältö {
    täyte: 100px 25%;
    näyttö: flex;
    flex-suunta: pylväs;
    linjan korkeus: 2rem;
   Fonttikoko: 1.2em;
    kohdista kohteet: keskellä;
    tekstin tasaus: keskellä;
   }

4. Lisää tyyliä yleiseen Angular-sovellukseen styles.css:

   body {
    marginaali: 0;
    pehmuste: 0;
   }

5. Voit testata sovellusta siirtymällä sen juurikansioon päätelaitteen tai komentorivin avulla. Kirjoita palvella komento:

   palvella

6. Odota, että koodisi käännetään, ja vieraile http://localhost: 4200/ verkkoselaimessa nähdäksesi sovelluksesi.
7. Vuonna .browserslistrc tiedosto, poista iOS safari 15.2-15.3. Tämä estää yhteensopivuusvirheiden näkymisen konsolissa, kun rakennat projektia.

   1 viimeinen Chrome-versio
   1 viimeinen Firefox-versio
   viimeiset 2 Edgen pääversiot
   2 viimeistä Safarin pääversiota
   2 viimeistä iOS: n pääversiota
   Firefox ESR
   eiios_saf 15.2-15.3
   eisafari 15.2-15.3

8. Rakenna koodi käyttämällä ng rakentaa komento terminaalissa:

   ng rakentaa

9. Vuonna .gitignore tiedosto, poista tai kommentoi /dist linja. Sen poistaminen varmistaa dist kansio on tiedostojoukossa, jotka työnnät GitHub-tietovarastoon.

   # /dist

Kuinka työntää kulmakoodisi GitHubiin

Sinun on tallennettava koodisi etävarastoon, jotta Netlify voi käyttää lähdekoodia.

Voit luoda uuden arkiston GitHubissa ja lähettää verkkosivustosi koodin kyseiseen arkistoon. Jos GitHub ei ole sinulle tuttu, saattaa olla hyödyllistä ymmärtää joitakin niistä GitHubin perusominaisuudet ensimmäinen.

1. Luo uusi arkisto GitHubissa. Voit tehdä tämän kirjautumalla sisään GitHubiin ja napsauttamalla Uusi.
2. Anna uuden arkiston tiedot. Anna sille nimi, kuten "netlify-app" ja kuvaus. Älä alusta arkistoa README-tiedostolla, .gitignore-tiedostolla tai lisenssillä.
3. Siirry tietokoneesi päätteessä hakemistoon, johon tallensit Angular-sovelluksesi. Suorita seuraavat komennot alustaaksesi kansiosi git-arkistona:

   git init
   git add .
   git tehdä -m "ensin tehdä"

4. Työnnä tämän kansion sisällä oleva koodi uuteen etävarastoon, jonka loit GitHubissa. Seuraa git kaukosäädin lisää alkuperäinen, git haara, ja git push GitHubin antamat komennot etävarastosivullasi:

   git kaukosäädin lisää alkuperäinen <GitHub-repo-linkkisi>
   git haara -M main
   git push -u -alkuperäinen main

5. Voit varmistaa, että Angular-sovelluksesi koodi on nyt GitHub-etävarastossasi päivittämällä GitHub-tietovarastosivun.

Netlifyn käyttäminen koodisi isännöimiseen

Jotta voit isännöidä koodiasi Netlifyn avulla, sinun on annettava sille pääsy GitHub-lähdekoodiisi. Netlify käyttää sitten dist Angular-projektisi kansioon julkaistaksesi koodisi rakennettu versio.

Voit määrittää kaikki nämä asetukset noudattamalla määritysvaiheita uutta sivustoa luodessasi:

1. Kirjaudu sisään tai rekisteröidy Netlify. Voit tehdä sen käyttämällä GitHub-kirjautumistietojasi.
2. Laajenna päähallintapaneelissa ja sivustoluettelosivulla Lisää uusi sivustoja valitse Tuo olemassa oleva projekti.
3. Valitse GitHub.
4. Klikkaa Määritä Netlify GitHubissa.
5. Klikkaa Asentaa.
6. Netlify näyttää luettelon GitHub-tietovarastoistasi. Valitse se, jota haluat isännöidä. Jos esimerkiksi olet nimennyt arkistollesi "netlify-app", valitse luettelosta "netlify-app".
7. Jätä asetusnäytössä Omistaja, Haara käyttöön, ja Perushakemisto kentät oletusarvoillaan. Jos julkaisit tietyn haaran, kuten erillisen "Tuotanto"-haaran, voit lisätä sen osaan Haara käyttöön ala. Muuta Rakenna komento kentästä "ng build". Varten Julkaise hakemisto kenttä, kirjoita dist/. Jos et tiedä projektin nimeä, voit navigoida projektisi dist-kansioon löytääksesi sen sieltä. Esimerkiksi "dist/netlify-app".
8. Klikkaa Ota sivusto käyttöön.
9. Odota, että käyttöönotto on valmis. Tämä voi kestää muutaman minuutin, ja sinun on ehkä päivitettävä sivu. Jos kaikki menee hyvin, voit nähdä onnistuneen käyttöönoton käyttöönottoluettelossa. Napsauta julkaistua käyttöönottoa, esimerkiksi Tuotanto: main@HEAD.
10. Klikkaa Avaa tuotantokäyttöönotto -painiketta.
11. Nyt voit tarkastella verkkosivustoasi toisessa välilehdessä käyttämällä URL-osoitetta muodossa .netlify.app. Jos isännöit verkkosivustoa, jossa on useita uudelleenohjauksia, et ehkä voi uudelleenohjata muille sivuille. Tässä tapauksessa on olemassa keino korjaa epäonnistunut uudelleenohjaus Netlifyssa. Jos haluat, voit myös muokata ilmaista verkkotunnustasi.

Verkkosivustosi ylläpito GitHubin ja Netlifyn avulla

Toivottavasti voit nyt isännöidä verkkosivustoa onnistuneesti GitHubin ja Netlifyn avulla. Voit määrittää automaattisia käyttöönottoja tiettyihin GitHub-tietovaraston haaroihin. Tällä tavalla voit automatisoida ja virtaviivaistaa verkkosivustosi käyttöönoton.

Mutta Netlify ei ole ainoa tapa ottaa käyttöön Angular-sovellus verkossa. Voit myös käyttää muita alustoja, kuten GitHub Pages.