Kuidas GitHubi lehtedega Reacti rakendust tasuta juurutada

Kui teil on projekt ja soovite seda tasuta hostida ilma domeeni ostmata, on GitHubi lehtede kasutamine suurepärane valik. GitHub Pages teisendab teie hoidlad veebisaitideks ja võimaldab teil hostida piiramatult projektisaite.

Reacti saidi juurutamine koos navigeerimisega nõuab lisakonfiguratsiooni võrreldes staatilise saidi juurutamisega. See õpetus juhatab teid läbi kogu protsessi alates GitHubi hoidla loomisest kuni hostitud saidi loomiseni.

Looge rakendus React

Demonstratsiooni eesmärgil peate luua Reacti projekt marsruutimisega, mille juurutate hiljem. Kui teil on aga olemasolev Reageeri projekt, võite selle sammu vahele jätta.

Käivitage terminalis loo-reageeri rakendus käsk Reacti projekti kiireks karkassiks:

npx create-react-app react-gh

Liikuge loodud kausta ja käivitage rakendus.

npm jooksu algus

Järgmisena avage soovitud projekti kaust koodiredaktor. Aastal src kausta, kustuta kõik peale App.js ja index.js. Asendage rakenduse App.js sisu järgmisega:

function App() {
 tagasi (


Githubi lehed

Reacti juurutamine Githubisse




 );
}
ekspordi vaikerakendus;

Lisa marsruutimine

Rakendusele marsruutimise lisamiseks installige esmalt reageerida-ruuter-dom:

npm install react-ruuter-dom

Lisage rakenduses App.js link teabelehele:

import { Link } "react-router-dom";
function App() {
 tagasi (


Umbes
Githubi lehed

Reacti juurutamine Githubisse




 );
}
ekspordi vaikerakendus;

Kuna App.js toimib teie avalehena, peate looma ainult selle Umbes komponent:

const Teave = () => {
 tagasi ( 


Kodu
Teave lehe kohta




 );
}
ekspordi vaikeseade Teave;

Nüüd peate looma marsruudid ja konfigureerima Reacti ruuteri.

Muutke index.js-i, et see sobiks URL-i vastavate komponentidega:

import React alates "react";
importige ReactDOM "react-domist";
importige rakendus rakendusest "./App";
import { HashRouter, Routes, Route } kataloogist "react-router-dom";
import Teave kohast "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("juur")
);

Pange tähele, kuidas kasutasite HashRouter selle asemel BrowserRouter. Kasutades BrowserRouter tekitaks vea 404. Selle põhjuseks on asjaolu, et marsruutimine toimib GitHubi lehtedel erinevalt. Hashrouter ei tekita viga, kuna kasutab kasutajaliidese URL-iga sünkroonimiseks URL-i räsiosa.

Viimane samm on kõigi uute muudatuste tegemine Giti:

git add .
git commit -m "Loo React rakendus"

Looge GitHubi hoidla

Alates GitHubi lehed majutab teie rakendust, teisendades hoidla veebisaidiks, peate looma GitHubi hoidla. Minge oma GitHubi kontole ja looge uus hoidla projektiga sama nimega.

Järgmisena lisage GitHubi hoidla oma kohalikku hoidlasse kaugjuhtimispuldina:

git remote lisamise päritolu /.git

Lõpuks lükake kohalik hoidla GitHubisse:

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

Juurutage rakendus React GitHubi lehtedele

GitHubi lehtede kasutamiseks peate selle esmalt installima.

npm installige gh-lehed

gh-lehed võimaldab teil luua gh-lehed haru, kus saate oma koodi juurutada.

Järgmisena minge oma package.json faili ja lisage avaleht, millest saab rakenduse kodu URL:

"koduleht": "https://.github.io//",
"skriptid": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "reageeri skriptide test",
 "eject": "react-scripts eject"
 }

Käivitage juurutamisprotsessi lõpuleviimiseks järgmine käsk:

npm käivitada juurutamine

Teie rakendus on nüüd GitHubis juurutatud ja saate seda külastada aadressil https://.github.io/.

Tehke GitHubi lehtedega rohkem

GitHub Pages pakub lihtsat viisi veebisaitide tasuta juurutamiseks Internetti. Kuigi nägite ainult lihtsa Reacti projekti juurutamist, võimaldab GitHub Pages teha palju rohkem. Näiteks saate Jekylli abil luua täieliku ajaveebi ja isegi seda kohandatud domeeni abil hostida.

Kuidas GitHubi lehtede abil veebisaiti tasuta majutada

Loe edasi

Autori kohta