So stellen Sie eine React-App kostenlos mit GitHub-Seiten bereit

Wenn Sie ein Projekt haben und es kostenlos hosten möchten, ohne eine Domain zu kaufen, ist die Verwendung von GitHub Pages eine gute Wahl. GitHub Pages wandelt Ihre Repositories in Websites um und ermöglicht Ihnen das Hosten unbegrenzter Projektseiten.

Das Bereitstellen einer React-Site mit Navigation erfordert eine zusätzliche Konfiguration im Vergleich zum Bereitstellen einer statischen Site. Dieses Tutorial führt Sie durch den gesamten Prozess von der Erstellung eines GitHub-Repositorys bis hin zu einer gehosteten Website.

Erstellen Sie eine React-App

Zu Demonstrationszwecken müssen Sie Erstellen Sie ein React-Projekt mit Routing, das Sie später bereitstellen. Wenn Sie jedoch eine vorhandene haben Projekt reagieren, können Sie diesen Schritt gerne überspringen.

Führen Sie im Terminal die Erstellen-Reagieren-App Befehl, um ein React-Projekt schnell zu rüsten:

npx create-react-appreakt-gh

Navigieren Sie zum erstellten Ordner und starten Sie Ihre Anwendung.

npm-Lauf starten

Öffnen Sie als Nächstes den Projektordner mit Ihrem bevorzugten

Code-Editor. In dem Quelle Ordner, lösche alles außer App.js und index.js. Ersetzen Sie den Inhalt in App.js durch Folgendes:

Funktion App() {
 Rückkehr (


Github-Seiten

Bereitstellen von React auf Github




 );
}
Standard-App exportieren;

Routing hinzufügen

Um Routing zu Ihrer Anwendung hinzuzufügen, installieren Sie zuerst reagieren-router-dom:

npm installiere reagieren-router-dom

Fügen Sie in App.js den Link zur About-Seite hinzu:

importiere { Link } aus "react-router-dom";
Funktion App() {
 Rückkehr (


Über
Github-Seiten

Bereitstellen von React auf Github




 );
}
Standard-App exportieren;

Da App.js als Ihre Homepage fungiert, müssen Sie nur die erstellen Über Komponente:

const Über = () => {
 Rückkehr ( 


Heim
Über Seite




 );
}
Exportstandard Über;

Jetzt müssen Sie die Routen erstellen und einen React-Router konfigurieren.

Ändern Sie index.js, um die URL mit den jeweiligen Komponenten abzugleichen:

Reagieren von "Reagieren" importieren;
importiere ReactDOM von "react-dom";
App aus "./App" importieren;
importiere {HashRouter, Routes, Route} aus "react-router-dom";
Über von "./About" importieren;
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Beachten Sie, wie Sie verwendet haben HashRouter anstatt BrowserRouter. Verwenden BrowserRouter würde einen 404-Fehler auslösen. Dies liegt daran, dass das Routing auf GitHub-Seiten anders funktioniert. Hashrouter löst keinen Fehler aus, da der Hash-Teil der URL verwendet wird, um die Benutzeroberfläche mit der URL zu synchronisieren.

Der letzte Schritt besteht darin, alle neuen Änderungen an Git zu übergeben:

git hinzufügen.
git commit -m "React-App erstellen"

Erstellen Sie ein GitHub-Repository

Seit GitHub-Seiten Ihre Anwendung hosten wird, indem das Repository in eine Website konvertiert wird, müssen Sie ein GitHub-Repository erstellen. Gehen Sie zu Ihrem GitHub-Konto und erstellen Sie ein neues Repository mit demselben Namen wie Ihr Projekt.

Fügen Sie als Nächstes das GitHub-Repository als Remote zu Ihrem lokalen Repository hinzu:

git remote Ursprung hinzufügen /.git

Pushen Sie schließlich das lokale Repository auf GitHub:

git branch -M main
git push --set-upstream origin main

Stellen Sie die React-App auf GitHub-Seiten bereit

Um GitHub Pages verwenden zu können, müssen Sie es zuerst installieren:

npm installiert gh-pages

gh-Seiten ermöglicht es Ihnen, die zu erstellen gh-Seiten Verzweigung, in der Sie Ihren Code bereitstellen.

Als nächstes gehen Sie zu Ihrem Paket.json Datei und fügen Sie die Homepage hinzu, die die Home-URL der App sein wird:

"Startseite": "https://.github.io//",
"Skripte": {
 "predeploy": "npm run build",
 "bereitstellen": "gh-pages -d build", 
 "start": "React-Skripte starten",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "Reaktionsskripte auswerfen"
 }

Führen Sie den folgenden Befehl aus, um den Bereitstellungsprozess abzuschließen:

npm ausführen bereitstellen

Ihre Anwendung wird jetzt auf GitHub bereitgestellt und Sie können sie unter besuchen https://.github.io/.

Machen Sie mehr mit GitHub-Seiten

GitHub Pages bietet eine einfache Möglichkeit, Websites kostenlos im Internet bereitzustellen. Während Sie nur gesehen haben, wie Sie ein einfaches React-Projekt bereitstellen können, können Sie mit GitHub Pages so viel mehr tun. Sie können beispielsweise mit Jekyll einen vollwertigen Blog erstellen und ihn sogar mit einer benutzerdefinierten Domain hosten.

So hosten Sie kostenlos eine Website mit GitHub-Seiten

Lesen Sie weiter

Über den Autor