Публикуем HTML-сайт на GitHub Pages: подробный гайд для новичков

В прошлый раз мы познакомились с сервисом статического хостинга GitHub Pages, предназначенным для бесплатного размещения простых сайтов на базе HTML и CSS. Это была теория, сегодня же мы перейдем к практике: зарегистрируемся на GitHub, создадим репозиторий и разместим в нем файлы нашего сайта. Для тестирования мы заранее сверстали простой HTML-шаблон: вы можете поступить так же или скачать готовый шаблон из открытых источников в интернете.

Создание аккаунта GitHub Pages

Зарегистрироваться на GitHub можно с помощью email и пароля либо через профиль Google или Apple — выбирайте удобный вариант.

Далее следуйте инструкции:

1. Нажмите кнопку «Create repository» слева или значок «Plus» на верхней панели и выберите пункт «New repository».

2. В поле «Repository name» укажите имя вашего сайта в формате имя_пользователя.github.io. Используйте только строчные буквы.
3. В разделе «Configuration» для параметра «Choose visibility» выберите «Public», для «Add README» — включите ON. Остальные параметры можно оставить по умолчанию.
4. Нажмите «Create repository».

Репозиторий создан, теперь можно приступать к загрузке в него файлов сайта. Для этого выберите в меню «Add files» опцию «Upload files», а затем перетащите файлы сайта на поле загрузки и нажмите «Commit changes».

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

Перейдите в раздел «Settings» и откройте пункт «Pages».

В подразделе «Branch» выберите ветку и каталог.

По умолчанию это main и /root.

Сохраните настройки кнопкой «Save».

Примерно через 2–3 минуты в разделе Settings → Pages появится блок «Your site is live at» с адресом сайта и кнопкой «Visit site».

Нажмите ее — сайт откроется в новой вкладке.

Если вы увидите страницу 404, не беспокойтесь: серверу нужно время, чтобы обработать файлы.

Обычно это занимает не более пяти минут.

Что делать с составным URL-адресом сайта

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

В противном случае адрес сайта будет выглядеть как «сшитый» из двух разных URL.

Например, мы дали владельцу имя tweakstips2020-alt, а репозиторию — kompick.github.io.

Правильное же имя репозитория — tweakstips2020-alt.github.io.

В результате адрес сайта стал выглядеть следующим образом:

https://tweakstips2020-alt.github.io/kompick.github.io/

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

Еще лучше — задать подходящее имя аккаунта сразу при регистрации.

Впрочем, изменить его можно и позже в основных настройках профиля: «Settings» → «Account» → «Change username».

Что дальше?

После загрузки файлов сайта и проверки его работы можно приступать к наполнению, используя index.html как шаблон для создания других страниц.

Структура ссылок на сайте будет повторять структуру папок.

Например, файл /about/contact.html будет доступен по адресу: https://<репозиторий>/about/contact.html.

С файлами сайта можно работать локально или прямо на GitHub.

Все изменения вносятся в разделе «Code»: открываем файл в репозитории, жмем «✎», вносим правки и сохраняем их кнопкой «Commit changes».

Это не так удобно, как при работе с CMS, но такова цена за пользование бесплатным хостингом.

Что лучше: использовать готовые шаблоны или GitHub Actions

Мы рассмотрели только один способ размещения сайта — загрузку готовых файлов.

Существует и другой путь — использование генераторов статических сайтов. Какой способ выбрать — решать вам, но мы советуем начинать с HTML-шаблонов.

Этот вариант не только проще и быстрее, но и дает больший контроль над сайтом, при условии, что вы не поленитесь получить хотя бы общие представления о HTML и CSS.

На самом деле понимание матчасти очень важно: этого вам придется только на пайплайн-конструктор, который может не учесть всех ваших пожеланий. Кроме того, количество тем для Jekyll и подобных генераторов ограничено, и чтобы сделать сайт по-настоящему уникальным, вам всё равно придется лезть под капот.