Hur man är värd för en kantig webbplats med Netlify och GitHub

När du är värd för en Angular-webbplats online kan du välja mellan många tillgängliga plattformar. En av dessa som du kan använda gratis är Netlify.

Om du lagrar en kopia av din webbplats källkod i ett GitHub-förråd kan du använda Netlify för att vara värd för den webbplatsen.

Netlify distribuerar också automatiskt din webbplats när du driver några nya ändringar i arkivet som du är värd för.

Hur man skapar en grundläggande exempel på vinkelapp

Du kan skapa en enkel Angular-applikation med hjälp av en redigerare som Visual Studio Code. Du kan sedan vara värd för denna webbplats med Netlify.

1. Skapa en nya Angular-appen.
2. Skapa en enkel hemsida. Byt ut koden i app.component.html fil med följande innehåll på målsidan:

   <div klass="container-mörk rubrik
   
   
   
   
   
   instagram viewer
   
   ">
   <h2>Vår företagswebbplats</h2>
   </div>
   <div klass="behållare-vit">
   <div klass="innehåll">
   <h2>Vår företagswebbplats</h2>
   <sid>Lär dig hur du designar, utvecklar och underhåller din professionella webbplats på nolltid.</s>
   </div>
   </div>
   <div klass="behållare-orange">
   <div klass="innehåll">
   <h2>Vad vi gör</h2>
   <sid>Vi ger dig verktygen för att utveckla hemsidor och unika lösningar för dina kunder. Vi ger även utbildning för
    underhåll och andra webbplatsrelaterade ämnen.</s>
   </div>
   </div>
   <div klass="behållare-vit">
   <div klass="innehåll">
   <h2>Om oss</h2>
   <sid>Vi är ett litet företag med verksamhet från Melbourne, Australien. Våra utrymmen är unikt utformade så att kunder också kan
    besök oss personligen.</s>
   </div>
   </div>
   <div klass="container-mörk sidfot">
   <sid>Copyright 2022</s>
   </div>

3. Lägg till lite styling till Angular-appen genom att lägga till lite CSS till app.component.css fil:

   * {
    typsnittsfamilj: "Arial", sans serif;
   }
   .rubrik {
    stoppning: 30px 50px;
   }
   .sidfot {
    stoppning: 5px 50px;
    text-align: center;
   }
   .container-mörk {
    bakgrundsfärg: #202C39;
    färg vit;
    display: flex;
    align-items: center;
   }
   .container-orange {
    bakgrundsfärg: #FFD091;
    Färg: #202C39;
   }
   .container-vit {
    bakgrundsfärg: vitrök;
    Färg: #202C39;
   }
   .innehåll {
    stoppning: 100px 25%;
    display: flex;
    flex-riktning: kolumn;
    linje-höjd: 2rem;
   textstorlek: 1.2em;
    align-items: center;
    text-align: center;
   }

4. Lägg till lite styling för den övergripande Angular-appen styles.css:

   kropp {
    marginal: 0;
    stoppning: 0;
   }

5. För att testa appen, navigera till dess rotmapp med hjälp av en terminal eller kommandorad. Skriv ng tjäna kommando:

   ng tjäna

6. Vänta på att din kod kompileras och besök http://localhost: 4200/ i en webbläsare för att se din app.
7. I den .browserslistrc fil, ta bort iOS safari version 15.2-15.3. Detta kommer att förhindra att kompatibilitetsfel visas i konsolen när du bygger projektet.

   senaste versionen av Chrome
   senaste versionen av Firefox
   senaste 2 Edge större versioner
   senaste 2 Safari större versioner
   senaste 2 iOS större versioner
   Firefox ESR
   inteios_saf 15.2-15.3
   intesafari 15.2-15.3

8. Bygg din kod med hjälp av ng bygga kommando i terminalen:

   ng bygga

9. I den .gitignore fil, ta bort eller kommentera /dist linje. Att ta bort det kommer att säkerställa dist mappen finns i uppsättningen filer som du skickar till ditt GitHub-förråd.

   # /avstånd

Hur du skickar din vinkelkod till GitHub

Du måste lagra din kod i ett fjärrlager för att Netlify ska få tillgång till källkoden.

Du kan skapa ett nytt arkiv på GitHub och skicka din webbplats kod till det arkivet. Om du inte är bekant med GitHub kan det vara användbart att förstå några av dem GitHubs grundläggande funktioner först.

1. Skapa ett nytt arkiv på GitHub. Du kan göra detta genom att logga in på GitHub och klicka vidare Ny.
2. Ange detaljerna för ditt nya arkiv. Ge den ett namn som "netlify-app" och en beskrivning. Initiera inte förvaret med en README-fil, .gitignore-fil eller licens.
3. I en terminal på din dator, navigera till katalogen där du lagrade din Angular-app. Kör följande kommandon för att initiera din mapp som ett git-förråd:

   git init
   git add .
   git begå -m "först begå"

4. Tryck in koden i den här mappen till det nya fjärrförrådet du skapade på GitHub. Följ git remote lägg till original, git gren, och git push kommandon från GitHub på din fjärrförvarssida:

   git remote lägg till original <Din GitHub-repo-länk>
   git branch -M main
   git push -u ursprung main

5. Du kan bekräfta att din Angular-appkod nu finns i ditt fjärranslutna GitHub-förråd genom att uppdatera GitHub-förrådets sida.

Hur man använder Netlify för att vara värd för din kod

För att vara värd för din kod med Netlify måste du ge den tillgång till din GitHub-källkod. Netlify kommer då att använda dist mapp i ditt Angular-projekt för att publicera den byggda versionen av din kod.

Du kan konfigurera alla dessa inställningar genom att följa konfigurationsstegen när du skapar en ny webbplats:

1. Logga in eller registrera dig för Netlify. Du kan göra det med dina GitHub-uppgifter.
2. Expandera från huvudinstrumentpanelen och sidan med webbplatslistan Lägg till ny webbplatsoch välj Importera ett befintligt projekt.
3. Välj GitHub.
4. Klicka på Konfigurera Netlify på GitHub.
5. Klicka på Installera.
6. Netlify kommer att visa en lista över dina GitHub-förråd. Välj den som du vill vara värd för. Om du till exempel har döpt ditt arkiv till "netlify-app", välj sedan "netlify-app" från listan.
7. På konfigurationsskärmen lämnar du Ägare, Filial att distribuera, och Baskatalog fält till sina standardvärden. Om du publicerade en specifik gren, till exempel en separat "Produktions"-gren, kan du lägga till det i Filial att distribuera fält. Ändra Bygg kommando fältet till "ng build". För Publicera katalog fält, skriv dist/. Om du inte vet vad projektnamnet är kan du navigera till dist-mappen för ditt projekt för att hitta det där. Till exempel "dist/netlify-app".
8. Klicka på Implementera webbplats.
9. Vänta tills distributionen är klar. Detta kan ta några minuter och du kan behöva uppdatera sidan. Om allt går bra kommer du att kunna se den lyckade distributionen i distributionslistan. Klicka på din publicerade distribution, till exempel, Produktion: main@HEAD.
10. Klicka på Öppen produktionsinstallation knapp.
11. Nu kan du se din webbplats på en annan flik, med hjälp av en URL i formatet .netify.app. Om du är värd för en webbplats med flera omdirigeringar kanske du inte kan omdirigera till andra sidor. I det här fallet finns det ett sätt att fixa en misslyckad omdirigering på Netlify. Om du vill kan du också ändra ditt kostnadsfria domännamn.

Hosta din webbplats med GitHub och Netlify

Förhoppningsvis kan du nu framgångsrikt vara värd för en webbplats med GitHub och Netlify. Du kan ställa in automatiska distributioner till vissa grenar av ett GitHub-förråd. På så sätt kan du automatisera och effektivisera implementeringen av din webbplats.

Men Netlify är inte det enda sättet du kan distribuera en Angular-app online. Du kan också använda andra plattformar som GitHub Pages.