Ako bezplatne nasadiť aplikáciu React so stránkami GitHub

Ak máte projekt a chcete ho hostiť zadarmo bez toho, aby ste si kúpili doménu, používanie stránok GitHub je skvelou voľbou. Stránky GitHub konvertujú vaše úložiská na webové stránky a umožňujú vám hostiť neobmedzené množstvo stránok projektov.

Nasadenie lokality React s navigáciou si vyžaduje dodatočnú konfiguráciu v porovnaní s nasadením statickej lokality. Tento tutoriál vás prevedie celým procesom od vytvorenia úložiska GitHub až po hosťovanú stránku.

Vytvorte aplikáciu React

Na demonštračné účely je potrebné vytvoriť projekt React so smerovaním, ktoré nasadíte neskôr. Ak však máte existujúcu Reagovať projekt, tento krok pokojne preskočte.

V termináli spustite create-react-app príkaz na rýchle zostavenie projektu React:

npx create-react-app response-gh

Prejdite do vytvoreného priečinka a spustite aplikáciu.

spustenie chodu npm

Potom otvorte priečinok projektu s vami preferovaným editor kódu. V src priečinok, odstráňte všetko okrem App.js a index.js. Nahraďte obsah v App.js nasledujúcim:

function App() {
 vrátiť (


Stránky Github

Nasadenie React na Github




 );
}
exportovať predvolenú aplikáciu;

Pridať smerovanie

Ak chcete do aplikácie pridať smerovanie, najprv nainštalujte reagovať-smerovač-dom:

npm install reag-router-dom

V App.js pridajte odkaz na stránku s informáciami:

import { Link } z "react-router-dom";
function App() {
 vrátiť (


O
Stránky Github

Nasadenie React na Github




 );
}
exportovať predvolenú aplikáciu;

Keďže App.js bude fungovať ako vaša domovská stránka, stačí si vytvoriť O komponent:

const About = () => {
 vrátiť ( 


Domov
O stránke




 );
}
exportovať predvolené O aplikácii;

Teraz musíte vytvoriť trasy a nakonfigurovať smerovač React.

Upravte index.js tak, aby sa adresa URL zhodovala s príslušnými komponentmi:

import Reagovať z "reagovať";
importovať ReactDOM z "react-dom";
importovať aplikáciu z "./App";
import { HashRouter, Routes, Route } z "react-router-dom";
importovať O z "./O";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Všimnite si, ako ste používali HashRouter namiesto BrowserRouter. Použitím BrowserRouter vyvolalo by chybu 404. Je to preto, že smerovanie na stránkach GitHub funguje inak. Hashrouter nevyvoláva chybu, pretože používa hash časť adresy URL na synchronizáciu používateľského rozhrania s adresou URL.

Posledným krokom je odovzdanie všetkých nových zmien v Git:

git pridať .
git commit -m "Vytvoriť aplikáciu React"

Vytvorte úložisko GitHub

Od r stránky GitHub bude hostiť vašu aplikáciu konvertovaním úložiska na webovú stránku, musíte si vytvoriť úložisko GitHub. Prejdite do svojho účtu GitHub a vytvorte nové úložisko s rovnakým názvom, ako má váš projekt.

Potom pridajte úložisko GitHub do svojho lokálneho úložiska ako vzdialené:

git remote add origin /.git

Nakoniec presuňte lokálne úložisko na GitHub:

git vetva -M hlavná
git push --set-upstream origin main

Nasaďte aplikáciu React na stránky GitHub

Ak chcete používať stránky GitHub, musíte si ich najskôr nainštalovať:

npm nainštalovať gh-pages

gh-stránky vám umožní vytvoriť gh-stránky pobočku, kde nasadíte svoj kód.

Ďalej prejdite na svoje package.json súbor a pridajte domovskú stránku, ktorá bude domovskou adresou URL aplikácie:

"domovská stránka": "https://.github.io//",
"scripts": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "test reakcií skriptov",
 "eject": "react-scripts eject"
 }

Spustite nasledujúci príkaz na dokončenie procesu nasadenia:

npm spustiť nasadiť

Vaša aplikácia je teraz nasadená na GitHub a môžete ju navštíviť na adrese https://.github.io/.

Urobte viac so stránkami GitHub

Stránky GitHub poskytujú jednoduchý spôsob bezplatného nasadenia webových stránok na internet. Zatiaľ čo ste len videli, ako môžete nasadiť jednoduchý projekt React, GitHub Pages vám umožňuje urobiť oveľa viac. Môžete si napríklad vytvoriť plnohodnotný blog pomocou Jekyll a dokonca ho hostiť pomocou vlastnej domény.

Ako bezplatne hosťovať webovú stránku pomocou stránok GitHub

Prečítajte si ďalej

O autorovi