Πώς να φιλοξενήσετε έναν γωνιακό ιστότοπο χρησιμοποιώντας το Netlify και το GitHub

Όταν φιλοξενείτε έναν ιστότοπο Angular στο διαδίκτυο, μπορείτε να επιλέξετε ανάμεσα σε πολλές διαθέσιμες πλατφόρμες. Ένα από αυτά που μπορείτε να χρησιμοποιήσετε δωρεάν είναι το Netlify.

Εάν αποθηκεύετε ένα αντίγραφο του πηγαίου κώδικα του ιστότοπού σας σε ένα αποθετήριο GitHub, μπορείτε να χρησιμοποιήσετε το Netlify για να φιλοξενήσετε αυτόν τον ιστότοπο.

Το Netlify αναδιατάσσει επίσης αυτόματα τον ιστότοπό σας όταν προωθείτε τυχόν νέες αλλαγές στον κλάδο αποθετηρίου που φιλοξενείτε.

Πώς να δημιουργήσετε ένα βασικό παράδειγμα γωνιακής εφαρμογής

Μπορείτε να δημιουργήσετε μια απλή εφαρμογή Angular χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας όπως το Visual Studio Code. Στη συνέχεια, μπορείτε να φιλοξενήσετε αυτόν τον ιστότοπο χρησιμοποιώντας το Netlify.

1. Δημιουργώ ένα νέα εφαρμογή Angular.
2. Δημιουργήστε μια απλή αρχική σελίδα. Αντικαταστήστε τον κωδικό στο app.component.html αρχείο με το ακόλουθο περιεχόμενο σελίδας προορισμού:

   <div class="δοχείο-σκοτεινή κεφαλίδα">
   <h2>Ο ιστότοπος της επιχείρησής μας</h2>
   </div>
   <div class="δοχείο-λευκό">
   <div class="περιεχόμενο">
   <h2>Ο ιστότοπος της επιχείρησής μας</h2>
   <Π>Μάθετε πώς να σχεδιάζετε, να αναπτύσσετε και να συντηρείτε τον επαγγελματικό σας ιστότοπο σε ελάχιστο χρόνο.</Π>
   </div>
   </div>
   <div class="δοχείο-πορτοκαλί">
   <div class="περιεχόμενο">
   <h2>Αυτό που κάνουμε</h2>
   <Π>Σας δίνουμε τα εργαλεία για να αναπτύξετε ιστοσελίδες και μοναδικές λύσεις για τους πελάτες σας. Παρέχουμε επίσης εκπαίδευση για
    συντήρηση και άλλα θέματα σχετικά με τον ιστότοπο.</Π>
   </div>
   </div>
   <div class="δοχείο-λευκό">
   <div class="περιεχόμενο">
   <h2>Σχετικά με εμάς</h2>
   <Π>Είμαστε μια μικρή επιχείρηση που δραστηριοποιείται από τη Μελβούρνη της Αυστραλίας. Οι χώροι μας είναι μοναδικά φτιαγμένοι ώστε να μπορούν και οι πελάτες
    επισκεφθείτε μας αυτοπροσώπως.</Π>
   </div>
   </div>
   <div class="δοχείο-σκούρο υποσέλιδο">
   <Π>Πνευματικά δικαιώματα 2022</Π>
   </div>

3. Προσθέστε κάποιο στυλ στην εφαρμογή Angular προσθέτοντας λίγο CSS στην εφαρμογή app.component.css αρχείο:

   * {
    γραμματοσειρά-οικογένεια: "Arial", Σανς σέριφ;
   }
   .επί κεφαλής {
    padding: 30px 50px;
   }
   .υποδήλατο {
    padding: 5px 50px;
    text-align: κέντρο;
   }
   .δοχείο-σκοτεινός {
    χρώμα του φόντου: #202C39;
    άσπρο χρώμα;
    οθόνη: flex;
    στοίχιση-στοιχεία: κέντρο;
   }
   .δοχείο-πορτοκάλι {
    χρώμα του φόντου: #FFD091;
    χρώμα: #202C39;
   }
   .δοχείο-λευκό {
    χρώμα φόντου: whitesmoke;
    χρώμα: #202C39;
   }
   .περιεχόμενο {
    padding: 100px 25%;
    οθόνη: flex;
    flex-direction: στήλη;
    Ύψος γραμμής: 2 εκ.
   μέγεθος γραμματοσειράς: 1.2em;
    στοίχιση-στοιχεία: κέντρο;
    text-align: κέντρο;
   }

4. Προσθέστε κάποιο στυλ για τη συνολική εφαρμογή Angular στυλ.css:

   σώμα {
    περιθώριο: 0;
    γέμιση: 0;
   }

5. Για να δοκιμάσετε την εφαρμογή, μεταβείτε στον ριζικό φάκελο χρησιμοποιώντας ένα τερματικό ή μια γραμμή εντολών. Πληκτρολογήστε το ng σερβίρετε εντολή:

   ng σερβίρετε

6. Περιμένετε να μεταγλωττιστεί ο κώδικάς σας και επισκεφθείτε http://localhost: 4200/ σε ένα πρόγραμμα περιήγησης ιστού για να δείτε την εφαρμογή σας.
7. Στο .browserslistrc αρχείο, καταργήστε το iOS safari έκδοση 15.2-15.3. Αυτό θα αποτρέψει την εμφάνιση σφαλμάτων συμβατότητας στην κονσόλα κατά τη δημιουργία του έργου.

   τελευταία 1 έκδοση Chrome
   τελευταία 1 έκδοση Firefox
   τελευταίες 2 κύριες εκδόσεις Edge
   τελευταίες 2 κύριες εκδόσεις Safari
   τελευταίες 2 κύριες εκδόσεις iOS
   Firefox ESR
   δενios_saf 15.2-15.3
   δενσαφάρι 15.2-15.3

8. Δημιουργήστε τον κωδικό σας χρησιμοποιώντας το ng κατασκευή εντολή στο τερματικό:

   ng κατασκευή

9. Στο .gitignore αρχείο, αφαιρέστε ή σχολιάστε το /dist γραμμή. Η αφαίρεσή του θα εξασφαλίσει την απόσταση Ο φάκελος βρίσκεται στο σύνολο των αρχείων που σπρώχνετε στο αποθετήριο GitHub.

   # /dist

Πώς να ωθήσετε τον γωνιακό σας κώδικα στο GitHub

Θα χρειαστεί να αποθηκεύσετε τον κώδικά σας σε ένα απομακρυσμένο αποθετήριο ώστε το Netlify να έχει πρόσβαση στον πηγαίο κώδικα.

Μπορείτε να δημιουργήσετε ένα νέο αποθετήριο στο GitHub και να προωθήσετε τον κώδικα του ιστότοπού σας σε αυτό το αποθετήριο. Εάν δεν είστε εξοικειωμένοι με το GitHub, ίσως είναι χρήσιμο να κατανοήσετε μερικά από αυτά Τα βασικά χαρακτηριστικά του GitHub πρώτα.

1. Δημιουργήστε ένα νέο αποθετήριο στο GitHub. Μπορείτε να το κάνετε αυτό κάνοντας είσοδο στο GitHub και κάνοντας κλικ στο Νέος.
2. Εισαγάγετε τα στοιχεία για το νέο σας αποθετήριο. Δώστε του ένα όνομα όπως "netlify-app" και μια περιγραφή. Μην αρχικοποιείτε το χώρο αποθήκευσης με αρχείο README, αρχείο .gitignore ή άδεια χρήσης.
3. Σε ένα τερματικό στον υπολογιστή σας, μεταβείτε στον κατάλογο όπου αποθηκεύσατε την εφαρμογή Angular. Εκτελέστε τις ακόλουθες εντολές για να αρχικοποιήσετε το φάκελό σας ως αποθετήριο git:

   git init
   git προσθήκη .
   git διαπράττω -μ "πρώτα διαπράττω"

4. Σπρώξτε τον κώδικα μέσα σε αυτόν τον φάκελο στο νέο απομακρυσμένο αποθετήριο που δημιουργήσατε στο GitHub. Ακολούθησε το git remote προσθήκη πρωτότυπου, κλαδί git, και git push εντολές που παρέχονται από το GitHub στην απομακρυσμένη σελίδα αποθετηρίου σας:

   git remote προσθήκη πρωτότυπου <Ο σύνδεσμος αποθέματός σας στο GitHub>
   git κλαδί -M κύριος
   git push -u προέλευση κύριος

5. Μπορείτε να επιβεβαιώσετε ότι ο κώδικας της εφαρμογής Angular βρίσκεται πλέον στον απομακρυσμένο χώρο αποθήκευσης GitHub, ανανεώνοντας τη σελίδα αποθετηρίου GitHub.

Πώς να χρησιμοποιήσετε το Netlify για να φιλοξενήσετε τον κωδικό σας

Για να φιλοξενήσετε τον κώδικά σας χρησιμοποιώντας το Netlify, θα πρέπει να του δώσετε πρόσβαση στον πηγαίο κώδικα του GitHub. Στη συνέχεια, το Netlify θα χρησιμοποιήσει το απόσταση φάκελο του Angular έργου σας για να δημοσιεύσετε την ενσωματωμένη έκδοση του κώδικά σας.

Μπορείτε να διαμορφώσετε όλες αυτές τις ρυθμίσεις ακολουθώντας τα βήματα διαμόρφωσης κατά τη δημιουργία μιας νέας τοποθεσίας:

1. Συνδεθείτε ή εγγραφείτε στο Netlify. Μπορείτε να το κάνετε χρησιμοποιώντας τα διαπιστευτήριά σας στο GitHub.
2. Από τον κύριο πίνακα ελέγχου και τη σελίδα λίστας τοποθεσιών, αναπτύξτε το Προσθήκη νέου ιστότοπουκαι επιλέξτε Εισαγάγετε ένα υπάρχον έργο.
3. Επιλέγω GitHub.
4. Κάντε κλικ στο Διαμορφώστε το Netlify στο GitHub.
5. Κάντε κλικ στο Εγκαθιστώ.
6. Το Netlify θα εμφανίσει μια λίστα με τα αποθετήρια GitHub σας. Επιλέξτε αυτό που θέλετε να φιλοξενήσετε. Για παράδειγμα, εάν έχετε ονομάσει το αποθετήριο σας "netlify-app", επιλέξτε "netlify-app" από τη λίστα.
7. Στην οθόνη διαμόρφωσης, αφήστε το Ιδιοκτήτης, Υποκατάστημα για ανάπτυξη, και Βασικός κατάλογος πεδία στις προεπιλεγμένες τιμές τους. Εάν δημοσιεύατε έναν συγκεκριμένο κλάδο, όπως έναν ξεχωριστό κλάδο "Παραγωγή", θα μπορούσατε να το προσθέσετε στο Υποκατάστημα για ανάπτυξη πεδίο. Αλλαξε το Εντολή κατασκευής πεδίο για να "ng build". Για το Δημοσίευση καταλόγου πεδίο, πληκτρολογήστε dist/. Εάν δεν γνωρίζετε ποιο είναι το όνομα του έργου, μπορείτε να πλοηγηθείτε στον απομακρυσμένο φάκελο του έργου σας για να το βρείτε εκεί. Για παράδειγμα, "dist/netlify-app".
8. Κάντε κλικ στο Ανάπτυξη ιστότοπου.
9. Περιμένετε να ολοκληρωθεί η ανάπτυξη. Αυτό μπορεί να διαρκέσει μερικά λεπτά και ίσως χρειαστεί να ανανεώσετε τη σελίδα. Εάν όλα πάνε καλά, θα μπορείτε να δείτε την επιτυχημένη ανάπτυξη στη λίστα αναπτύξεων. Κάντε κλικ στη δημοσιευμένη ανάπτυξη, για παράδειγμα, Παραγωγή: main@HEAD.
10. Κάνε κλικ στο Ανοιχτή ανάπτυξη παραγωγής κουμπί.
11. Τώρα μπορείτε να προβάλετε τον ιστότοπό σας σε άλλη καρτέλα, χρησιμοποιώντας μια διεύθυνση URL σε μορφή .netlify.app. Εάν φιλοξενείτε έναν ιστότοπο με πολλές ανακατευθύνσεις, ενδέχεται να μην μπορείτε να ανακατευθύνετε σε άλλες σελίδες. Σε αυτή την περίπτωση, υπάρχει τρόπος να διορθώστε μια αποτυχημένη ανακατεύθυνση στο Netlify. Αν θέλετε, μπορείτε επίσης τροποποιήστε το δωρεάν όνομα τομέα σας.

Φιλοξενία του ιστότοπού σας χρησιμοποιώντας GitHub και Netlify

Ας ελπίσουμε ότι μπορείτε τώρα να φιλοξενήσετε με επιτυχία έναν ιστότοπο χρησιμοποιώντας το GitHub και το Netlify. Μπορείτε να ρυθμίσετε αυτόματες αναπτύξεις σε συγκεκριμένους κλάδους ενός αποθετηρίου GitHub. Με αυτόν τον τρόπο, μπορείτε να αυτοματοποιήσετε και να βελτιστοποιήσετε την ανάπτυξη του ιστότοπού σας.

Αλλά το Netlify δεν είναι ο μόνος τρόπος για να αναπτύξετε μια εφαρμογή Angular στο διαδίκτυο. Μπορείτε επίσης να χρησιμοποιήσετε άλλες πλατφόρμες όπως το GitHub Pages.