Slik distribuerer du en React-app gratis med GitHub-sider

Hvis du har et prosjekt og vil være vert for det gratis uten å kjøpe et domene, er det et godt valg å bruke GitHub Pages. GitHub Pages konverterer lagrene dine til nettsteder og lar deg være vert for ubegrensede prosjektsider.

Å distribuere et React-nettsted med navigasjon krever ekstra konfigurasjon sammenlignet med å distribuere et statisk nettsted. Denne opplæringen leder deg gjennom hele prosessen fra å lage et GitHub-depot til å ha et vertssted.

Lag en React-app

For demonstrasjonsformål må du opprette et React-prosjekt med ruting som du vil distribuere senere. Men hvis du har en eksisterende Reager prosjekt, hopp over dette trinnet.

I terminalen kjører du lag-reager-app kommando for raskt stillas et React-prosjekt:

npx create-react-app react-gh

Naviger til den opprettede mappen og start applikasjonen.

npm kjørestart

Deretter åpner du prosjektmappen med din foretrukne kode editor. I src mappen, slett alt unntatt App.js og index.js. Erstatt innholdet i App.js med følgende:

funksjon App() {
 komme tilbake (


Github-sider

Distribuerer React til Github




 );
}
eksport standard app;

Legg til ruting

For å legge til ruting i applikasjonen, må du først installere reagere-ruter-dom:

npm installer react-router-dom

I App.js legger du til lenken til om-siden:

importer { Link } fra "react-router-dom";
funksjon App() {
 komme tilbake (


Om
Github-sider

Distribuerer React til Github




 );
}
eksport standard app;

Siden App.js vil fungere som startsiden din, trenger du bare å opprette Om komponent:

const Om = () => {
 komme tilbake ( 


Hjem
Om side




 );
}
eksport standard Om;

Nå må du opprette rutene og konfigurere en React-ruter.

Endre index.js for å matche URL-en til de respektive komponentene:

import Reager fra "reagere";
importere ReactDOM fra "react-dom";
importer app fra "./App";
importer { HashRouter, Routes, Route } fra "react-router-dom";
importer Om fra "./Om";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Legg merke til hvordan du brukte HashRouter i stedet for Nettleserruter. Ved hjelp av Nettleserruter vil gi en 404-feil. Dette er fordi ruting fungerer annerledes på GitHub-sider. Hashrouter oppstår ikke en feil fordi den bruker hash-delen av URL-en til å synkronisere brukergrensesnittet med URL-en.

Det siste trinnet er å forplikte alle de nye endringene til Git:

git legg til.
git commit -m "Create React app"

Opprett GitHub-depot

Siden GitHub-sider vil være vert for applikasjonen din ved å konvertere depotet til et nettsted, må du opprette et GitHub-depot. Gå til GitHub-kontoen din og opprett et nytt depot med samme navn som prosjektet ditt.

Deretter legger du til GitHub-depotet til ditt lokale depot som en fjernkontroll:

git remote add origin /.git

Til slutt, skyv det lokale depotet til GitHub:

git gren -M main
git push --set-upstream opprinnelse main

Distribuer React-appen til GitHub-sider

For å bruke GitHub-sider, må du først installere det:

npm installere gh-sider

gh-sider lar deg lage gh-sider gren der du skal distribuere koden din.

Gå deretter til din package.json fil og legg til hjemmesiden som vil være startadressen til appen:

"hjemmeside": "https://.github.io//",
"scripts": {
 "predeploy": "npm kjøre build",
 "deploy": "gh-pages -d build", 
 "start": "reaksjonsskript starter",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts eject"
 }

Kjør følgende kommando for å fullføre distribusjonsprosessen:

npm kjøre distribusjon

Applikasjonen din er nå distribuert til GitHub, og du kan besøke den på https://.github.io/.

Gjør mer med GitHub-sider

GitHub Pages gir en enkel måte å distribuere nettsteder til internett gratis. Mens du bare så hvordan du kan distribuere et enkelt React-prosjekt, lar GitHub Pages deg gjøre så mye mer. Du kan for eksempel lage en fullverdig blogg ved å bruke Jekyll og til og med være vert for den ved å bruke et tilpasset domene.

Hvordan være vert for et nettsted gratis ved å bruke GitHub-sider

Les Neste

Om forfatteren