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

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

И так, сам об этом сервисе от GitHub я узнал всего несколько месяцев назад. В этом гайде я поделюсь своим опытом использования Pages и тем, как я создавал такую "страницу". Если вам есть что добавить к написанному мной, или по вашему мнению я где-то ошибся, что напишите об этом в комментариях.

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

Также хочу отметить, что в этом гайде я не буду ничего рассказывать про Jekyll — генераторе статичных сайтов. Все потому, что сам я им пока что ни разу не пользовался и не знаю, как это делать. В гайде предполагается, что вы сами можете создать дизайн и наполнение сайта, используя HTML, CSS, JavaScript и может быть что-то еще.

Что такое GitHub Pages? Как я уже написал выше, это сервис от GitHub, который позволяет разместить ваш сайт в интернете, позволив заходить на него другим людям. Другими словами — это хостинг.

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

Кроме того, все глобальные изменения на вашем сайте происходят только после фиксации (commit) изменений в репозитории, а также успешного завершения специального действия, автоматически преобразующего файлы из вашего репозитория в сайт.

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

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

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

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

Еще в качестве примера можете глянуть главную страницу моего сайта.

Это очень важный пункт, в котором нужно кое-что учесть. Как я уже писал, для размещения вашего сайта с помощью 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, то увидите, что там автоматически появилось "действие". Если оно уже выполнилось успешно, то будет зеленый значок, который означает, что ваш сайт стал полноценным сайтом в интернете. Это можно проверить, перейдя по ссылке из этого "действия".

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А еще можете поддержать меня на Bruhsty.

#ogamshit #guide #github #web #githubpages #html #разработка #гайд #сайт #созданиесайта