Блог

Гайд по GitHub Pages: как сделать и разместить сайт на хостинге GitHub

GitHub — это популярная веб-платформа для публикации IT-проектов в интернете, совместной работы и т. д. В 2022 году на неё выложили более 3,5 млрд материалов. Для размещения кода в интернете разработчики добавили GitHub Pages. С их помощью программисты создают сайты для расположения рабочих проектов, портфолио и др. При этом любой пользователь может получить к ним доступ и использовать готовые наработки для обучения или других задач.

В этой статье рассмотрим, как разместить сайт на Github Pages, варианты использования платформы и типы ресурсов, которые можно на ней создавать.

Что такое GitHub Pages

GitHub — онлайн-сервис для размещения репозиториев Git и совместной работы над программным обеспечением. Он предлагает несколько инструментов для обмена информацией и отслеживания изменений кода, управления проектами.

Не путайте Git и GitHub! GitHub — это служба хостинга, которая обеспечивает совместную работу IT-специалистов в интернете. А Git — локальное программное обеспечение для контроля версий, которое используют для хранения нескольких вариантов проекта на компьютере.

GitHub Pages — одна из лучших возможностей GitHub. Сервис позволяет размещать статические веб-страницы прямо из репозитория GitHub. Это означает, что вы можете использовать свой репозиторий для хранения кода и файлов веб-ресурса. GitHub автоматически опубликует их как интернет-сайт, к которому можно получить онлайн-доступ.

Существует три типа сайтов GitHub Pages:

• Проект. Он подключён к определённому публичному репозиторию, который размещён на GitHub (к примеру, библиотека JavaScript или коллекция рецептов).

• Пользователь.

• Организация.

Последние два вида сайтов подключают к учётным записям на GitHub.com.

Чтобы опубликовать сайт пользователя, необходимо создать репозиторий, привязанный к личной учётной записи с именем <username>.github.io. Для размещения веб-ресурса компании — репозиторий, принадлежащий организации с именем <organization>.github.io. Если вы не используете персональный домен, страницы пользователей и организаций доступны по адресу http(s)://<username>.github.io или http(s)://<organization>.github.io.

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

• http(s)://<username>.github.io/<repository>;

• http(s)://<organization>.github.io/<repository>.

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

Плюсы и минусы GitHub Pages

Размещение на GitHubPages — распространённая практика в IT-компаниях и среди фрилансеров. Благодаря хостинг-сервису можно упростить совместную работу, создать портфолио из рабочих файлов и так далее.

Преимущества GitHub Pages:

• Бесплатно. Частные пользователи могут создавать сайты без покупки расширенной подписки.

• Быстрая и простая реализация. Благодаря поддержке статического HTML, а не CMS или сложных серверных решений создание нового сайта и структуры не займёт много времени. Обмен данными будет осуществляться только между хостингом и пользовательским устройством. Базы данных и тому подобное при статистическом HTML не нужны.

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

Главный недостаток сервиса GitHub Pages вытекает из его же преимущества — статического веб-сайта. Отсутствие динамики накладывает на проект ряд ограничений:

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

• Приходится создавать новый сайт при изменении контента.

• Нет динамической функциональности.

Кроме того, в GitHub нельзя создавать сайты для коммерческих проектов, например площадок e-commerce.

Другие ограничения:

• Рекомендуемый объём репозиториев исходных текстов составляет 1 ГБ.

• Максимальный размер опубликованных сайтов не превышает 1 ГБ.

• Сайты имеют лимит по пропускной способности в 100 ГБ в месяц.

• Для сайтов установлено ограничение в 10 сборок в час.

Как разместить сайт на GitHub Pages

Разберём, как создавать и публиковать сайты на GHB. Пошаговая инструкция:

1. Создайте репозиторий GitHub

Войдите в свою учётную запись GitHub и создайте новый общедоступный репозиторий с любым названием, желательно отражающим суть проекта.

Если компания хочет ограничить доступ к проекту, то стоит кликнуть на кнопку Private. Тогда пользователи смогут открыть репозиторий только после разрешения.

2. Превратите репозиторий в сайт

Чтобы опубликовать программный код в сети, преобразовываем репозиторий в сайт с уникальным адресом. Открываем проект и переходим в настройки.

В меню слева нажимаем на кнопку Pages и переходим к Branch. Если это сайт пользователя или компании, то выбираем ветку Main. Если организация работает над множеством проектов в одном репозитории, нужно создать несколько веток для них. Это покажет сайту, откуда именно брать информацию. Нажимаем на Save. В течение нескольких минут на странице появится ссылка, ведущая на веб-ресурс. Если ничего не произошло, обновите страницу. Готово — ваш сайт доступен по адресу "your_nickname.github.io/your_repository_name".

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

3. Сделайте сайт красивым

Если вы не понимаете в веб-дизайне и сложной разметке, то стоит использовать бесплатные темы от Jekyll. Текст можно оформить с помощью Markdown — облегчённого языка разметки. Он создан для форматирования текстовых документов, с максимальным сохранением читаемости, и подходит для преобразования в языки HTML, Rich Text и другие.

Инструкция, как сделать интерфейс красивым:

1. Заходим на страницу поддерживаемых тем GitHub и выбираем подходящий вариант. В нашем случае использован стиль Cayman. С ним сайт выглядит современно и при этом не перегружен деталями.

2. В документе Readme копируем строку remote_theme: название_темы.

3. Открываем репозиторий ресурса и создаём новый документ ​​_config.yml. Для этого нужно кликнуть на Add file, а затем на кнопку Create new file.

4. Вставляем взятую из ReadMe строку и сохраняем документ.

Через несколько секунд сервис изменит оформление. Сайт уже выглядит неплохо, но всё ещё пустой. Остаётся добавить текст и другую информацию. Важно: при использовании Jekyll для наполнения страницы необходимо освоить разметку Markdown. Она простая, так что проблем с изучением не будет. Разметку подробно описали разработчики Microsoft. Разберём пару примеров:

• Выделение жирным — *текст*.

• Заголовок первого уровня — #текст#, второго — ##текст## и т. д.

Кейс Exolve

К нашей платформе подключилась компания, которая занимается созданием статических веб-ресурсов и развёртывает их на GitHub Pages. При разработке изменения вносятся чаще, а перезапуск сборки возможен только раз в 10 минут. Для упрощения работы с сайтами компания подключила МТС Exolve. Сервис автоматически отправляет SMS с кратким текстом «Ошибка в сборке, (код ошибки)».

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

Результаты:

• создание сайта занимает на 20 минут меньше

• сбои решаются быстрее на 50%

• количество обращений в техподдержку сократилось на 40%

Заключение

GitHub Pages — бесплатный, а главное, удобный хостинг для размещения лендингов, резюме и портфолио. С его помощью компании могут организовать совместную работу, а профессионалы — поделиться опытом. Чтобы собрать свой сайт, не нужно обладать глубокими познаниями в веб-разработке. Достаточно завести учётную запись Github и создать репозиторий.