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

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

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

Δημιουργήστε μια εφαρμογή React

Για λόγους επίδειξης, πρέπει δημιουργήστε ένα έργο React με δρομολόγηση που θα αναπτύξετε αργότερα. Ωστόσο, εάν έχετε ένα υπάρχον React project, μη διστάσετε να παραλείψετε αυτό το βήμα.

Στο τερματικό, εκτελέστε το δημιουργία-αντίδραση-εφαρμογή εντολή για γρήγορη ικρίωμα ενός έργου React:

npx create-react-app react-gh

Μεταβείτε στον φάκελο που δημιουργήθηκε και ξεκινήστε την εφαρμογή σας.

npm έναρξη λειτουργίας

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

επεξεργαστής κώδικα. Στο src φάκελο, διαγράψτε τα πάντα εκτός από App.js και index.js. Αντικαταστήστε τα περιεχόμενα στο App.js με τα εξής:

λειτουργία Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (


Σελίδες Github

Ανάπτυξη του React στο Github




 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Προσθήκη δρομολόγησης

Για να προσθέσετε δρομολόγηση στην εφαρμογή σας, πρώτα, εγκαταστήστε react-router-dom:

npm εγκατάσταση react-router-dom

Στο App.js, προσθέστε το σύνδεσμο στη σελίδα σχετικά:

εισαγωγή { Link } από το "react-router-dom";
λειτουργία Εφαρμογή() {
 ΕΠΙΣΤΡΟΦΗ (


Σχετικά με
Σελίδες Github

Ανάπτυξη του React στο Github




 );
}
εξαγωγή προεπιλεγμένη εφαρμογή?

Εφόσον το App.js θα λειτουργεί ως η αρχική σας σελίδα, χρειάζεται μόνο να δημιουργήσετε το Σχετικά με συστατικό:

const Σχετικά με = () => {
 ΕΠΙΣΤΡΟΦΗ ( 


Σπίτι
Σχετικά με τη σελίδα




 );
}
εξαγωγή προεπιλογή Σχετικά?

Τώρα, πρέπει να δημιουργήσετε τις διαδρομές και να διαμορφώσετε έναν δρομολογητή React.

Τροποποιήστε το index.js για να ταιριάζει με τη διεύθυνση URL στα αντίστοιχα στοιχεία:

εισαγωγή Αντιδράστε από το "react"?
Εισαγάγετε το ReactDOM από το "react-dom".
εισαγωγή εφαρμογής από το "./App";
εισαγωγή { HashRouter, Routes, Route } από το "react-router-dom";
εισαγωγή Σχετικά από "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Παρατηρήστε πώς χρησιμοποιήσατε HashRouter αντί BrowserRouter. Χρησιμοποιώντας BrowserRouter θα δημιουργούσε σφάλμα 404. Αυτό συμβαίνει επειδή η δρομολόγηση λειτουργεί διαφορετικά στις σελίδες GitHub. Hashrouter δεν δημιουργεί σφάλμα επειδή χρησιμοποιεί το τμήμα κατακερματισμού της διεύθυνσης URL για να συγχρονίσει τη διεπαφή χρήστη με τη διεύθυνση URL.

Το τελευταίο βήμα είναι η πραγματοποίηση όλων των νέων αλλαγών στο Git:

git προσθήκη .
git commit -m "Δημιουργία εφαρμογής React"

Δημιουργία αποθετηρίου GitHub

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

Στη συνέχεια, προσθέστε το αποθετήριο GitHub στο τοπικό σας αποθετήριο ως απομακρυσμένο:

git remote προσθήκη προέλευσης /.git

Τέλος, σπρώξτε το τοπικό αποθετήριο στο GitHub:

git κλαδί -M κύριος
git push --set-upstream origin main

Αναπτύξτε την εφαρμογή React στις Σελίδες GitHub

Για να χρησιμοποιήσετε τις Σελίδες GitHub, θα πρέπει πρώτα να τις εγκαταστήσετε:

npm εγκατάσταση gh-pages

gh-σελίδες θα σας επιτρέψει να δημιουργήσετε το gh-σελίδες υποκατάστημα όπου θα αναπτύξετε τον κωδικό σας.

Στη συνέχεια, πηγαίνετε στο δικό σας πακέτο.json αρχείο και προσθέστε την αρχική σελίδα που θα είναι η αρχική διεύθυνση URL της εφαρμογής:

"αρχική σελίδα": "https://.github.io//",
"σενάρια": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 }

Εκτελέστε την ακόλουθη εντολή για να ολοκληρώσετε τη διαδικασία ανάπτυξης:

npm εκτέλεση ανάπτυξης

Η εφαρμογή σας έχει πλέον αναπτυχθεί στο GitHub και μπορείτε να την επισκεφτείτε στη διεύθυνση https://.github.io/.

Κάντε περισσότερα με τις σελίδες GitHub

Το GitHub Pages παρέχει έναν απλό τρόπο ανάπτυξης ιστοσελίδων στο διαδίκτυο δωρεάν. Ενώ είδατε μόνο πώς μπορείτε να αναπτύξετε ένα απλό έργο React, οι Σελίδες GitHub σάς επιτρέπουν να κάνετε πολλά περισσότερα. Για παράδειγμα, μπορείτε να δημιουργήσετε ένα πλήρες ιστολόγιο χρησιμοποιώντας το Jekyll και ακόμη και να το φιλοξενήσετε χρησιμοποιώντας έναν προσαρμοσμένο τομέα.

Πώς να φιλοξενήσετε έναν ιστότοπο δωρεάν χρησιμοποιώντας σελίδες GitHub

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα