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 и другие.
Инструкция, как сделать интерфейс красивым:
Через несколько секунд сервис изменит оформление. Сайт уже выглядит неплохо, но всё ещё пустой. Остаётся добавить текст и другую информацию. Важно: при использовании Jekyll для наполнения страницы необходимо освоить разметку Markdown. Она простая, так что проблем с изучением не будет. Разметку подробно описали разработчики Microsoft. Разберём пару примеров:
-
Выделение жирным — *текст*.
-
Заголовок первого уровня — #текст#, второго — ##текст## и т. д.
Кейс Exolve
К нашей платформе подключилась компания, которая занимается созданием статических веб-ресурсов и развёртывает их на GitHub Pages. При разработке изменения вносятся чаще, а перезапуск сборки возможен только раз в 10 минут. Для упрощения работы с сайтами компания подключила МТС Exolve. Сервис автоматически отправляет SMS с кратким текстом «Ошибка в сборке, (код ошибки)».
Частичная автоматизация упростила работу, поскольку ошибки стали обнаруживаться практически мгновенно.
Результаты:
-
создание сайта занимает на 20 минут меньше
-
сбои решаются быстрее на 50%
-
количество обращений в техподдержку сократилось на 40%
Заключение
GitHub Pages — бесплатный, а главное, удобный хостинг для размещения лендингов, резюме и портфолио. С его помощью компании могут организовать совместную работу, а профессионалы — поделиться опытом. Чтобы собрать свой сайт, не нужно обладать глубокими познаниями в веб-разработке. Достаточно завести учётную запись Github и создать репозиторий.