Jak wdrożyć aplikację React za darmo na stronach GitHub

Jeśli masz projekt i chcesz go hostować za darmo bez kupowania domeny, korzystanie z GitHub Pages to świetny wybór. GitHub Pages konwertuje Twoje repozytoria na strony internetowe i umożliwia hostowanie nieograniczonej liczby witryn projektów.

Wdrażanie witryny React z nawigacją wymaga dodatkowej konfiguracji w porównaniu z wdrażaniem witryny statycznej. Ten samouczek przeprowadzi Cię przez cały proces od utworzenia repozytorium GitHub do posiadania hostowanej witryny.

Utwórz aplikację React

W celach demonstracyjnych musisz stworzyć projekt React z routingiem, który wdrożysz później. Jeśli jednak masz już Reaguj projekt, możesz pominąć ten krok.

W terminalu uruchom aplikacja-stwórz-reaguj polecenie do szybkiego rusztowania projektu React:

npx create-react-app-reaguj-gh

Przejdź do utworzonego folderu i uruchom aplikację.

uruchomienie npm

Następnie otwórz folder projektu z preferowanym edytor kodu. w src folder, usuń wszystko oprócz App.js oraz index.js. Zastąp zawartość App.js następującą:

funkcja App() {
 zwrócić (


Strony Github

Wdrażanie React na Github




 );
}
eksportuj domyślną aplikację;

Dodaj routing

Aby dodać routing do swojej aplikacji, najpierw zainstaluj React-router-dom:

npm zainstaluj reak-router-dom

W App.js dodaj link do strony z informacjami:

importuj { Link } z "react-router-dom";
funkcja App() {
 zwrócić (


O
Strony Github

Wdrażanie React na Github




 );
}
eksportuj domyślną aplikację;

Ponieważ App.js będzie działał jako strona główna, wystarczy utworzyć O składnik:

const Informacje = () => {
 zwrócić ( 


Dom
O stronie




 );
}
eksportuj domyślnie Informacje;

Teraz musisz utworzyć trasy i skonfigurować router React.

Zmodyfikuj index.js, aby dopasować adres URL do odpowiednich komponentów:

importuj React z „react”;
importować ReactDOM z "react-dom";
importuj aplikację z "./App";
importuj { HashRouter, Trasy, Trasy } z "react-router-dom";
importuj Informacje z "./O";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Zwróć uwagę, jak użyłeś HashRouter zamiast PrzeglądarkaRouter. Za pomocą PrzeglądarkaRouter zgłosi błąd 404. Dzieje się tak, ponieważ routing działa inaczej na stronach GitHub. Haszrouter nie zgłasza błędu, ponieważ używa części skrótu adresu URL do synchronizacji interfejsu użytkownika z adresem URL.

Ostatnim krokiem jest zatwierdzenie wszystkich nowych zmian w Git:

git dodaj .
git commit -m "Utwórz aplikację React"

Utwórz repozytorium GitHub

Od Strony GitHub będzie hostować Twoją aplikację poprzez konwersję repozytorium na stronę internetową, musisz utworzyć repozytorium GitHub. Przejdź do swojego konta GitHub i utwórz nowe repozytorium o tej samej nazwie co Twój projekt.

Następnie dodaj repozytorium GitHub do lokalnego repozytorium jako zdalne:

git remote add origin /.git

Na koniec wypchnij lokalne repozytorium do GitHub:

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

Wdróż aplikację React na stronach GitHub

Aby korzystać z GitHub Pages, musisz go najpierw zainstalować:

npm zainstaluj gh-strony

gh-strony pozwoli Ci stworzyć gh-strony oddział, w którym wdrożysz swój kod.

Następnie przejdź do swojego pakiet.json plik i dodaj stronę główną, która będzie głównym adresem URL aplikacji:

"strona główna": "https://.github.io//",
"skrypty": {
 "predeploy": "kompilacja uruchomienia npm",
 "deploy": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "build-scripts build",
 "test": "test skryptów reakcji",
 "eject": "wysuń skrypty reakcji"
 }

Uruchom następujące polecenie, aby zakończyć proces wdrażania:

Wdrażanie uruchomienia npm

Twoja aplikacja została wdrożona na GitHub i możesz ją odwiedzić pod adresem https://.github.io/.

Zrób więcej ze stronami GitHub

GitHub Pages zapewnia prosty sposób na bezpłatne wdrażanie witryn w Internecie. Chociaż widziałeś tylko, jak wdrożyć prosty projekt React, GitHub Pages pozwala zrobić o wiele więcej. Na przykład możesz stworzyć pełnowymiarowego bloga za pomocą Jekyll, a nawet hostować go przy użyciu niestandardowej domeny.

Jak hostować witrynę za darmo za pomocą stron GitHub

Czytaj dalej

O autorze