Как обновить gh pages

React GitHub pages, как обновить код уже на готовом репозитории?

Залил проект написанный на React на github pages, что мне прописывать чтобы обновить его? То есть обновить страницу на этом бесплатном хостинге, как запушить новый код. Пытался найти ответ, безуспешно, думаю кто из вас сталкивался с этим знают решение.

• Вопрос задан более трёх лет назад
• 1296 просмотров

Комментировать
Решения вопроса 2

Все дороги ведут в Рим — встретимся в Риме!

1. Настроить gitlab.ci чтобы автоматом собирал реакт приложение в папку где у тебя открывается pages
2. прописать:

git pull git add . git commit -m "update" git push

Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

мама говорит что я особенный

Код, предназначенный для GitHub Pages находится в ветке gh-page. Я так подозреваю что у вас такая структура проекта:
— в ветке main (или master) находится реакт приложение, файл packages.json и вот это вот всё
— есть ветка gh-pages

Самый простой способ (как по мне) будет в ветке master(main) сделать

— npm i -D gh-pages (или yarn add gh-pages -D)
— в секцию scripts package.json добавить:
«predeploy»: «npm run build» (или yanr build если у вас yarn),
«deploy»: «gh-pages -d build -m ‘Automatically update gh-pages [skip ci]'»,

После этого из консоли можно выполнять `npm run deploy` (или yarn deploy) и проект будет собираться и выкатываться на gh-pages.

Можно еще запилить GH Action для красоты, тогда вся движня с билдом и деплоем будет выполняться автоматически при кажом пуше в master.

Изменение видимости сайта GitHub Pages

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

Кто может использовать эту функцию.

People with admin access to a repository can change the visibility of a GitHub Pages site.

About access control for GitHub Pages sites

With access control for GitHub Pages, you can restrict access to your project site by publishing the site privately. A privately published site can only be accessed by people with read access to the repository the site is published from. You can use privately published sites to share your internal documentation or knowledge base with members of your enterprise.

Note: To publish a GitHub Pages site privately, your organization must use GitHub Enterprise Cloud. For more information about how you can try GitHub Enterprise Cloud for free, see «Setting up a trial of GitHub Enterprise Cloud.»

If your enterprise uses Enterprise Managed Users, access control is not available, and all GitHub Pages sites are only accessible to other enterprise members. For more information about Enterprise Managed Users, see «About GitHub Pages.»

If your organization uses GitHub Enterprise Cloud without Enterprise Managed Users, you can choose to publish your project sites privately or publicly to anyone on the internet.

Access control is available for project sites that are published from a private or internal repository that are owned by the organization. You cannot manage access control for an organization site. For more information about the types of GitHub Pages sites, see «About GitHub Pages.»

About subdomains for privately published sites

Privately published sites are available at a different subdomain than publicly published sites. This ensures that your GitHub Pages site is secure from the moment it’s published:

• We automatically secure every subdomain of *.pages.github.io with a TLS certificate, and enforce HSTS to ensure that browsers always serve the page over HTTPS.
• We use a unique subdomain for the privately published site to ensure that other repositories in your organization cannot publish content on the same origin as the site. This protects your site from «cookie tossing». This is also why we don’t host GitHub Pages sites on the github.com domain.

You can see your site’s unique subdomain in the «Pages» tab of your repository settings. If you’re using a static site generator configured to build the site with the repository name as a path, you may need to update the settings for the static site generator when changing the site to private. For more information, see «Managing a custom domain for your GitHub Pages site» or the documentation for your static site generator.

To use a shorter and more memorable domain for your privately published site, you can configure a custom domain. For more information, see «Configuring a custom domain for your GitHub Pages site.»

Changing the visibility of your GitHub Pages site

1. On GitHub Enterprise Cloud, navigate to your site’s repository.
2. Under your repository name, click

Settings. If you cannot see the «Settings» tab, select the

dropdown menu, then click Settings.

Visit site.

Note: It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub Enterprise Cloud. If you don’t see your GitHub Pages site changes reflected in your browser after an hour, see «About Jekyll build errors for GitHub Pages sites.»

После обновление страницы на gh-pages вылазит ошибка 404

Как избавится от проблемы что после обновление страницы на gh-pages вылазит ошибка 404. Но когда я обновляю главную страницу все хорошо ошибки нет, но стоит перейти на какую либо другую страницу и затем обновить ее она появляется.

Отслеживать
задан 11 янв 2023 в 8:17
237 1 1 серебряный знак 10 10 бронзовых знаков

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Исправил таки образом я писал на React так что буду обьеснять по нему в папке public создал файл 404.html и написал в нем

Потом перешол в файл index.html и в теге head написал

После чего зашел в index.js и написал

в атрибуте basename написал название репозитория.

Вот так выглядит мой router

после всех этих манипуляций все заработало После обновления странице не выходит ошибка 404 и при переходе по ссылки тоже не приводит теперь к этой ошибке. Надеюсь помог кто искал на это ответ

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/
Точнее сказать не могу, так как давно с Реактом не работаю((