Как да внедрите безплатно приложение React със страници на GitHub

Ако имате проект и искате да го хоствате безплатно, без да купувате домейн, използването на GitHub Pages е чудесен избор. GitHub Pages преобразува вашите хранилища в уебсайтове и ви позволява да хоствате неограничен брой сайтове за проекти.

Разгръщането на React сайт с навигация изисква допълнителна конфигурация в сравнение с разполагането на статичен сайт. Този урок ви превежда през целия процес от създаване на GitHub хранилище до хостван сайт.

Създайте React приложение

За демонстрационни цели трябва създайте React проект с маршрутизиране, което ще разположите по-късно. Въпреки това, ако имате съществуващ Проект React, не се колебайте да пропуснете тази стъпка.

В терминала стартирайте създаване-реагиране-приложение команда за бързо изграждане на React проект:

npx create-react-app react-gh

Придвижете се до създадената папка и стартирайте приложението си.

npm стартиране на стартиране

След това отворете папката на проекта с предпочитания от вас редактор на код. В src папка, изтрийте всичко освен App.js и index.js. Заменете съдържанието в App.js със следното:

функция App() {
 връщане (


Github страници

Внедряване на React в Github




 );
}
експортиране на приложение по подразбиране;

Добавяне на маршрутизиране

За да добавите маршрутизиране към приложението си, първо инсталирайте реакция-рутер-дом:

npm инсталирайте реакция-рутер-дом

В App.js добавете връзката към страницата за информация:

import { Link } от "react-router-dom";
функция App() {
 връщане (


относно
Github страници

Внедряване на React в Github




 );
}
експортиране на приложение по подразбиране;

Тъй като App.js ще действа като ваша начална страница, трябва само да създадете относно съставна част:

const Относно = () => {
 връщане ( 


У дома
Относно страницата




 );
}
експортиране по подразбиране About;

Сега трябва да създадете маршрутите и да конфигурирате React рутер.

Променете index.js, за да съответства на URL адреса на съответните компоненти:

импортирайте React от "react";
импортирайте ReactDOM от "react-dom";
импортирайте приложение от "./App";
import { HashRouter, Routes, Route } от "react-router-dom";
импортирайте About от "./About";
ReactDOM.render(



} />
}/>


,
 document.getElementById("root")
);

Забележете как сте използвали HashRouter вместо BrowserRouter. Използвайки BrowserRouter ще предизвика грешка 404. Това е така, защото маршрутизирането работи по различен начин в страниците на GitHub. Hashrouter не предизвиква грешка, защото използва хеш частта на URL адреса, за да синхронизира потребителския интерфейс с URL адреса.

Последната стъпка е извършването на всички нови промени в Git:

git добавете .
git commit -m "Създаване на приложение React"

Създайте GitHub хранилище

От Страници на GitHub ще хоства вашето приложение чрез конвертиране на хранилището в уебсайт, трябва да създадете хранилище на GitHub. Отидете в акаунта си в GitHub и създайте ново хранилище със същото име като вашия проект.

След това добавете хранилището на GitHub към вашето локално хранилище като дистанционно:

git дистанционно добавяне на произход /.git

Накрая натиснете локалното хранилище към GitHub:

git клон -M main
git push --set-upstream origin main

Внедряване на React App на GitHub Pages

За да използвате GitHub Pages, първо трябва да го инсталирате:

npm инсталира gh-страници

gh-страници ще ви позволи да създадете gh-страници клон, където ще разположите своя код.

След това отидете на вашия package.json файл и добавете началната страница, която ще бъде началният URL адрес на приложението:

"начална страница": "https://.github.io//",
"скриптове": {
 "predeploy": "npm run build",
 "разгръщане": "gh-pages -d build", 
 "start": "react-scripts start",
 "build": "react-scripts build",
 "тест": "тест на скриптове за реакция",
 "eject": "react-scripts eject"
 }

Изпълнете следната команда, за да завършите процеса на внедряване:

npm стартирайте разгръщане

Вашето приложение вече е разположено в GitHub и можете да го посетите на https://.github.io/.

Направете повече със страниците на GitHub

GitHub Pages предоставя прост начин за безплатно разгръщане на уебсайтове в интернет. Въпреки че видяхте само как можете да разгърнете прост проект React, GitHub Pages ви позволява да правите много повече. Например, можете да създадете пълен блог с помощта на Jekyll и дори да го хоствате с помощта на персонализиран домейн.

Как да хоствате уебсайт безплатно с помощта на GitHub страници

Прочетете Следващото

За автора