Как опубликовать сайт прямо на GitHub

Вы можете опубликовать свой сайт прямо на GitHub.

Время чтения: меньше 5 мин

Задача

Скопировано

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

Готовое решение

Скопировано

На GitHub для этого есть специальный инструмент — GitHub Pages. С помощью него публикуют сайты, используя в качестве хостинга сам сервис. Есть два способа использования этого инструмента:

  1. Собранный сайт помещается в отдельную папку в выбранной ветке репозитория, GitHub просто отображает эту папку как корневую для сайта. Такой подход используют для показа уже собранного статического сайта в виде набора файлов в форматах, которые отображаются в браузере напрямую.
  2. Статический сайт сначала собирается с помощью средств автоматизации GitHub Actions и публикуется также как в первом случае.

Про GitHub Actions можете почитать в статье «GitHub Actions».

Второй способ не будем рассматривать, так как он находится на этапе бета-тестирования. В этом режиме можно выбрать уже готовые решения, например, GitHub Pages Jekyll и Static HTML, а можно настроить свой воркфлоу.

Работа GitHub Pages с помощью GitHub Actions.

Рассмотрим подробно первый способ.

На странице с настройками своего профиля откройте вкладку «Settings» и выберите в боковой навигации пункт «Pages» из раздела «Code and automation».

Настройки профиля и опция GitHub Pages.

В развернувшемся содержимом вкладки найдите раздел с заголовком «Build and deployment». Раскройте выпадающий список «Source» рядом с заголовком и выберите способ «Deploy from a branch».

Выбор способа работы GitHub Pages.

В пункте «Branch» в содержимом той же вкладки выберите нужную ветку репозитория. Для этого введите её название в поле с подписью «Select brunch» или выберите одну из веток в выпадающем списке к полю. Затем выберите нужную папку с сайтом. Для этого нужно раскрыть соседний выпадающий список. Наконец, нажмите кнопку «Save».

Выбор ветки для публикации сайта. Выбор папки для публикации.

Теперь инструмент GitHub Pages стал активным. По соответствующему адресу <имя пользователя>.github.io/<имя репозитория> через несколько минут станет доступным статический сайт из выбранной папки.