Hvordan være vert for et vinkelnettsted ved å bruke Netlify og GitHub

Når du er vert for et Angular-nettsted på nettet, kan du velge mellom mange tilgjengelige plattformer. En av disse som du kan bruke gratis er Netlify.

Hvis du lagrer en kopi av nettstedets kildekode i et GitHub-lager, kan du bruke Netlify til å være vert for dette nettstedet.

Netlify omdistribuerer også nettstedet ditt automatisk når du sender nye endringer til depotgrenen du er vert for.

Hvordan lage et grunnleggende eksempel på vinkelapp

Du kan lage en enkel Angular-applikasjon ved å bruke en editor som Visual Studio Code. Du kan deretter være vert for denne nettsiden ved å bruke Netlify.

1. Lage en ny Angular-app.
2. Lag en enkel hjemmeside. Bytt ut koden i app.component.html fil med følgende landingssideinnhold:

   <div klasse=
   
   
   
   
   
   instagram viewer
   
   "beholder-mørk overskrift">
   <h2>Vår bedriftsside</h2>
   </div>
   <div klasse="beholder-hvit">
   <div klasse="innhold">
   <h2>Vår bedriftsside</h2>
   <s>Lær hvordan du designer, utvikler og vedlikeholder ditt profesjonelle nettsted på kort tid.</s>
   </div>
   </div>
   <div klasse="beholder-oransje">
   <div klasse="innhold">
   <h2>Hva vi gjør</h2>
   <s>Vi gir deg verktøyene til å utvikle nettsider og unike løsninger for dine kunder. Vi gir også opplæring for
    vedlikehold og andre nettstedrelaterte emner.</s>
   </div>
   </div>
   <div klasse="beholder-hvit">
   <div klasse="innhold">
   <h2>Om oss</h2>
   <s>Vi er en liten bedrift som opererer fra Melbourne, Australia. Våre rom er unikt utformet slik at kunder også kan
    besøk oss personlig.</s>
   </div>
   </div>
   <div klasse="beholder-mørk bunntekst">
   <s>Copyright 2022</s>
   </div>

3. Legg til litt styling til Angular-appen ved å legge til litt CSS til app.component.css fil:

   * {
    font-familie: "Arial", sans serif;
   }
   .Overskrift {
    polstring: 30px 50px;
   }
   .bunntekst {
    polstring: 5px 50px;
    tekst-align: center;
   }
   .container-mørk {
    bakgrunnsfarge: #202C39;
    farge: hvit;
    display: flex;
    align-items: center;
   }
   .container-oransje {
    bakgrunnsfarge: #FFD091;
    farge: #202C39;
   }
   .container-hvit {
    bakgrunnsfarge: whitesmoke;
    farge: #202C39;
   }
   .innhold {
    polstring: 100px 25%;
    display: flex;
    flex-retning: kolonne;
    linje-høyde: 2rem;
   skriftstørrelse: 1.2em;
    align-items: center;
    tekst-align: center;
   }

4. Legg til litt styling for den generelle Angular-appen styles.css:

   kropp {
    margin: 0;
    polstring: 0;
   }

5. For å teste appen, naviger til rotmappen ved hjelp av en terminal eller kommandolinje. Skriv inn ng tjene kommando:

   ng tjene

6. Vent til koden din er kompilert, og besøk http://localhost: 4200/ i en nettleser for å se appen din.
7. I .browserslistrc fil, fjern iOS safari versjon 15.2-15.3. Dette vil forhindre at kompatibilitetsfeil vises i konsollen når du bygger prosjektet.

   siste 1 Chrome-versjon
   siste 1 Firefox-versjon
   siste 2 Edge hovedversjoner
   siste 2 Safari hovedversjoner
   siste 2 iOS hovedversjoner
   Firefox ESR
   ikkeios_saf 15.2-15.3
   ikkesafari 15.2-15.3

8. Bygg koden din ved å bruke ng bygge kommando i terminalen:

   ng bygge

9. I .gitignore fil, fjern eller kommenter ut /dist linje. Å fjerne den vil sikre dist mappen er i settet med filer som du sender til GitHub-depotet ditt.

   # /avstand

Slik sender du vinkelkoden din til GitHub

Du må lagre koden din i et eksternt depot for at Netlify skal få tilgang til kildekoden.

Du kan opprette et nytt depot på GitHub, og skyve nettstedets kode til det depotet. Hvis du ikke er kjent med GitHub, kan det være nyttig å forstå noe av GitHubs grunnleggende funksjoner først.

1. Opprett et nytt depot på GitHub. Du kan gjøre dette ved å logge inn på GitHub og klikke videre Ny.
2. Skriv inn detaljene for ditt nye depot. Gi den et navn som "netlify-app", og en beskrivelse. Ikke initialiser depotet med en README-fil, .gitignore-fil eller lisens.
3. I en terminal på datamaskinen din, naviger til katalogen der du lagret Angular-appen. Kjør følgende kommandoer for å initialisere mappen din som et git-lager:

   git init
   git legg til.
   git begå -m "først begå"

4. Skyv koden inne i denne mappen til det nye eksterne depotet du laget på GitHub. Følg git remote legg til original, git gren, og git push kommandoer levert av GitHub på siden for eksternt depot:

   git remote legg til original <Din GitHub-repo-kobling>
   git gren -M main
   git push -u opprinnelse main

5. Du kan bekrefte at Angular-appkoden din nå er i det eksterne GitHub-depotet ditt ved å oppdatere GitHub-repository-siden.

Slik bruker du Netlify til å være vert for koden din

For å være vert for koden din med Netlify, må du gi den tilgang til GitHub-kildekoden din. Netlify vil da bruke dist mappen til Angular-prosjektet ditt for å publisere den bygde versjonen av koden din.

Du kan konfigurere alle disse innstillingene ved å følge konfigurasjonstrinnene når du oppretter et nytt nettsted:

1. Logg inn eller meld deg på Netlify. Du kan gjøre det ved å bruke GitHub-legitimasjonen din.
2. Utvid fra hovedoversikten og sidelistesiden Legg til nytt nettsted, og velg Importer et eksisterende prosjekt.
3. Plukke ut GitHub.
4. Klikk på Konfigurer Netlify på GitHub.
5. Klikk på Installere.
6. Netlify vil vise en liste over GitHub-repositoriene dine. Velg den du vil være vert for. Hvis du for eksempel har kalt depotet ditt "netlify-app", velger du "netlify-app" fra listen.
7. I konfigurasjonsskjermbildet, la Eieren, Gren å distribuere, og Grunnkatalog feltene med standardverdiene. Hvis du publiserte en spesifikk gren, for eksempel en egen "Produksjon"-gren, kan du legge den til i Gren å distribuere felt. Endre Bygg kommando feltet til "ng build". For Publiser katalog felt, skriv dist/. Hvis du ikke vet hva prosjektnavnet er, kan du navigere til dist-mappen til prosjektet ditt for å finne den der. For eksempel "dist/netlify-app".
8. Klikk på Distribuer nettstedet.
9. Vent til distribusjonen er fullført. Dette kan ta noen minutter, og du må kanskje oppdatere siden. Hvis alt går bra, vil du kunne se den vellykkede distribusjonen i distribusjonslisten. Klikk på din publiserte distribusjon, for eksempel, Produksjon: main@HEAD.
10. Klikk på Åpen produksjonsdistribusjon knapp.
11. Nå kan du se nettstedet ditt i en annen fane ved å bruke en URL i formatet .netify.app. Hvis du er vert for et nettsted med flere viderekoblinger, kan det hende du ikke kan omdirigere til andre sider. I dette tilfellet er det en måte å fikse en mislykket omdirigering på Netlify. Hvis du vil, kan du også endre ditt gratis domenenavn.

Hosting av nettstedet ditt ved hjelp av GitHub og Netlify

Forhåpentligvis kan du nå være vert for et nettsted ved å bruke GitHub og Netlify. Du kan sette opp automatiske distribusjoner til visse grener av et GitHub-depot. På denne måten kan du automatisere og effektivisere distribusjonen av nettstedet ditt.

Men Netlify er ikke den eneste måten du kan distribuere en Angular-app på nettet. Du kan også bruke andre plattformer som GitHub Pages.