Hur man distribuerar en React-app gratis med GitHub-sidor

Om du har ett projekt och vill vara värd för det gratis utan att köpa en domän är det ett utmärkt val att använda GitHub Pages. GitHub Pages konverterar dina arkiv till webbplatser och låter dig vara värd för obegränsade projektsajter.

Att distribuera en React-webbplats med navigering kräver extra konfiguration jämfört med att distribuera en statisk webbplats. Den här handledningen leder dig genom hela processen från att skapa ett GitHub-förråd till att ha en värdplats.

Skapa en React-app

För demonstrationsändamål måste du skapa ett React-projekt med routing som du kommer att distribuera senare. Men om du har en befintlig Reagera projekt, hoppa över det här steget.

I terminalen kör du skapa-reagera-app kommando för att snabbt bygga ett React-projekt:

npx create-react-app react-gh

Navigera till den skapade mappen och starta din applikation.

npm kör start

Öppna sedan projektmappen med din favorit kodredigerare. I den src mapp, radera allt utom App.js och index.js. Ersätt innehållet i App.js med följande:

function App() {
 lämna tillbaka (


Github-sidor

Distribuerar React till Github




 );
}
exportera standardapp;

Lägg till routing

För att lägga till routing till din applikation, installera först reagera-router-dom:

npm installera react-router-dom

I App.js lägger du till länken till sidan Om:

importera { Link } från "react-router-dom";
function App() {
 lämna tillbaka (


Handla om
Github-sidor

Distribuerar React till Github




 );
}
exportera standardapp;

Eftersom App.js kommer att fungera som din startsida behöver du bara skapa Handla om komponent:

const About = () => {
 lämna tillbaka ( 


Hem
Om sidan




 );
}
export standard Om;

Nu måste du skapa rutterna och konfigurera en React-router.

Ändra index.js för att matcha URL: en med respektive komponenter:

import Reagera från "reagera";
importera ReactDOM från "react-dom";
importera app från "./App";
importera { HashRouter, Routes, Route } från "react-router-dom";
importera Om från "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Lägg märke till hur du använde HashRouter istället för BrowserRouter. Använder sig av BrowserRouter skulle ge ett 404-fel. Detta beror på att routing fungerar annorlunda på GitHub-sidor. Hashrouter ger inte upp ett fel eftersom den använder hash-delen av URL: en för att synkronisera användargränssnittet med URL: en.

Det sista steget är att göra alla nya ändringar i Git:

git add .
git commit -m "Skapa React-app"

Skapa GitHub Repository

Eftersom GitHub-sidor kommer att vara värd för din applikation genom att konvertera förvaret till en webbplats, måste du skapa ett GitHub-förråd. Gå till ditt GitHub-konto och skapa ett nytt arkiv med samma namn som ditt projekt.

Lägg sedan till GitHub-förvaret till ditt lokala förråd som en fjärrkontroll:

git remote add origin /.git

Till sist, skjut det lokala förvaret till GitHub:

git branch -M main
git push --set-upstream ursprung main

Distribuera React-appen till GitHub-sidor

För att kunna använda GitHub-sidor måste du först installera det:

npm installera gh-sidor

gh-sidor låter dig skapa gh-sidor filial där du ska distribuera din kod.

Gå sedan till din package.json fil och lägg till startsidan som blir appens hemadress:

"hemsida": "https://.github.io//",
"scripts": {
 "predeploy": "npm kör bygg",
 "deploy": "gh-pages -d build", 
 "start": "reaktionsskript startar",
 "build": "react-scripts build",
 "test": "react-scripts test",
 "eject": "react-scripts mata ut"
 }

Kör följande kommando för att slutföra distributionsprocessen:

npm kör driftsättning

Din applikation är nu distribuerad till GitHub och du kan besöka den på https://.github.io/.

Gör mer med GitHub-sidor

GitHub Pages erbjuder ett enkelt sätt att distribuera webbplatser till internet gratis. Medan du bara såg hur du kan distribuera ett enkelt React-projekt, låter GitHub Pages dig göra så mycket mer. Du kan till exempel skapa en komplett blogg med Jekyll och till och med vara värd för den med en anpassad domän.

Hur man är värd för en webbplats gratis med hjälp av GitHub-sidor

Läs Nästa

Om författaren