> For the complete documentation index, see [llms.txt](https://safronman.gitbook.io/deploy/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://safronman.gitbook.io/deploy/github-pages.md).

# Github pages

<https://reactgo.com/deploy-react-app-github-pages/>\
<https://github.com/gitname/react-gh-pages>\
<https://create-react-app.dev/docs/deployment/#github-pages>\
\
\
\
Записать 2 видоса\
1 базовый \
2 работа с роутингом<br>

**1 базовый**

* рассказать для чего это нужно gh-pages
* для старта урока должен быть создан стартовый репозиторий и залит на гитхаб\
  \
  Добавляем в package.json следующую строку
* "homepage": "<https://myusername.github.io/my-app>",

![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FfSk1U6J6tVAeEoFr3IDF%2Fimage.png?alt=media\&token=72d4d6a3-1988-418c-a15f-6b2978cf4012)

![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2F89hCrvcubHl4jjtT0wpu%2Fimage.png?alt=media\&token=190c583e-785d-42b1-a799-0473739fa60a)

2\) Добавляем в скрипты следующие строки. Можно ярн, можно нпм\
![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FTPGXgemsPVRaENk36gLN%2Fimage.png?alt=media\&token=f6bab2ec-88ed-452e-828b-d3f0408cc37b) ![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2Fqef71JMuQnrd11zsMNjt%2Fimage.png?alt=media\&token=f9029cd3-e8cc-41f3-a74b-1935338b2d14)

3\) Прописываем в терминале **yarn run deploy** или нажимаем соответсвующую кнопку

![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FEcMHG3MhsgLM86ylkqo6%2Fimage.png?alt=media\&token=b3732f78-5422-46ec-8017-374f087e674f)

4\) Пару слов про github action, которые позволят нам контролировать процесс. Когда будем вносить изменения, быстро переключиться и показать процесс деплоя\
![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FwtO3YZ1PUugxfOTg6EP6%2Fimage.png?alt=media\&token=1409dc21-2e7b-406f-9d1c-2b90d86292c4)

5\) Проверяем также в настройках, что выставлено верно\
в настройках обязательно выбираем gh-pages<br>

<figure><img src="https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FvsacDqyHkVwjW9HnI5Xe%2F1212.jpg?alt=media&amp;token=1a3f91de-aab7-42b8-9fea-1a4e24a53a0e" alt=""><figcaption></figcaption></figure>

6\) Теперь давайте внесем изменеия в код, убедимся что все отработает и посмтотрим на процесс билда

* Идем в гитхаб и наблюдаем процесс билда

![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2F668eerUiXXdPOWcrz3IW%2Fimage.png?alt=media\&token=c20effe4-20ba-468c-b102-79a41e7308c0)

\
7\) Для удобства добавим адрес на главной странице репозитория\
![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2Fjzdhkz1S15QcvgDDLvIo%2Fimage.png?alt=media\&token=2ddb7e54-eea3-45da-b090-292222c0949d)

* варианты ошибок
  * сделать описку в репозитории или имени и показать ошибку

<figure><img src="https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2Fzs16PHYNcLrRKRdnK3x3%2Fimage.png?alt=media&amp;token=8ab068fc-6f78-463f-b28c-7452e49113b2" alt=""><figcaption></figcaption></figure>

* попробовать что то ярном поставить, а что то нпм и глянуть что получится

\
\
2 работа с роутингом

* Broswer/ hashrouter

![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2Fr4xFFfseEmUE4IWUtETo%2Fimage.png?alt=media\&token=40e84c60-266e-400e-8b5a-a4e7cc319fd5)

```javascript
<BrowserRouter basename='/reponame'>
  <App/>
<BrowserRouter/>
```

<https://github.com/facebook/create-react-app/issues/1765>\
![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FjCwd3ITA6OWP7ElViTMn%2Fimage.png?alt=media\&token=c2fcad7c-06e0-461e-aad4-2a955f775cba)

<http://localhost:3000/gh-pages#/news>\
[http://localhost:3000/gh-pages#](http://localhost:3000/gh-pages#/news)/

Единственно рабочий вариант createHashRouter и Navigate

\
![](https://3088238479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWZ1nbfwmvpX0G2uqKQYU%2Fuploads%2FdGgdzVWOFrBHBjSTESfH%2Fimage.png?alt=media\&token=e11286d6-7f44-4886-924b-82c28689f396)