Как выложить реакт приложение на github pages

TL;DR

Если вы хотите опубликовать пользовательскую страничку (https://.github.io) на github pages , но вам важно, чтобы:
• исходный код был в том же репозитории
• ваш сайт открывался из корневой директории, а не подпапки

Тогда
• необходимо создать отдельную ветку, которая будет хранить в себе исходный код проекта
• настроить деплой

В итоге
В гите будет 2 ветки (dev и master), ветка dev будет хранить исходный код, а ветка master будет по сути build папкой из которой будет хоститься сайт.

В начале года, я пообещала себе наконец сделать свой сайт-визитку. Успешно добравшись до этапа деплоя на github pages, я хотела облегченно выдохнуть — всего 5 простых шагов отделяли меня от собственной странички в Интернете. Как оказалось это было только начало.

Меня интересовала возможность хостинга своей страницы как пользовательской (https://.github.io). Однако, мне хотелось держать исходный код проекта в том же репозитории, откуда он деплоится.

Основная проблема заключалась в том, что git позволяет деплоить пользовательские странички только из дефолтной ветки (master), а также не дает возможности указать кастомную папку в качестве корневой директории для деплоя.

Быстрый гуглинг не дал результатов. В основном предлагалось:
• задеплоить сайт как проект (хочу красивый урл ��)
• держать в репозитории только готовый билд (а исходники-то куда ��)
• вынести исходный код в submodules (ну зачем так сложнооо ��)

Подумав еще какое-то время и почти решившись на вариант с submodules, я наткнулась на пошаговое описание деплоя реактивного приложения на github pages. В одном из шагов предлагалось явно указать ветку, в которую будет пушится билд.

Бинго: можно ведь сложить исходники в отдельную ветку, а master держать в качестве ветки с готовой сборкой ��️ ��‍♀

Итог здесь, а я надеюсь, что этот способ позволит кому-то сберечь пару часов и с десяток нервных клеток��

развертывание приложения React на GitHub pages

Мучался долго, но у меня получилось залить реакт приложение на github pages. Работает с одним но: когда мы переходим по ссылке, которую гитхаб нам дал для пользования, переход происходит как бы не на главную страницу И хорошо, что кнопка home есть, можно перейти на главную. НО тут еще одно но: перейдя по ссылка на главную, адресс меняется с https://dozzadore.github.io/patternsPage/ на https://dozzadore.github.io/ и все бы ничего, только вот если эту ссылку использовать, то на экране ошибка 404. т.е. я по этой ссылке нахожусь, но если кому-нибудь дам или сам зайду по этому адресу https://dozzadore.github.io/ , то ошибка 404. Приложу package.json

< "name": "react-carousel", "homepage": "https://dozzadore.github.io/patternsPage", "version": "0.1.0", "private": true, "dependencies": < "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "jquery": "^3.6.4", "jquery-zoom": "^1.7.21", "js-image-zoom": "^0.7.0", "react": "^18.2.0", "react-dom": "^18.2.0", "react-medium-image-zoom": "^5.1.3", "react-responsive-carousel": "^3.2.23", "react-router-dom": "^6.9.0", "react-scripts": "5.0.1", "react-slick": "^0.29.0", "slick-carousel": "^1.8.1", "sunzi-image-magnifiers": "^1.2.0", "web-vitals": "^2.1.4" >, "scripts": < "start": "react-scripts start", "predeploy": "npm run build", "deploy": "gh-pages -d build", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" >, "eslintConfig": < "extends": [ "react-app", "react-app/jest" ] >, "browserslist": < "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] > > 

import from "react-router-dom"; import './App.css'; import Header from './components/Header/Header'; import Main from './components/Main/Main'; import Items from "./components/Main/Pages/Items/Items"; import Info from "./components/Main/Pages/Info/Info"; import Patterns from "./components/Main/Pages/Patterns/Patterns"; import ItemPage01 from "./components/Main/Pages/Items/itemsPages/page01/ItemPage01"; import ItemPage02 from "./components/Main/Pages/Items/itemsPages/page02/ItemPage02"; import ItemPage03 from "./components/Main/Pages/Items/itemsPages/page03/ItemPage03"; import ItemPage04 from "./components/Main/Pages/Items/itemsPages/page04/ItemPage04"; import ItemPage05 from "./components/Main/Pages/Items/itemsPages/page05/ItemPage05"; import ItemPage06 from "./components/Main/Pages/Items/itemsPages/page06/ItemPage06"; import PatternPage01 from "./components/Main/Pages/Patterns/PatternsPages/PatternPage01/PatternPage01"; import PatternPage02 from "./components/Main/Pages/Patterns/PatternsPages/PatternPage02/PatternPage02"; import PatternPage03 from "./components/Main/Pages/Patterns/PatternsPages/PatternPage03/PatternPage03"; import PatternPage04 from "./components/Main/Pages/Patterns/PatternsPages/PatternPage04/PatternPage04"; import PatternPage05 from "./components/Main/Pages/Patterns/PatternsPages/PatternPage05/PatternPage05"; import PatternPage06 from "./components/Main/Pages/Patterns/PatternsPages/PatternPage06/PatternPage06"; import DivManeken from "./components/DivManeken/DivManeken"; function App() < return ( 
   > /> > /> >/> > /> >/> >/> >/> >/> >/> >/> >/> >/> >/> >/> >/> >/>  
 ); > export default App; 

ReactJS + github pages – разворачиваем проект deploy на GitHub

Чтобы создать продакшен-сборку (версию для заливки на сервер) приложения используется команда npm run build . Это можно также запустить и кнопкой в VSC или WebStorm внизу слева, там где вызываются скрипты из package.json. В результате появится папочка build с файлами js и css.

Но если в таком виде просто залить содержимое папки на GitHub, то могут быть проблемы с работой. Поэтому ниже приведен более правильный алгоритм.

Как развернуть приложение в том же репозитории, где находится версия для разработки?

1. Установить пакет gh-pages, чтобы можно было использовать одноименную функцию. Для этого прописываем npm install gh-pages —dev либо yarn add gh-pages —dev . Нужно писать именно с –dev, чтобы пакет установился и прописался в package.json в разделе “devDependencies“, а не просто “dependencies“. Именно туда он попадает, если устанавливать по инструкции с документации при помощи npm install gh-pages —save-dev , поэтому использовать нужно одну из команд выше, а не эту.
2. Согласно той же документации, добавляем 2 строчки в раздел “scripts” нашего файла package.json:

"predeploy": "npm run build", "deploy": "gh-pages -d build"

«homepage»: «https://nameaccount.github.io/namerepository» . Как видно, путь должен ссылаться на на аккаунт гитхапаба и ваш репозиторий, в котором лежит приложение. Это не тот же самый путь, где лежит репозиторий для разработчика (master)! Посмотреть нужный путь можно в настройках репозитория в разделе GitHub Pages

BrowserRouter в нашем app.js:
До

import from 'react-router-dom'; . const NewApp = (props) => < return > >   > .

После

import from 'react-router-dom'; . const NewApp = (props) => < return > >   > .

Теперь наши url(ы) в приложении будут выглядеть не вот так https://yourname.github.io/social/dialogs , а вот так https://ourname.github.io/social/#/social/dialogs и ошибки при обновлении страницы больше не будет. Теперь нам можно и не прописывать homepage в package.json – все заработает и так. Но, повторюсь, на обычном хостинге или сервере такого делать не нужно.

Как развернуть приложение не в том репозитории, где находится версия для разработки?

1. Создаем новый пустой репозиторий.
2. Клонируем его (пустым) в папку на ПК.
3. Копируем в папку все файлы с исходным кодом нашего приложения (кроме скрытого файлика .git).
4. Комитим, пушим.
5. Делаем deploy, как описано в предыдущем разделе, и все происходит так же, как уже было описано выше.

2 ответа к «ReactJS + github pages – разворачиваем проект deploy на GitHub»

Отличная статья, спасибо Вам большое! Но у меня все равно возникает небольшая проблема. Проблема в том, что мои картинки лежат в public папке. И в gh-pages они не отображаются, так как не удается найти путь к этим картинкам. Локально проект работает нормально и все картинки подгружаются. С gh-pages работаю первый раз. И нигде не смог найти ответ, как можно пофиксить путь. Возможно у остальных проблем с картинками нет, так как картинки у них содержаться в папке src, а не в public. Возможно, Вы сможете мне помочь с этим, спасибо!

Вот здесь можно подобрать вариант решения, который для вас будет наиболее приемлемым:
https://stackoverflow.com/questions/47196800/reactjs-and-images-in-public-folder Как в первом ответе можно просто указать относительный путь , так как началом пути для Реакта и есть public/
Точнее сказать не могу, так как давно с Реактом не работаю((

Как бесплатно залить сайт на GitHub Pages

Допустим, вы сделали какой-то проект, например, собрали себе портфолио по шаблону, и теперь хотите выложить его в интернет. Если вы использовали только HTML и CSS, то необязательно платить деньги, чтобы загрузить сайт куда-то. Вы можете бесплатно выложить сайт на сервис GitHub Pages. Всё, что нужно — аккаунт на Гитхабе.

Создание репозитория

Для создания репозитория перейдите по ссылке https://github.com/new.

Важно, чтобы название репозитория было в виде «username.github.io», где username — имя вашего аккаунта на Гитхабе. В нашем примере это будет evgeniyshklyar.github.io .

Обязательно установите галку на пункте Add a README file.

Загрузка файлов

Репозиторий создан, теперь нужно загрузить файлы. Для этого можно воспользоваться VS Code, консолью или GitHub Desktop, но в нашем случае достаточно интерфейса Гитхаба.

Нажмите кнопку Add file — Upload files.

Затем перетащим файлы в появившееся поле для загрузки.

Добавим комментарий к нашему коммиту и нажмём кнопку «Commit changes».

Проверка работы сайта

Чтобы проверить работу сайта, достаточно перейти по адресу username.github.io, в нашем случае это htmlacademy.github.io. Вуаля!

Шаг 4. Подключаем свой домен

Гитхаб позволяет использовать собственное доменное имя вместо стандартного username.github.io. Для этого, разумеется, вам сначала нужно приобрести его.

Предположим, что у вас уже есть домен. Давайте подключим его к репозиторию. Перейдём во вкладку Settings в интерфейсе репозитория, и в разделе Pages в поле Custom domain введём название нашего домена (например: html-academy.ru) и нажмём кнопку Save.

Теперь Гитхаб знает о нашем домене, однако, этого недостаточно — нужно изменить информацию о DNS-записях самого домена. Для этого нам необходимо перейти на сайт доменного регистратора, где домен был куплен. Интерфейс работы с DNS-записями разный у каждого регистратора, но суть примерно одинакова.

Нам нужно настроить A-запись домена. Для этого перейдём в панель управления DNS-записями, найдём (или добавим) A-запись и укажем 192.30.252.153 в качестве её значения. Ещё будет полезной памятка Гитхаба по настройке А-записей у DNS провайдера.

Всё готово! В течение нескольких часов вы сможете открыть свой сайт, используя ваш домен.

Получить более глубокие знания о работе с Git, попробовать на практике поработать с ветками, с локальным и удалённым репозиторием и изменениями можно на профессиональном онлайн-курсе.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

5 частых ошибок при работе с Git

Git — это важный и довольной понятный инструмент для контроля версий в разработке программного обеспечения, но иногда он может выдавать ошибки, которые сбивают с толку. Если вы столкнулись с одной из этих ошибок, попробуйте наше решение.

• 27 августа 2023

Работа с Git через консоль

Задача: форкнуть репозиторий в GitHub, создать ветку и работать с кодом.

Сразу появляется много вопросов — что такое GitHub, какие для этого нужны команды, зачем, а главное, как всем этим пользоваться? Давайте разберёмся.

Когда мы пишем код, мы постоянно туда что-то добавляем, удаляем, и иногда всё может ломаться. Поэтому перед любыми изменениями стоит сделать копию проекта. Если собирать проекты в папки с именами проект1 , проект1_финал и проект2_доделка , вы быстро запутаетесь и точно что-нибудь потеряете. Поэтому для работы с кодом используют системы контроля версий.

Система контроля версий — программа, которая хранит разные версии одного документа, позволяет переключаться между ними, вносить и отслеживать изменения. Таких систем много и все они работают по принципу компьютерной игры, где вы можете вернуться к месту сохранения, если что-то пошло не так.

Git — самая популярная система контроля версий. С Git можно работать через командную строку (или терминал). В каждой системе своя встроенная программа для работы с командной строкой. В Windows это PowerShell или cmd, а в Linux или macOS — Terminal. Вместо встроенных программ можно использовать любую другую — например, Git Bash в Windows или iTerm2 для macOS.

Как работает терминал: мы вводим команду и получаем ответ компьютера — или всё получилось, или где-то ошибка, или нужно ввести что-то ещё — например, пароль. Поэтому большая часть этой инструкции состоит из команд для терминала. Сначала будет непривычно, но вам понравится.

Но давайте по порядку — установим Git на компьютер.

• 7 августа 2023

GitHub Desktop: обзор и первая настройка

Самая короткая инструкция о том, как сохранить файлы в GitHub и ничего не сломать. И самое главное — никакой консоли, всё через окошки и с помощью мышки. Для этого используем GitHub Desktop.

Внимание! GitHub Desktop не работает на Windows 7×32, поэтому если у вас эта версия системы, обновитесь до Windows 10 или воспользуйтесь программой GitKraken.

В этой статье идёт рассказ о системах контроля версий. Если вы совсем ничего о них не знаете, прочитайте статьи «Словарь терминов для Git и GitHub» и «Введение в системы контроля версий», чтобы понять терминологию и разобраться, зачем мы вообще это делаем.

• 7 августа 2023

Как склеить коммиты и зачем это нужно

Когда вы открываете пулреквест и ваш код смотрят и комментируют другие, бывает нужно что-то исправить. Обычно такие изменения мы комментируем сообщением вроде «Увеличил шрифт на 2px » или «Поменял оттенок фона в шапке». Такие маленькие изменения интересны, только пока они в пулреквесте. Ревьювер (человек, который смотрит ваш код), может легко узнать, что и когда вы изменили, а не читать весь diff заново, а вы можете легко откатить коммит, если он не нужен. Но когда приходит время вливать пулреквест, эти маленькие коммиты теряют свою ценность. Поэтому лучше их склеить в один.

• 14 июня 2023

Основные команды для работы с Git

Работа с Git через терминал — это обязательная часть практики фронтендера. Однако для начинающих разработчиков этот инструмент может показаться сложным. Чтобы вам было проще учиться, мы собрали основные команды для работы с Git.

☝ В некоторых командах мы будем писать URL-адрес удалённого репозитория и название проекта в квадратных скобках, вот так — [ссылка на удалённый репозиторий] . Мы делаем это только для наглядности. Вам квадратные скобки ставить не нужно.

• 22 февраля 2023

Регистрация на GitHub

Создание нового аккаунта на GitHub состоит всего из 10 шагов — и вся регистрация занимает меньше пяти минут.

�� Обратите внимания, что интерфейс Гитхаба регулярно меняется, так что внешне он может отличаться, когда вы читаете эту статью.

Начало регистрации. Так выглядит главный экран Гитхаба, когда вы не зарегистрированы. Главное, что вам нужно заметить — большое поле для ввода почты и зелёная кнопка. Вводите свой адрес и переходите на следующий шаг.

Ввод почты. На следующем шаге начинается регистрация. Подтвердите свою почту с прошлого шага и нажмите Continue (Продолжить).

Пароль. Придумайте сложный пароль, чтобы его никто не взломал. Например, Гитхаб просит, чтобы в пароле было не меньше 15 символов или 8 символов, но тогда должны быть и латинские буквы, и цифры.

Имя профиля. Теперь выберите имя вашего профиля — оно будет использоваться в интерфейсе, в коммитах и комментариях. То есть именно так вас будет видеть любой пользователь Гитхаба. Для разработчика Гитхаб вместо визитки, так что выбирайте что-нибудь приличное, лучше, если ник будет совпадать с вашими никнеймами на других сайтах.

Если имя недоступно, Гитхаб вам об этом скажет. А если доступно — жмите Continue.

Рассылки. Дальше Гитхаб спросит, хотите ли вы подписаться на рассылку об обновлениях. Впечатайте латинскую У, если хотите, или n, если письма вам не нужны. Готовы спорить, мы знаем, что вы выберете.

Капча, чтобы проверить, что вы не робот. Нам при регистрации пришлось два раза выбрать спиральную галактику — не сильно сложно. А если вы робот — не причиняйте вред человеку своим действием или бездействием.

Подтверждение почты. После капчи вам придёт письмо с кодом на почту. Введите его на следующей странице.

Вот здесь. Главное — не ошибайтесь.

Общая информация о вас и вашей команде. Если вы регистрируете аккаунт для себя, выбирайте Just me. Второй пункт — студент вы или учитель. Выбирайте «Студент», если вы не учитель.

Интересы. Дальше Гитхаб спросит вас об интересах — то есть о том, зачем вы регистрируете аккаунт. Из вариантов:

• Совместная разработка и код ревью.
• Автоматизация. CI/CD, API и другие админские вещи.
• Безопасность. Двухфакторная аутентификация, ревью, сканирование кода и списки зависимостей.
• Приложения. Выбирайте, если будете использовать GitHub Mobile, CLI, Desktop.
• Управление проектами. Проекты, метки, ишьи, вики и другие управленческие дела.
• Управление командами. Организации, приглашения, роли, домены.
• Сообщество. Выбирайте, если Гитхаб интересен вам как соцсеть.

Вы можете выбрать несколько пунктов или пропустить и не указывать ничего, для этого пролистайте страницу вниз для кнопки Skip customization.

Выбор тарифа. На выбор бесплатный тариф или платный GitHub Pro. Практика показывает, что для большинства личных проектов хватит бесплатного тарифа. В сентябре 2022 в него входили:

• Безлимитное количество репозиториев.
• 2000 минут CI/CD в месяц.
• 500 мегабайт места в хранилище пакетов.
• Поддержка сообщества.

Выбор тоже можно пропустить, тогда у вас будет бесплатный тариф.

Всё готово. Теперь у вас есть аккаунт. Можете создать репозиторий и работать с ним, или склонировать чужой. А для работы у вас есть несколько удобных вариантов:

• 28 сентября 2022

Работа с Git в Visual Studio Code

Если вы вёрстаете сайты или пишете код в редакторе Visual Studio Code, то Git за пять минут настраивается прямо внутри редактора. Не нужно запоминать команды для консоли, не нужно тыкать в лишние приложения.

Следуйте инструкции и всё получится.

• 16 сентября 2022

Markdown за 5 минут

Маркдаун, он же markdown — удобный и быстрый способ разметки текста. Маркдаун используют, если недоступен HTML, а текст нужно сделать читаемым и хотя бы немного размеченным (заголовки, списки, картинки, ссылки).

Главный пример использования маркдауна, с которым мы часто сталкиваемся — файлы readme.md , которые есть в каждом репозитории на Гитхабе. md в имени файла это как раз сокращение от markdown.

Другой частый пример — сообщения в мессенджерах. Можно поставить звёздочки вокруг текста в Телеграме, и текст станет полужирным.

Версии маркдауна отличаются, поэтому перепроверьте, какую вы используете.

• 5 октября 2021

Шпаргалка по Git. Решение основных проблем

Поговорим о решении проблем с Git.

• 11 декабря 2020

Полезные команды для работы с Git

Работа с Git через терминал — это обязательная часть практики каждого современного фронтенд-специалиста. Однако, для начинающих это может показаться сложным. Чтобы упростить процесс обучения, мы собрали для вас все самые необходимые команды, которые пригодятся в работе с Git на первое время.

• 1 января 2020