Sådan hoster du et kantet websted ved hjælp af Netlify og GitHub

Når du hoster et Angular-websted online, kan du vælge mellem mange tilgængelige platforme. En af disse, som du kan bruge gratis, er Netlify.

Hvis du gemmer en kopi af dit websteds kildekode i et GitHub-lager, kan du bruge Netlify til at hoste dette websted.

Netlify omdistribuerer også automatisk dit websted, når du skubber nye ændringer til den lagerafdeling, som du hoster.

Sådan opretter du en grundlæggende eksempel Angular App

Du kan oprette en simpel Angular-applikation ved hjælp af en editor såsom Visual Studio Code. Du kan derefter hoste denne hjemmeside ved hjælp af Netlify.

1. Lave en ny Angular app.
2. Opret en simpel startside. Udskift koden i app.component.html fil med følgende destinationssideindhold:

   <div klasse=
   
   
   
   
   
   instagram viewer
   
   "beholder-mørk overskrift">
   <h2>Vores virksomhedshjemmeside</h2>
   </div>
   <div klasse="beholder-hvid">
   <div klasse="indhold">
   <h2>Vores virksomhedshjemmeside</h2>
   <s>Lær hvordan du designer, udvikler og vedligeholder din professionelle hjemmeside på ingen tid.</s>
   </div>
   </div>
   <div klasse="beholder-orange">
   <div klasse="indhold">
   <h2>Hvad vi gør</h2>
   <s>Vi giver dig værktøjerne til at udvikle hjemmesider og unikke løsninger til dine kunder. Vi sørger også for træning vedr
    vedligeholdelse og andre webstedsrelaterede emner.</s>
   </div>
   </div>
   <div klasse="beholder-hvid">
   <div klasse="indhold">
   <h2>Om os</h2>
   <s>Vi er en lille virksomhed, der opererer fra Melbourne, Australien. Vores rum er unikt udformet, så kunderne også kan
    besøg os personligt.</s>
   </div>
   </div>
   <div klasse="container-mørk sidefod">
   <s>Copyright 2022</s>
   </div>

3. Tilføj noget styling til Angular-appen ved at tilføje noget CSS til app.component.css fil:

   * {
    skrifttype-familie: "Arial", sans serif;
   }
   .header {
    polstring: 30px 50px;
   }
   .footer {
    polstring: 5px 50px;
    tekst-align: center;
   }
   .container-mørk {
    baggrundsfarve: #202C39;
    farve: hvid;
    display: flex;
    align-items: center;
   }
   .container-orange {
    baggrundsfarve: #FFD091;
    farve: #202C39;
   }
   .container-hvid {
    baggrundsfarve: hvid røg;
    farve: #202C39;
   }
   .indhold {
    polstring: 100px 25%;
    display: flex;
    flex-retning: kolonne;
    line-højde: 2rem;
   skriftstørrelse: 1.2em;
    align-items: center;
    tekst-align: center;
   }

4. Tilføj lidt styling til den overordnede Angular-app styles.css:

   krop {
    margin: 0;
    polstring: 0;
   }

5. For at teste appen skal du navigere til dens rodmappe ved hjælp af en terminal eller kommandolinje. Indtast ng tjene kommando:

   ng tjene

6. Vent på, at din kode kompilerer, og besøg http://localhost: 4200/ i en webbrowser for at se din app.
7. I den .browserslistrc fil, fjern iOS safari version 15.2-15.3. Dette vil forhindre kompatibilitetsfejl i at blive vist i konsollen, når du bygger projektet.

   sidste 1 Chrome-version
   sidste 1 Firefox-version
   sidste 2 Edge større versioner
   sidste 2 Safari store versioner
   sidste 2 iOS større versioner
   Firefox ESR
   ikkeios_saf 15.2-15.3
   ikkesafari 15.2-15.3

8. Byg din kode ved hjælp af ng bygge kommando i terminalen:

   ng bygge

9. I den .gitignore fil, fjern eller kommenter ud af /dist linje. Fjernelse af det vil sikre dist mappen er i det sæt filer, du sender til dit GitHub-lager.

   # /dist

Sådan skubber du din vinkelkode til GitHub

Du skal gemme din kode i et fjernlager, for at Netlify kan få adgang til kildekoden.

Du kan oprette et nyt lager på GitHub og skubbe dit websteds kode til det depot. Hvis du ikke er bekendt med GitHub, kan det være nyttigt at forstå nogle af dem GitHubs grundlæggende funktioner først.

1. Opret et nyt lager på GitHub. Det kan du gøre ved at logge ind på GitHub og klikke videre Ny.
2. Indtast detaljerne for dit nye lager. Giv den et navn såsom "netlify-app" og en beskrivelse. Initialiser ikke depotet med en README-fil, .gitignore-fil eller licens.
3. I en terminal på din computer skal du navigere til den mappe, hvor du gemte din Angular-app. Kør følgende kommandoer for at initialisere din mappe som et git-lager:

   git init
   git tilføje.
   git begå -m "først begå"

4. Skub koden inde i denne mappe til det nye fjernlager, du har lavet på GitHub. Følg git fjernbetjening tilføj original, git gren, og git skub kommandoer leveret af GitHub på din fjernlagerside:

   git fjernbetjening tilføj original <Dit GitHub-repo-link>
   git branch -M main
   git push -u oprindelse main

5. Du kan bekræfte, at din Angular-appkode nu er i dit eksterne GitHub-lager ved at opdatere GitHub-lagersiden.

Sådan bruger du Netlify til at hoste din kode

For at hoste din kode ved hjælp af Netlify, skal du give den adgang til din GitHub-kildekode. Netlify vil derefter bruge dist mappe i dit Angular-projekt for at udgive den indbyggede version af din kode.

Du kan konfigurere alle disse indstillinger ved at følge konfigurationstrinnene, når du opretter et nyt websted:

1. Log ind eller tilmeld dig Netlify. Du kan gøre det ved at bruge dine GitHub-legitimationsoplysninger.
2. Udvid fra hovedbetjeningspanelet og sidelistesiden Tilføj nyt websted, og vælg Importer et eksisterende projekt.
3. Vælg GitHub.
4. Klik på Konfigurer Netlify på GitHub.
5. Klik på Installere.
6. Netlify viser en liste over dine GitHub-depoter. Vælg den, du gerne vil være vært for. For eksempel, hvis du har navngivet dit lager "netlify-app", så vælg "netlify-app" fra listen.
7. I konfigurationsskærmen skal du forlade Ejer, Filial at implementere, og Basismappe felter med deres standardværdier. Hvis du udgav en specifik gren, såsom en separat "Produktion"-gren, kunne du tilføje det til Filial at implementere Mark. Skift Byg kommando felt til "ng build". For Udgiv bibliotek felt, skriv dist/. Hvis du ikke ved, hvad projektets navn er, kan du navigere til dit projekts dist-mappe for at finde det der. For eksempel "dist/netlify-app".
8. Klik på Implementer websted.
9. Vent på, at implementeringen er fuldført. Dette kan tage et par minutter, og du skal muligvis opdatere siden. Hvis alt går godt, vil du kunne se den vellykkede implementering på implementeringslisten. Klik på din offentliggjorte implementering, f.eks. Produktion: main@HEAD.
10. Klik på Åben produktionsimplementering knap.
11. Nu kan du se dit websted på en anden fane ved at bruge en URL i formatet .netlify.app. Hvis du hoster et websted med flere omdirigeringer, kan du muligvis ikke omdirigere til andre sider. I dette tilfælde er der en måde at rette en fejlagtig omdirigering på Netlify. Hvis du vil, kan du også ændre dit gratis domænenavn.

Hosting af dit websted ved hjælp af GitHub og Netlify

Forhåbentlig kan du nu med succes hoste et websted ved hjælp af GitHub og Netlify. Du kan konfigurere automatiske implementeringer til visse grene af et GitHub-lager. På denne måde kan du automatisere og strømline implementeringen af ​​dit websted.

Men Netlify er ikke den eneste måde, du kan implementere en Angular-app online. Du kan også bruge andre platforme såsom GitHub Pages.