React GitHub pages, как обновить код уже на готовом репозитории?
Залил проект написанный на React на github pages, что мне прописывать чтобы обновить его? То есть обновить страницу на этом бесплатном хостинге, как запушить новый код. Пытался найти ответ, безуспешно, думаю кто из вас сталкивался с этим знают решение.
- Вопрос задан более двух лет назад
- 1194 просмотра
Комментировать
Решения вопроса 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?
GitHub — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения в системе управления версиями Git. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.
Публикация контента
GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная система управления версиями — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция GitHub Pages, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.
Базовая установка Github
- Прежде всего, установите Git на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.
- Затем зарегистрируйтесь на GitHub. Это просто.
- После того, как вы зарегистрировались, войдите в свою учётную запись на github.com с помощью своих имени пользователя и пароля.
Подготовка кода для загрузки
В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем index.html .
Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:
-
Направьте командную строку в вашу папку test-site (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду cd (т.е. «change directory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке test-site на рабочем столе:
cd Desktop/test-site
git init
Дополнительно об интерфейсах командной строки
Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:

Примечание: вы также можете использовать графический пользовательский интерфейс Git для выполнения тех же задач, если вам неудобно работать с командной строкой.
Каждая операционная система поставляется с инструментом командной строки:
- Windows: Командную строку (Command Prompt) можно вызвать, нажав клавишу Windows, набрав Command Prompt и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
- OS X: Терминал (Terminal) можно найти в Applications > Utilities.
- Linux: Обычно терминал можно вызвать с помощью Ctrl + Alt + T. Если это не сработает, найдите Terminal в панели приложений или меню.
Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.
Создание репозитория для вашего кода
- Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (New Repository).
- На этой странице в поле «Имя репозитория» (Repository name) введите имя для своего репозитория, например my-repository.
- Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:

- Нажмите «Создать репозиторий» (Create repository); откроется следующая страница:

Загрузка файлов на GitHub
- На текущей странице вас интересует раздел …or push an existing repository from the command line («. или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
git remote add origin https://github.com/chrisdavidmills/my-repository.git
git add --all git commit -m 'adding my files to my repository'
git push -u origin main
Больше информации о GitHub
Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:
git add --all git commit -m 'another commit' git push
Вы можете написать более подходящее сообщение вместо another commit, чтобы уточнить, что именно вы только что изменили.
Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи Git и GitHub.
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Изменение видимости сайта 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
- On GitHub Enterprise Cloud, navigate to your site’s repository.
- 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.»
Инструкция по размещению сайта на GitHub Pages


Инструментарий
Автор Алексей На чтение 4 мин Просмотров 6.7к. Опубликовано 04.12.2021 Обновлено 04.12.2021
Если вы занимаетесь версткой, по сервис GitHub Pages точно для вас, на нем можно бесплатно размещать статические веб-сайты (html/css/js/изображения). Либо вы сверстали себе визитку или портфолио и не хотите заморачиваться с хостингами, то гитхаб тоже для вас тоже может подойти, при определенных условиях, см. ниже на ограничения.
Особенности и ограничения
Сервис Github Pages предоставляет следующие возможности для статических сайтов:
- Использование HTML, CSS, языка разметки Markdown;
- Встраивание изображений и другого медиа;
- Использование JavaScript.
- Нельзя использовать на сайте PHP либо другие серверные языки — от сюда вытекает: если нужны формы например, обратной связи, то их придется создать в каких-нибудь конструкторах типа FormDesigner и затем уже встроить;
- Серверный код и серверные скрипты выполняться не будут;
- Cookies не используются.
Как опубликовать сайт на GitHub Pages по шагам
Шаг 1. Заводим аккаунт или авторизуемся на GitHub
Идем на GitHub. Если есть аккаунт, то авторизуемся в нем нажав на «Sing in». Если аккаунта нет, заводим его нажав на «Sing up».

На открывшейся странице пишем рабочий email и жмем на Continue.

Появиться окно для ввода пароля, вводите его и снова Continue, появиться поле для ввода логина, затем он спрашивает вас: «Хотите получать обновления продуктов и объявления по электронной почте?» Если хотите указываете «y», не хотите «n». После чего останется пройти капчу и нажать на кнопку «Create account».

На указанные email придет код который нужно ввести на открывшейся страницу. На следующей странице нужно указать количество человек компании (если она есть) и кто вы студент или преподаватель.

Затем выбрать продукты которыми хотите пользоваться (выбирайте все — могут потом пригодиться).

И выбираем бесплатный тарифный план.

Все аккаунт создан, теперь нужно создать репозиторий для нашего проекта с вёрсткой.
Шаг 2. Создание репозитория

Чтобы создать репозиторий нажмите на кнопку «Create repository или New repository»

При создании введите название репозитория (например, nzsd), его описание (не обязательно), выберите тип репозитория Public, поставьте галку на против пункта Add a README file и нажмите на кнопку Create repository:
Шаг 3. Загрузка файлов в созданный репозиторий
Загрузите все файлы вашего проекта, нажав на «Add fille» и выберете «Upload files»
на открывшейся странице, прям берем и перетаскиваем все файлы мышкой.
Перетащатся только файлы которые в корне, в моем случае это файл index.html. Директории для изображений, стилей, скриптов, нужно создавать отдельно и затем уже в них загружать файлы. Для этого щелкните по «Add file» и выбираете «Create new file».

Введите название директории и после названия ставим закрывающийся слэщ «/», после чего она превращается в директорию и чтобы ее создать, нужно добавить в нее какой-нибудь файл, пишем к примеру empty и нажмите «Commit new file».

Таким же образом сражу создаем все необходимые директории. Дальше открываем каждую из них и загружаем в них файлы.

Шаг 4. Публикация сайта в интернете
Перейдите в настройки (Settings) созданного репозитория:

В настройках репозитория найдите вкладку Pages, на ней установите в качестве источника файлов вашей страницы ветку main и директорию root (от корня проекта) созданного репозитория и сохраните.

Теперь ваш сайт опубликован и доступен по адресу вида your-account-name.github.io/repo-name.

Для проверки работы сайта просто перейдите по адресу https://your-account-name.github.io/repo-name – и вы увидите свою страницу, загруженную на Github Pages:

Хотите свой домен?
Гитхаб позволяет использовать ваше доменное имя вместо стандартного username.github.io.
Для этого вам нужно купить домен, далее зайти к регистратору доменов в личный кабинет (в моем случае beget). И изменить информацию о DNS-записях домена.
Нам нужно настроить A-запись домена, для этого переходим в панель управления DNS-записями вашего регистратора, и добавим следующие A-записи:
- 185.199.108.153
- 185.199.109.153
- 185.199.110.153
- 185.199.111.153
Добавлять записи для домена желательно и для с www, и для без www.

После этого нужно подождать хотя бы пару часов и можно идти на гитхаб в настройку репозитория, во вкладке Pages (см. шаг 4) в поле Custom domain ввести название домена (с www или без www — в зависимости где меняли A записи) и нажать кнопку Save.

Всё готово! В течение нескольких часов сайт начнет открываться с нового домена.
Все способы подключения собственного домена подробно описаны в памятке GitHub.
