Гайд Как бесплатно разместить свой сайт в интернете на GitHub

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

Нажмите, чтобы раскрыть...

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

Предисловие​

Что такое GitHub Pages? Как я уже написал выше, это сервис от GitHub, который позволяет разместить ваш сайт в интернете, позволив заходить на него другим людям. Другими словами — это хостинг.
Однако все не просто так. Ваш сайт на GitHub Pages создается из вашего специального репозитория, который должен быть публичным (то есть все ресурсы проекта будут видны другим пользователям)и иметь специальное имя (какое — будет описано далее). Такой репозиторий может быть всего один на одном аккаунте GitHub.
Кроме того, все глобальные изменения на вашем сайте происходят только после фиксации (commit) изменений в репозитории, а также успешного завершения специального действия, автоматически преобразующего файлы из вашего репозитория в сайт.
А теперь давайте узнаем, как же создать нужный нам репозиторий для нашего сайта.

1) Создание аккаунта GitHub​

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

2) Проект для репозитория​

Теперь нам нужен какой-то проект. Для гайда я создам простой HTML-файл в . На деле же на GitHub Pages можно размещать и куда более сложные проекты.



Ничего необычного


Так выглядит созданная html-страница в браузере

3) Размещение репозитория для сайта​

Это очень важный пункт, в котором нужно кое-что учесть. Как я уже писал, для размещения вашего сайта с помощью GitHub Pages в интернете нужно создать репозиторий в GitHub со специальным именем.
Имя репозитория должно состоять из вашего никнейма, после которого через точку добавляется "github.io". То есть должно быть как-то так: "username.github.io", где username — ваш никнейм.
В моем случае названием для репозитория будет "necompotik.github.io". И теперь нужно создать публичный (не перепутайте)репозиторий с таким именем. И как я тоже уже писал есть разные способы его создать, я же опишу свой.
Итак, нажимаем "Опубликовать в GitHub". Если вы не авторизованы в VS Code с помощью GitHub, то после этого появится окно, где нужно нажать "Разрешить".


Авторизация

Нас перекинет в браузер, где нужно авторизоваться через GitHub, нажав зеленую кнопку.

Нажимаем зеленую кнопку

А теперь внимательно: вернувшись в VS Code, в строке выполнения публикации репозитория нужно предварительно написать получившееся специальное название репозитория (у меня это — necompotik.github.io), а затем выбрать вариант с публичным репозиторием.


Не забудьте написать специальное название и выбрать публичный репозиторий

Все, ваш проект должен был загрузиться в удаленный репозиторий на GitHub.
После этого, если вы зайдете в репозиторий на GitHub и перейдете во вкладку Actions, то увидите, что там автоматически появилось "действие". Если оно уже выполнилось успешно, то будет зеленый значок, который означает, что ваш сайт стал полноценным сайтом в интернете. Это можно проверить, перейдя по ссылке из этого "действия".

В моем случае адрес такой: . Можете перейти по нему, и увидите страницу, которую я и создавал.


Примерно так все должно быть

В случае, если вы сначала создали пустой репозиторий, то можно сделать следующим образом: во вкладке Actions у вас будет выбор различных вариантов стандартных "действий". Можете выбрать подходящий вам, но я выбрал Static HTML.



После этого нужно зафиксировать изменение, а точнее добавление этого действия, нажав кнопку "Commit changes...".



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



Ну а теперь просто дожидаемся завершения действия и все.



Наш сайт готов!

4) Внесение изменений​

Но это еще не все. Что если мы хотим внести какие-то изменения? Давайте рассмотрим такой вариант и добавим в проект файл со стилем.


Получилось как-то так

После внесения изменений, фиксируем их! Но обязательно напишите название для фиксации изменения.


Не забудьте про название

А теперь синхронизируем изменение.



Теперь возвращаемся к нашему действию на GitHub во вкладке Actions. В нем уже должно было запуститься (или уже выполниться) новое действие, аналогичное прошлому, которое генерирует веб-страницу нашего сайта.



Если же это по каким-то причинам не произошло, то можно сделать это вручную. Переходим в действие и кнопку рядом с "build".



Перезапускаем действие нажатием кнопки "Re-run jobs" и дожидаемся окончания.



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

Годно! Халява всегда приятно)) Спасибо!

полезная инфа, надо обязательно попробовать!

Интересный подход, но по моему слишком замудренный

Спасибо большое, пытался искать в ютубе, там одна вода, тут всё чётко и ясно

спасибо за гайд, просто и понятно

если используете генератор сайта вроде hugo, можете найти его на странице выбора github actions

Крайне полезно! Спасибо, отличный и понятный гайд по GitHub Pages

О, на гитхабе норм тема

Удобная штука, полезно чтобы разместить страничку со статическими данными. Жаль что нет возможности какой-то бекенд запустить.

Удобно и понятно, спасибо большое

Очень подробно и доходчиво

Если есть какие то секретные данные по типу токена. закидывайте в .env и прописывайте его в gitignore

Спасибо, для статики (чисто фронт, без бэка) самое то

Как я понял можно ток фронт заливать(
А если vps покупать, то туда же и фронт и бек можно залить, такое себе

Спасибо большое автору за инструкцию!