Η ανάπτυξη εφαρμογών Angular σε σελίδες GitHub είναι ένας πολύ καλός τρόπος για να τις φιλοξενήσετε δωρεάν. Το Angular είναι ένα δημοφιλές πλαίσιο JavaScript για τη δημιουργία εφαρμογών μιας σελίδας.

Το Angular διαθέτει μια ολοκληρωμένη διεπαφή γραμμής εντολών που υποστηρίζει γρήγορη δημιουργία και ρύθμιση εφαρμογών JavaScript. Το Angular CLI έχει πολλές εντολές για τη δημιουργία, τη δημιουργία, την εξυπηρέτηση και τη δημιουργία στοιχείων εφαρμογής.

Μπορείτε επίσης να χρησιμοποιήσετε το CLI για να αναπτύξετε εφαρμογές Angular σε διάφορους στόχους, συμπεριλαμβανομένων των σελίδων GitHub.

Ο, τι χρειάζεσαι

Για να αξιοποιήσετε στο έπακρο αυτόν τον οδηγό, πρέπει να έχετε τις ακόλουθες δεξιότητες και εργαλεία:

  • Θα πρέπει να είστε εξοικειωμένοι με τα βασικά του Angular, όπως η έννοια των εφαρμογών, ρυθμίσεων, διευθύνσεων URL κ.λπ.
  • Είστε εξοικειωμένοι με τα βασικά του GitHub και Git, όπως η δημιουργία ενός λογαριασμού GitHub, η δημιουργία ενός αποθετηρίου git (repo) και σελίδων GitHub (GH-pages).
    • instagram viewer
  • Έχετε μια εφαρμογή Angular έτοιμη για ανάπτυξη.
  • Η βασική σας διεύθυνση URL βρίσκεται στη σωστή διαδρομή. Οι αναπτύξεις σε σελίδες GH αποτυγχάνουν λόγω του λανθασμένου ορισμού βάσης-href (base-url).
  • Ένας λογαριασμός GitHub.
  • Ένα αποθετήριο GitHub (repo) με κωδικό εφαρμογής.

Τώρα που τα έχετε όλα αυτά, ας ξεκινήσουμε τη διαδικασία ανάπτυξης.

Διαδικασία ανάπτυξης

Για να ξεκινήσετε, θα έπρεπε να έχετε δημιουργήσει ένα αποθετήριο GitHub για το έργο σας και να ωθήσετε τον κώδικα στο κύριος/κύριος κλαδί.

Στη συνέχεια, δημιουργήστε έναν κλάδο GH-pages.

1. Δημιουργήστε ένα υποκατάστημα GH-pages

Αυτό είναι ένα hack που θα σας βοηθήσει να αποκτήσετε τον σύνδεσμο GH-pages για να σας βοηθήσει να ορίσετε το base-href.

Αρχικά, δημιουργήστε σελίδες GH στο τοπικό σας αποθετήριο με την ακόλουθη εντολή:

git υποκατάστημα gh-σελίδες

Στη συνέχεια, ελέγξτε από τον κεντρικό κλάδο στις σελίδες GH για να μεταφέρετε όλο τον κώδικα.

git checkout gh-pages

Στη συνέχεια, πιέστε GH-pages στο GitHub για να δημιουργήσετε έναν απομακρυσμένο κλάδο GH-pages.

git push origin gh-pages

Στη γραμμή εργαλείων κάτω από το όνομα repo, κάντε κλικ Ρυθμίσεις > Σελίδες.

Κάτω από Κατασκευή και ανάπτυξη, επιλέξτε Αναπτύξτε από ένα υποκατάστημα. Στη συνέχεια, επιλέξτε gh-σελίδες ως το όνομα του κλάδου και, στη συνέχεια, κάντε κλικ Αποθηκεύσετε. Αυτό θα δημιουργήσει έναν σύνδεσμο GH-pages επάνω δεξιά κάτω από την ετικέτα GH-pages.

Στη συνέχεια, αντιγράψτε αυτόν τον σύνδεσμο στον δημοσιευμένο ιστότοπο όπως φαίνεται παρακάτω. Θα χρησιμοποιήσετε τον σύνδεσμο για να ρυθμίσετε το βασικό ref κατά την ανάπτυξη.

3. Εγκαταστήστε το Angular-CLI-GHpages

Το πακέτο angular-cli-ghpages είναι ένα εργαλείο που χρησιμοποιεί το Angular CLI για σκοπούς ανάπτυξης.

Πλοηγηθείτε πίσω στο τοπικό αποθετήριο του έργου σας. Στη συνέχεια, εγκαταστήστε και εκτελέστε το angular-cli-ghpages με αυτήν την εντολή:

να προσθέσετε angular-cli-ghpages

4. Αναπτύξτε την εφαρμογή

Για να δημιουργήσετε την εφαρμογή στην παραγωγή, πρέπει να τη συνδέσετε σε έναν απομακρυσμένο διακομιστή στο GitHub.

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

ng deploy --base-href=https://GithubUserName.github.io/GithubRepoName/

Θυμηθείτε να αντικαταστήσετε τον παραπάνω σύνδεσμο με τον ζωντανό σύνδεσμο από σελίδες GH

Μια επιτυχημένη κατασκευή θα μοιάζει με την παρακάτω εικόνα:

Στη συνέχεια, μεταβείτε στο GitHub και κάντε κλικ στο σύνδεσμο GH-pages για να δείτε το αναπτυσσόμενο έργο σας.

Συγχαρητήρια, αναπτύξατε την Angular App σας!

Εάν ο σύνδεσμος εμφανίζει μόνο το αρχείο README, επιστρέψτε στις ρυθμίσεις GitHub GH-pages. Βεβαιωθείτε ότι ο επιλεγμένος κλάδος είναι gh-pages και όχι ο κύριος ή ο κύριος κλάδος. Στη συνέχεια, δώστε του πέντε λεπτά και φορτώστε ξανά. Μερικές φορές το GitHub χρειάζεται χρόνο για να αντικατοπτρίσει τις αλλαγές.

Για να μάθετε περισσότερα σχετικά με το πώς μπορείτε να χρησιμοποιήσετε το Angular CLI στην ανάπτυξη, επισκεφθείτε το Γωνιακή τεκμηρίωση.

Πώς να αναπτύξετε μια γωνιακή εφαρμογή σε σελίδες GitHub

Υπάρχουν διάφοροι τρόποι ανάπτυξης εφαρμογών Angular σε σελίδες GH, αλλά αυτή η μέθοδος είναι η πιο εύκολη. Ρυθμίζετε τον σύνδεσμο αποθετηρίου GH-pages και τον χρησιμοποιείτε με το Angular-CLI για να αναπτύξετε την εφαρμογή σας σε σελίδες GitHub.

Υπάρχουν πολλά περισσότερα που μπορείτε να κάνετε με το Angular και το Angular CLI. Μη διστάσετε να εξερευνήσετε. Χρησιμοποιήστε το CLI για να αναπτύξετε εφαρμογές σε σελίδες GH για δωρεάν προβολή και φιλοξενία για τις εφαρμογές σας.