Jak hostować stronę Angular za pomocą Netlify i GitHub

Hostując witrynę Angular online, możesz wybierać spośród wielu dostępnych platform. Jednym z nich, z którego możesz korzystać za darmo, jest Netlify.

Jeśli przechowujesz kopię kodu źródłowego swojej witryny w repozytorium GitHub, możesz użyć Netlify do hostowania tej witryny.

Netlify również automatycznie ponownie wdraża Twoją witrynę, gdy wprowadzasz nowe zmiany do gałęzi repozytorium, którą hostujesz.

Jak stworzyć podstawową przykładową aplikację Angular

Możesz utworzyć prostą aplikację Angular za pomocą edytora, takiego jak Visual Studio Code. Następnie możesz hostować tę witrynę za pomocą Netlify.

1. Stwórz nowa aplikacja Angulara.
2. Utwórz prostą stronę główną. Zastąp kod w aplikacja.komponent.html plik z następującą treścią strony docelowej:
   instagram viewer

   <klasa div="nagłówek ciemnego kontenera">
   <h2>Nasza witryna biznesowa</h2>
   </div>
   <klasa div="pojemnik-biały">
   <klasa div="treść">
   <h2>Nasza witryna biznesowa</h2>
   <P>Dowiedz się, jak błyskawicznie zaprojektować, opracować i utrzymywać profesjonalną witrynę internetową.</P>
   </div>
   </div>
   <klasa div="pojemnik-pomarańczowy">
   <klasa div="treść">
   <h2>Co robimy</h2>
   <P>Dajemy Ci narzędzia do tworzenia stron internetowych i unikalnych rozwiązań dla Twoich klientów. Prowadzimy również szkolenia dla
    konserwacja i inne tematy związane ze stroną internetową.</P>
   </div>
   </div>
   <klasa div="pojemnik-biały">
   <klasa div="treść">
   <h2>O nas</h2>
   <P>Jesteśmy małą firmą działającą z Melbourne w Australii. Nasze przestrzenie są wyjątkowo zaprojektowane, aby klienci też mogli
    odwiedź nas osobiście.</P>
   </div>
   </div>
   <klasa div="ciemna stopka kontenera">
   <P>Prawa autorskie 2022</P>
   </div>

3. Dodaj trochę stylu do aplikacji Angular, dodając CSS do pliku app.component.css plik:

   * {
    rodzina czcionek: "Arial", bezszeryfowe;
   }
   .nagłówek {
    wypełnienie: 30px 50px;
   }
   .stopka {
    wypełnienie: 5px 50px;
    wyrównanie tekstu: środek;
   }
   .ciemny pojemnik {
    kolor tła: #202C39;
    kolor biały;
    wyświetlacz: elastyczny;
    elementy wyrównania: środek;
   }
   .pojemnik-pomarańczowy {
    kolor tła: #FFD091;
    kolor: #202C39;
   }
   .kontener-biały {
    kolor tła: biały dym;
    kolor: #202C39;
   }
   .treść {
    wypełnienie: 100px 25%;
    wyświetlacz: elastyczny;
    kierunek zginania: kolumna;
    wysokość linii: 2rem;
   rozmiar czcionki: 1.2em;
    elementy wyrównania: środek;
    wyrównanie tekstu: środek;
   }

4. Dodaj stylizację dla całej aplikacji Angular w style.css:

   ciało {
    margines: 0;
    wypełnienie: 0;
   }

5. Aby przetestować aplikację, przejdź do jej folderu głównego za pomocą terminala lub wiersza poleceń. Wpisz służyć Komenda:

   służyć

6. Poczekaj, aż Twój kod się skompiluje i odwiedź http://localhost: 4200/ w przeglądarce internetowej, aby wyświetlić swoją aplikację.
7. w .lista przeglądarek file, usuń iOS Safari w wersji 15.2-15.3. Zapobiegnie to wyświetlaniu błędów zgodności w konsoli podczas kompilowania projektu.

   ostatnia 1 wersja Chrome
   ostatnia 1 wersja Firefoksa
   ostatnie 2 główne wersje Edge
   ostatnie 2 główne wersje Safari
   ostatnie 2 główne wersje iOS
   Firefox ESR
   nieios_bezpieczny 15.2-15.3
   niesafari 15.2-15.3

8. Zbuduj swój kod za pomocą budowanie polecenie w terminalu:

   budowanie

9. w gitignore plik, usuń lub skomentuj plik /dist linia. Usunięcie go zapewni dyst folder znajduje się w zestawie plików, które wypychasz do swojego repozytorium GitHub.

   # /dist

Jak przesłać swój kod Angular do GitHub

Będziesz musiał przechowywać swój kod w zdalnym repozytorium, aby Netlify mógł uzyskać dostęp do kodu źródłowego.

Możesz utworzyć nowe repozytorium na GitHub i przesłać kod swojej witryny do tego repozytorium. Jeśli nie znasz usługi GitHub, przydatne może być zrozumienie niektórych z nich Podstawowe funkcje GitHub Pierwszy.

1. Utwórz nowe repozytorium na GitHub. Możesz to zrobić logując się do GitHub i klikając Nowy.
2. Wprowadź szczegóły nowego repozytorium. Nadaj mu nazwę, taką jak „netlify-app” i opis. Nie inicjuj repozytorium za pomocą pliku README, pliku .gitignore ani licencji.
3. W terminalu na komputerze przejdź do katalogu, w którym przechowywałeś swoją aplikację Angular. Uruchom następujące polecenia, aby zainicjować folder jako repozytorium git:

   start git
   dodaj git.
   git popełniać -m "pierwszy popełniać"

4. Prześlij kod z tego folderu do nowego zdalnego repozytorium, które utworzyłeś w GitHub. Podążaj za git remote dodaj oryginał, gałąź git, I git push polecenia dostarczone przez GitHub na twojej stronie zdalnego repozytorium:

   git remote dodaj oryginał <Twój link do repozytorium GitHub>
   gałąź git -M główna
   git push -u źródło główne

5. Możesz potwierdzić, że kod Twojej aplikacji Angular znajduje się teraz w zdalnym repozytorium GitHub, odświeżając stronę repozytorium GitHub.

Jak korzystać z Netlify do hostowania kodu

Aby hostować swój kod za pomocą Netlify, musisz dać mu dostęp do swojego kodu źródłowego GitHub. Netlify użyje wtedy dyst folder twojego projektu Angular, aby opublikować zbudowaną wersję twojego kodu.

Możesz skonfigurować wszystkie te ustawienia, wykonując czynności konfiguracyjne podczas tworzenia nowej witryny:

1. Zaloguj się lub zarejestruj się Netlify. Możesz to zrobić przy użyciu poświadczeń GitHub.
2. Na głównym pulpicie nawigacyjnym i stronie z listą witryn rozwiń Dodaj nową witrynęi wybierz Importuj istniejący projekt.
3. Wybierać GitHub.
4. Kliknij Skonfiguruj Netlify na GitHub.
5. Kliknij zainstalować.
6. Netlify wyświetli listę twoich repozytoriów GitHub. Wybierz ten, który chcesz hostować. Na przykład, jeśli nazwałeś swoje repozytorium „netlify-app”, wybierz „netlify-app” z listy.
7. Na ekranie konfiguracji pozostaw Właściciel, Gałąź do wdrożenia, I Katalog podstawowy pola z wartościami domyślnymi. Jeśli publikujesz określoną gałąź, na przykład oddzielną gałąź „Produkcja”, możesz dodać ją do pliku Gałąź do wdrożenia pole. Zmienić Polecenie budowania pole do „ng build”. Dla Opublikuj katalog pole, wpisz odległość/. Jeśli nie wiesz, jaka jest nazwa projektu, możesz przejść do folderu dist swojego projektu, aby go tam znaleźć. Na przykład „dist/netlify-app”.
8. Kliknij Wdróż witrynę.
9. Poczekaj na zakończenie wdrażania. Może to potrwać kilka minut i może być konieczne odświeżenie strony. Jeśli wszystko pójdzie dobrze, pomyślne wdrożenie będzie widoczne na liście wdrożeń. Kliknij opublikowane wdrożenie, np. Produkcja: main@HEAD.
10. Kliknij na Otwórz wdrożenie produkcyjne przycisk.
11. Teraz możesz przeglądać swoją witrynę na innej karcie, korzystając z adresu URL w formacie .netlify.aplikacja. Jeśli hostujesz witrynę z wieloma przekierowaniami, przekierowanie na inne strony może nie być możliwe. W tym przypadku jest na to sposób naprawić nieudane przekierowanie na Netlify. Jeśli chcesz, możesz też zmodyfikuj swoją darmową nazwę domeny.

Hosting Twojej witryny za pomocą GitHub i Netlify

Mamy nadzieję, że możesz teraz z powodzeniem hostować witrynę internetową za pomocą GitHub i Netlify. Możesz skonfigurować automatyczne wdrożenia w niektórych gałęziach repozytorium GitHub. W ten sposób możesz zautomatyzować i usprawnić wdrażanie swojej witryny.

Ale Netlify to nie jedyny sposób na wdrożenie aplikacji Angular online. Możesz także korzystać z innych platform, takich jak GitHub Pages.