Kako brezplačno uvesti aplikacijo React s stranmi GitHub

Če imate projekt in ga želite brezplačno gostiti brez nakupa domene, je uporaba strani GitHub odlična izbira. GitHub Pages pretvori vaša skladišča v spletna mesta in vam omogoča gostovanje neomejenih spletnih mest projektov.

Uvajanje mesta React z navigacijo zahteva dodatno konfiguracijo v primerjavi z uvajanjem statičnega mesta. Ta vadnica vas vodi skozi celoten postopek od ustvarjanja skladišča GitHub do gostovanja spletnega mesta.

Ustvarite aplikacijo React

Za demonstracijske namene morate ustvarite projekt React z usmerjanjem, ki ga boste uvedli pozneje. Vendar, če imate obstoječo Projekt React, ta korak lahko preskočite.

V terminalu zaženite ustvari-reagiraj-aplikacijo ukaz za hitro oblikovanje projekta React:

npx create-react-app react-gh

Pomaknite se do ustvarjene mape in zaženite aplikacijo.

npm run start

Nato odprite mapo projekta z želeno urejevalnik kode. V src mapo, izbrišite vse razen App.js in index.js. Zamenjajte vsebino v App.js z naslednjim:

funkcija App() {
 vrnitev (


Strani Github

Uvajanje React v Github




 );
}
izvoz privzete aplikacije;

Dodaj usmerjanje

Če želite svoji aplikaciji dodati usmerjanje, najprej namestite odziv-usmerjevalnik-dom:

npm install react-router-dom

V App.js dodajte povezavo na stran z informacijami:

uvozi { Link } iz "react-router-dom";
funkcija App() {
 vrnitev (


O
Strani Github

Uvajanje React v Github




 );
}
izvoz privzete aplikacije;

Ker bo App.js deloval kot vaša domača stran, morate ustvariti le datoteko O komponenta:

const O = () => {
 vrnitev ( 


Domov
O strani




 );
}
izvoz privzeto O;

Zdaj morate ustvariti poti in konfigurirati usmerjevalnik React.

Spremenite index.js, da se URL ujema z ustreznimi komponentami:

uvozi React iz "react";
uvozite ReactDOM iz "react-dom";
uvozite aplikacijo iz "./App";
import { HashRouter, Routes, Route } iz "react-router-dom";
uvozi About iz "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Upoštevajte, kako ste uporabili HashRouter namesto BrowserRouter. Uporaba BrowserRouter bi sprožilo napako 404. To je zato, ker usmerjanje na straneh GitHub deluje drugače. Hashrouter ne sproži napake, ker uporablja hash del URL-ja za sinhronizacijo uporabniškega vmesnika z URL-jem.

Zadnji korak je vpis vseh novih sprememb v Git:

git dodaj.
git commit -m "Ustvari aplikacijo React"

Ustvarite GitHub Repository

Od Strani GitHub bo gostil vašo aplikacijo s pretvorbo skladišča v spletno mesto, morate ustvariti repozitorij GitHub. Pojdite na svoj račun GitHub in ustvarite nov repozitorij z istim imenom kot vaš projekt.

Nato dodajte skladišče GitHub v svoj lokalni repozitorij kot oddaljeno:

git oddaljeno dodajanje izvora /.git

Na koncu potisnite lokalno skladišče na GitHub:

git veja -M glavna
git push --set-upstream origin main

Namestite aplikacijo React na strani GitHub

Če želite uporabljati strani GitHub, jo boste morali najprej namestiti:

npm namestite gh-strani

gh-strani vam bo omogočilo ustvarjanje gh-strani vejo, kjer boste namestili svojo kodo.

Nato pojdite na svoj package.json datoteko in dodajte domačo stran, ki bo domači URL aplikacije:

"domača stran": "https://.github.io//",
"skripti": {
 "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"
 }

Za dokončanje postopka uvajanja zaženite naslednji ukaz:

npm run deploy

Vaša aplikacija je zdaj nameščena na GitHub in jo lahko obiščete na https://.github.io/.

Naredite več s stranmi GitHub

GitHub Pages ponuja preprost način za brezplačno uvajanje spletnih mest v internet. Medtem ko ste videli šele, kako lahko uvedete preprost projekt React, vam GitHub Pages omogoča veliko več. Z Jekyllom lahko na primer ustvarite popoln blog in ga celo gostite z domeno po meri.

Kako brezplačno gostiti spletno mesto z uporabo strani GitHub

Preberite Naprej

O avtorju