Kako besplatno implementirati React aplikaciju s GitHub stranicama

Ako imate projekt i želite ga besplatno hostirati bez kupnje domene, korištenje GitHub stranica izvrstan je izbor. GitHub Pages pretvara vaša spremišta u web-mjesta i omogućuje vam hostiranje neograničenog broja projektnih stranica.

Implementacija React stranice s navigacijom zahtijeva dodatnu konfiguraciju u usporedbi s implementacijom statične stranice. Ovaj vodič vas vodi kroz cijeli proces od kreiranja GitHub spremišta do posjedovanja web-mjesta.

Napravite React aplikaciju

Za potrebe demonstracije, trebate stvoriti React projekt s usmjeravanjem koje ćete kasnije implementirati. Međutim, ako imate postojeći Projekt React, slobodno preskočite ovaj korak.

U terminalu pokrenite stvori-reagiraj-aplikaciju naredba za brzo postavljanje React projekta:

npx create-react-app react-gh

Dođite do kreirane mape i pokrenite svoju aplikaciju.

npm run start

Zatim otvorite mapu projekta s željenom uređivač koda. U src mapu, izbrišite sve osim App.js i index.js. Zamijenite sadržaj u App.js sljedećim:

funkcija App() {
 vratiti (


Github stranice

Implementacija Reacta na Github




 );
}
izvoz zadane aplikacije;

Dodaj usmjeravanje

Da biste svojoj aplikaciji dodali usmjeravanje, prvo instalirajte reagirati-ruter-dom:

npm install react-router-dom

U App.js dodajte vezu na stranicu s informacijama:

import { Link } iz "react-router-dom";
funkcija App() {
 vratiti (


Oko
Github stranice

Implementacija Reacta na Github




 );
}
izvoz zadane aplikacije;

Budući da će App.js djelovati kao vaša početna stranica, trebate samo kreirati Oko komponenta:

const O = () => {
 vratiti ( 


Dom
O stranici




 );
}
izvoz zadano O;

Sada morate kreirati rute i konfigurirati React usmjerivač.

Izmijenite index.js kako bi se URL podudarao s odgovarajućim komponentama:

import React iz "react";
uvoz ReactDOM iz "react-dom";
uvoz aplikacije iz "./App";
import { HashRouter, Routes, Route } iz "react-router-dom";
import About from "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Obratite pažnju kako ste koristili HashRouter umjesto BrowserRouter. Korištenje BrowserRouter izazvalo bi pogrešku 404. To je zato što usmjeravanje funkcionira drugačije na GitHub stranicama. Hashrouter ne izaziva pogrešku jer koristi hash dio URL-a za sinkronizaciju korisničkog sučelja s URL-om.

Posljednji korak je uvođenje svih novih promjena u Git:

git add .
git commit -m "Stvori React aplikaciju"

Napravite GitHub spremište

Od GitHub stranice će ugostiti vašu aplikaciju pretvaranjem repozitorija u web stranicu, morate stvoriti GitHub spremište. Idite na svoj GitHub račun i stvorite novo spremište s istim imenom kao i vaš projekt.

Zatim dodajte GitHub spremište u svoje lokalno spremište kao daljinski:

git daljinsko dodavanje porijekla /.git

Konačno, gurnite lokalno spremište na GitHub:

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

Implementirajte React aplikaciju na GitHub stranice

Da biste koristili GitHub stranice, prvo ćete ga morati instalirati:

npm instalirajte gh-stranice

gh-stranice omogućit će vam stvaranje gh-stranice grana u kojoj ćete implementirati svoj kod.

Zatim idite na svoje paket.json datoteku i dodajte početnu stranicu koja će biti početni URL aplikacije:

"početna stranica": "https://.github.io//",
"skripte": {
 "predeploy": "npm run build",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "test": "test skripti reakcije",
 "eject": "react-scripts eject"
 }

Pokrenite sljedeću naredbu da dovršite proces implementacije:

npm run deploy

Vaša je aplikacija sada raspoređena na GitHub i možete je posjetiti na https://.github.io/.

Učinite više s GitHub stranicama

GitHub Pages pruža jednostavan način besplatnog postavljanja web stranica na internet. Iako ste tek vidjeli kako možete implementirati jednostavan React projekt, GitHub Pages vam omogućuje mnogo više. Na primjer, možete stvoriti cjeloviti blog koristeći Jekyll, pa čak i hostirati ga koristeći prilagođenu domenu.

Kako besplatno ugostiti web stranicu pomoću GitHub stranica

Pročitajte dalje

O autoru