Публикация на GitHub Pages

Что такое GitHub Pages

Файлы сайта ADC Hub загружены на GitHub. Репозиторий создан, код сохранён, история версий ведётся. Но сайт пока не доступен в интернете. Откройте репозиторий на GitHub, видите файлы, но это не рабочий сайт. Это как книга на складе издательства, напечатана, но люди её ещё не читают.

Чтобы сайт заработал в интернете, нужен хостинг. Место, где файлы лежат на сервере круглосуточно, доступны всем. Обычно хостинг платный, но GitHub предлагает бесплатный хостинг для статичных сайтов. Называется GitHub Pages.

GitHub Pages это сервис, который превращает репозиторий в работающий сайт. Нажимаете кнопку, GitHub берёт ваши HTML, CSS, JavaScript, запускает сервер, даёт адрес. Всё бесплатно, без ограничений по трафику. Идеально для портфолио, документации, учебных проектов, таких как ADC Hub.

Включение GitHub Pages

Включим GitHub Pages для репозитория. Откройте репозиторий на GitHub в браузере. Видите вкладки Code, Issues, Pull requests? Справа есть вкладка Settings, настройки. Кликните на неё.

Откроется страница настроек. Слева длинное меню с разделами. Прокрутите вниз. Найдите раздел Pages. Кликните на него. Откроется страница настроек GitHub Pages.

Видите блок «Build and deployment», сборка и развёртывание? Внутри выпадающий список «Source», источник. По умолчанию там «None», ничего. Это значит GitHub Pages выключен. Нажмите на список. Откроются варианты.

Настройка источника публикации

Выберите «Deploy from a branch», развернуть из ветки. Ниже появится ещё один список «Branch», ветка. Выберите «main» или «master», в зависимости от того, как называется главная ветка репозитория. Обычно это main.

Справа от списка веток есть второй список с папками. Там два варианта: / (root) и /docs. Выберите / (root), это корень репозитория. GitHub Pages будет искать index.html в корне.

Нажмите кнопку Save, сохранить. Настройки применятся. Страница обновится. Вверху появится сообщение: «Your site is live at https://username.github.io/adc-hub». Это адрес вашего сайта.

Ожидание публикации

Но сайт ещё не готов. GitHub Pages нужно время, чтобы собрать сайт. Обычно 1-3 минуты. Подождите. Обновите страницу. Сообщение изменится: «Your site is ready to be published at…» станет «Your site is published at…».

Скопируйте ссылку. Откройте в новой вкладке. Видите сайт? Заголовок «ИСТОРИЯ ADC HUB», параграфы, стили, всё работает. Сайт живой, в интернете, доступен всем. Отправьте ссылку другу, он увидит то же самое.

Автоматическое обновление

Теперь при каждом изменении файлов сайт обновится автоматически. Изменили цвет заголовка в style.css? Сделали коммит, отправили на GitHub. Через минуту изменения появятся на сайте. GitHub Pages следит за репозиторием и пересобирает сайт при каждом коммите в ветку main.

Адрес сайта выглядит так: https://username.github.io/repository-name/. Если репозиторий называется adc-hub, адрес https://username.github.io/adc-hub/. Если хотите короткий адрес без названия репозитория, создайте репозиторий с именем username.github.io. Тогда адрес будет просто https://username.github.io/.

Обновление ссылок

Теперь давайте изменим ссылки на наш новый сайт:

Заключение

Вы прошли путь от пустого экрана до работающего сайта в интернете, и это немалое достижение. Многие начинают учить веб-разработку и бросают на первых шагах, но вы дошли до конца: создали структуру через HTML, оформили через CSS, добавили интерактивность через JavaScript, подключили аналитику и опубликовали на GitHub Pages. Сайт ADC Hub теперь живёт по адресу в интернете, доступен всем, и это ваша работа. Помните: это только начало, веб-разработка огромная область, но вы освоили фундамент, на котором строится всё остальное. Пишите код каждый день, создавайте свои проекты, не бойтесь ошибок, участвуйте в сообществах, учите английский и документируйте свой путь. Возможно, веб-разработка станет вашей профессией, возможно хобби, а может быть, вы создадите стартап или просто сделаете сайт для семейного бизнеса. Спасибо, что прошли этот курс, надеюсь, вы не просто читали, а делали, пробовали, экспериментировали. Удачи в дальнейшем обучении, пишите код, создавайте сайты, решайте проблемы — интернет ждёт ваших идей, и у вас теперь есть всё, чтобы их реализовать.