Een hoekige website hosten met Netlify en GitHub

Wanneer u een Angular-website online host, kunt u kiezen uit vele beschikbare platforms. Een daarvan die u gratis kunt gebruiken, is Netlify.

Als u een kopie van de broncode van uw website opslaat in een GitHub-repository, kunt u Netlify gebruiken om die site te hosten.

Netlify implementeert uw site ook automatisch opnieuw wanneer u nieuwe wijzigingen doorgeeft aan de repositorytak die u host.

Hoe u een basisvoorbeeld van een Angular-app maakt

U kunt een eenvoudige Angular-toepassing maken met een editor zoals Visual Studio Code. U kunt deze website vervolgens hosten met behulp van Netlify.

1. Maak een nieuwe Angular-app.
2. Maak een eenvoudige startpagina. Vervang de code in de app.component.html bestand met de volgende bestemmingspagina-inhoud:
   instagram viewer

   <div klasse="container-dark header">
   <h2>Onze zakelijke website</h2>
   </div>
   <div klasse="container-wit">
   <div klasse="inhoud">
   <h2>Onze zakelijke website</h2>
   <P>Leer hoe u in een mum van tijd uw professionele website ontwerpt, ontwikkelt en onderhoudt.</P>
   </div>
   </div>
   <div klasse="container-oranje">
   <div klasse="inhoud">
   <h2>Wat we doen</h2>
   <P>Wij geven u de tools om websites en unieke oplossingen voor uw klanten te ontwikkelen. Ook verzorgen wij trainingen voor
    onderhoud en andere website gerelateerde onderwerpen.</P>
   </div>
   </div>
   <div klasse="container-wit">
   <div klasse="inhoud">
   <h2>Over ons</h2>
   <P>Wij zijn een klein bedrijf dat opereert vanuit Melbourne, Australië. Onze ruimtes zijn uniek ontworpen, zodat klanten dat ook kunnen
    bezoek ons ​​persoonlijk.</P>
   </div>
   </div>
   <div klasse="container-donkere voettekst">
   <P>Auteursrecht 2022</P>
   </div>

3. Voeg wat styling toe aan de Angular-app door wat CSS toe te voegen aan de app.component.css bestand:

   * {
    font-familie: "Ariaal", schreefloos;
   }
   .kop {
    opvulling: 30px 50px;
   }
   .voettekst {
    opvulling: 5px 50px;
    tekst uitlijnen: centreren;
   }
   .container-donker {
    Achtergrond kleur: #202C39;
    kleur wit;
    weergeven: flex;
    items uitlijnen: centreren;
   }
   .container-oranje {
    Achtergrond kleur: #FFD091;
    kleur: #202C39;
   }
   .container-wit {
    achtergrondkleur: witte rook;
    kleur: #202C39;
   }
   .inhoud {
    opvulling: 100px 25%;
    weergeven: flex;
    flex-richting: kolom;
    regelhoogte: 2rem;
   lettertypegrootte: 1.2em;
    items uitlijnen: centreren;
    tekst uitlijnen: centreren;
   }

4. Voeg wat styling toe voor de algehele Angular-app stijlen.css:

   lichaam {
    marge: 0;
    opvulling: 0;
   }

5. Om de app te testen, navigeert u naar de hoofdmap met behulp van een terminal of opdrachtregel. Typ de serveren commando:

   serveren

6. Wacht tot je code is gecompileerd en bezoek http://localhost: 4200/ in een webbrowser om uw app te bekijken.
7. In de .browserlijstrc bestand, verwijder iOS safari versie 15.2-15.3. Dit voorkomt dat er compatibiliteitsfouten in de console worden weergegeven wanneer u het project bouwt.

   laatste 1 Chrome-versie
   laatste 1 Firefox-versie
   laatste 2 Edge hoofdversies
   laatste 2 hoofdversies van Safari
   laatste 2 hoofdversies van iOS
   Firefox ESR
   nietios_saf 15.2-15.3
   nietsafari 15.2-15.3

8. Bouw uw code met behulp van de ng bouwen opdracht in de terminal:

   ng bouwen

9. In de .gitignore bestand, verwijder of becommentarieer het /dist lijn. Als u het verwijdert, zorgt u ervoor dat de afstand map bevindt zich in de set bestanden die u naar uw GitHub-repository pusht.

   # /afst

Hoe u uw Angular-code naar GitHub kunt pushen

U moet uw code opslaan in een externe opslagplaats zodat Netlify toegang heeft tot de broncode.

U kunt een nieuwe repository op GitHub maken en de code van uw website naar die repository pushen. Als je niet bekend bent met GitHub, kan het handig zijn om er wat van te begrijpen De basisfuncties van GitHub Eerst.

1. Maak een nieuwe repository op GitHub. Dit doe je door in te loggen op GitHub en op te klikken Nieuw.
2. Voer de details in voor uw nieuwe repository. Geef het een naam zoals "netlify-app" en een beschrijving. Initialiseer de repository niet met een README-bestand, .gitignore-bestand of licentie.
3. Navigeer in een terminal op uw computer naar de map waar u uw Angular-app hebt opgeslagen. Voer de volgende opdrachten uit om uw map te initialiseren als een git-repository:

   git begin
   git toevoegen.
   gek verbinden -m "eerst verbinden"

4. Push de code in deze map naar de nieuwe externe repository die je op GitHub hebt gemaakt. Volg de git remote origineel toevoegen, git tak, En git push commando's geleverd door GitHub op uw externe repositorypagina:

   git remote origineel toevoegen <Uw GitHub-repo-link>
   git tak -M hoofd
   git push -u oorsprong main

5. U kunt bevestigen dat uw Angular-app-code zich nu in uw externe GitHub-repository bevindt door de GitHub-repositorypagina te vernieuwen.

Hoe u Netlify gebruikt om uw code te hosten

Om uw code te hosten met Netlify, moet u deze toegang geven tot uw GitHub-broncode. Netlify gebruikt dan de afstand map van uw Angular-project om de gebouwde versie van uw code te publiceren.

U kunt al deze instellingen configureren door de configuratiestappen te volgen bij het maken van een nieuwe site:

1. Log in of meld je aan Netlificeren. U kunt dit doen met uw GitHub-inloggegevens.
2. Vouw vanuit het hoofddashboard en de sitelijstpagina uit Nieuwe website toevoegenen selecteer Importeer een bestaand project.
3. Selecteer GitHub.
4. Klik op Configureer Netlify op GitHub.
5. Klik op Installeren.
6. Netlify toont een lijst met uw GitHub-repository's. Selecteer degene die je wilt hosten. Als u uw repository bijvoorbeeld "netlify-app" heeft genoemd, selecteert u "netlify-app" in de lijst.
7. Verlaat in het configuratiescherm de Eigenaar, Tak om in te zetten, En Basismap velden op hun standaardwaarden. Als je een specifieke branch zou publiceren, zoals een aparte "Production" branch, dan zou je die kunnen toevoegen aan de Tak om in te zetten veld. Verander de Opdracht bouwen veld naar "ng build". Voor de Directory publiceren veld, type dist/. Als u niet weet wat de projectnaam is, kunt u naar de dist-map van uw project navigeren om het daar te vinden. Bijvoorbeeld 'dist/netlify-app'.
8. Klik op Site implementeren.
9. Wacht tot de implementatie is voltooid. Dit kan enkele minuten duren en mogelijk moet u de pagina vernieuwen. Als alles goed gaat, kunt u de succesvolle implementatie zien in de implementatielijst. Klik op uw gepubliceerde implementatie, bijvoorbeeld Productie: main@HEAD.
10. Klik op de Open productie-implementatie knop.
11. Nu kunt u uw website bekijken op een ander tabblad, met behulp van een URL in de indeling van .netlify.app. Als u een website met meerdere omleidingen host, kunt u mogelijk niet naar andere pagina's omleiden. In dit geval is er een manier om repareer een mislukte omleiding op Netlify. Als je wilt, kan dat ook uw gratis domeinnaam wijzigen.

Uw website hosten met GitHub en Netlify

Hopelijk kun je nu met succes een website hosten met GitHub en Netlify. U kunt automatische implementaties instellen voor bepaalde takken van een GitHub-repository. Op deze manier kunt u de implementatie van uw website automatiseren en stroomlijnen.

Maar Netlify is niet de enige manier waarop u een Angular-app online kunt implementeren. U kunt ook andere platforms gebruiken, zoals GitHub Pages.