Hogyan telepítsünk ingyenesen egy React alkalmazást a GitHub oldalakkal

Ha van egy projektje, és domain vásárlása nélkül szeretné ingyenesen tárolni azt, a GitHub Pages használata nagyszerű választás. A GitHub Pages webhelyekké alakítja az adattárakat, és korlátlan számú projekthelyet biztosít.

A React webhely navigációval történő telepítése extra konfigurációt igényel a statikus webhelyek telepítéséhez képest. Ez az oktatóanyag végigvezeti az egész folyamaton a GitHub-tárhely létrehozásától a tárolt webhely létrehozásáig.

Hozzon létre egy React alkalmazást

Demonstrációs célból meg kell hozzon létre egy React projektet az útválasztással, amelyet később telepít. Ha azonban van egy meglévő Reagálás projekt, nyugodtan hagyja ki ezt a lépést.

A terminálban futtassa a alkalmazás létrehozása-reagálása parancs a React projekt gyors felállításához:

npx create-react-app react-gh

Keresse meg a létrehozott mappát, és indítsa el az alkalmazást.

npm futás indítása

Ezután nyissa meg a kívánt projektmappát kódszerkesztő. Ban,-ben src mappát, töröljön mindent, kivéve App.js és index.js. Cserélje ki az App.js tartalmát a következőre:

function App() {
 Visszatérés (


Github oldalak

A React telepítése a Githubba




 );
}
alapértelmezett alkalmazás exportálása;

Útvonal hozzáadása

Ha az alkalmazáshoz útválasztást szeretne hozzáadni, először telepítse react-router-dom:

npm install react-router-dom

Az App.js-ben adja hozzá a névjegyoldalra mutató hivatkozást:

import { Link } in "react-router-dom";
function App() {
 Visszatérés (


Ról ről
Github oldalak

A React telepítése a Githubba




 );
}
alapértelmezett alkalmazás exportálása;

Mivel az App.js lesz a kezdőlapja, csak létre kell hoznia a Ról ről összetevő:

const Névjegy = () => {
 Visszatérés ( 


itthon
Az oldalról




 );
}
export alapértelmezett Névjegy;

Most létre kell hoznia az útvonalakat, és be kell állítania egy React útválasztót.

Módosítsa az index.js fájlt, hogy az URL megfeleljen a megfelelő összetevőknek:

import React from "react";
importálja a ReactDOM-ot a "react-dom"-ból;
alkalmazás importálása a „./App” alkalmazásból;
import { HashRouter, Routes, Route } from "react-router-dom";
import Névjegy innen: "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Figyeld meg, hogyan használtad HashRouter ahelyett BrowserRouter. Használata BrowserRouter 404-es hibát jelezne. Ennek az az oka, hogy az útválasztás másként működik a GitHub-oldalakon. Hashrouter nem ad fel hibát, mert az URL hash részét használja a felhasználói felület szinkronizálására az URL-lel.

Az utolsó lépés az összes új módosítás végrehajtása a Gitben:

git add .
git commit -m "React alkalmazás létrehozása"

Hozzon létre GitHub-tárat

Mivel GitHub oldalak a tároló webhelyté konvertálásával tárolja az alkalmazást, létre kell hoznia egy GitHub-tárat. Nyissa meg GitHub-fiókját, és hozzon létre egy új tárat a projektével megegyező néven.

Ezután távoliként adja hozzá a GitHub-tárat a helyi tárolóhoz:

git távoli add origin /.git

Végül tolja a helyi adattárat a GitHubba:

git ág -M fő
git push --set-upstream origin main

Telepítse a React alkalmazást a GitHub oldalakra

A GitHub Pages használatához először telepítenie kell:

npm install gh-pages

gh-oldalak lehetővé teszi a létrehozását gh-oldalak fiók, ahol telepíteni fogja a kódot.

Ezután menjen a sajátjához package.json fájlt, és adja hozzá a kezdőlapot, amely az alkalmazás kezdő URL-je lesz:

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

Futtassa a következő parancsot a telepítési folyamat befejezéséhez:

npm run deploy

Alkalmazása most telepítve van a GitHubon, és megtekintheti a következő címen https://.github.io/.

Tegyen többet a GitHub oldalakkal

A GitHub Pages egyszerű módot kínál a webhelyek ingyenes internetes telepítésére. Míg Ön csak azt látta, hogyan telepíthet egy egyszerű React-projektet, a GitHub Pages sokkal többet tesz lehetővé. Például létrehozhat egy teljes értékű blogot a Jekyll segítségével, és akár egy egyéni domain használatával is tárolhatja azt.

Hogyan lehet ingyenesen tárolni egy webhelyet a GitHub oldalak használatával

Olvassa el a következőt

A szerzőről