Содержание
Плакат готов, работает в браузере, анимации крутятся, интерактив откликается. Осталось последнее — превратить папку с файлами в ссылку, которую можно отправить кому угодно. Для этого мы воспользуемся GitHub Pages — бесплатным хостингом, который превращает ваш репозиторий в живой сайт. Никаких серверов, никаких доменов, никакой оплаты. Загрузили файлы — получили ссылку.
Что такое GitHub
GitHub — это платформа для хранения кода. По сути, облачная папка для вашего проекта, которую можно открыть с любого компьютера. Каждый проект на GitHub называется репозиторием. В нашем случае репозиторий — это та самая папка с index.html, css/, js/, img/ и всем остальным, что мы собирали на протяжении учебника.
Профессиональные разработчики работают с GitHub через командную строку и систему контроля версий Git. Это мощный инструмент, но для публикации веб-плаката он не нужен. Мы разберём два простых способа: загрузку через браузер и через приложение GitHub Desktop.
Если у вас ещё нет аккаунта на GitHub, зайдите на github.com и зарегистрируйтесь. Это займёт пару минут.
Загрузка через браузер
Самый быстрый путь загрузить файлы прямо через веб-интерфейс GitHub. Никаких программ, всё в браузере.
Шаг 1. Создайте репозиторий.
На странице GitHub нажмите кнопку «New» (зелёная, в левой панели) или перейдите по адресу github.com/new. В поле «Repository name» введите название проекта на латинице, без пробелов. Например, my-web-poster или clinic-poster. Это название станет частью будущей ссылки. Оставьте репозиторий публичным (Public) и нажмите «Create repository».
Шаг 2. Загрузите файлы.
После создания GitHub покажет пустой репозиторий с несколькими вариантами начала работы. Нажмите ссылку «uploading an existing file». Откроется зона загрузки — перетащите в неё все файлы и папки вашего проекта. Просто выделите содержимое папки проекта в проводнике (Finder на Mac) и перетяните в окно браузера.
Дождитесь загрузки всех файлов. Внизу страницы будет поле «Commit changes» — оставьте сообщение по умолчанию или напишите что-нибудь вроде «первая загрузка». Нажмите зелёную кнопку «Commit changes».
Шаг 3. Проверьте структуру.
После загрузки вы увидите содержимое репозитория. Убедитесь, что index.html лежит в корне, а не внутри вложенной папки. Если вы случайно перетащили саму папку проекта (а не её содержимое), структура будет выглядеть как my-web-poster/index.html вместо просто index.html. GitHub Pages ищет index.html именно в корне репозитория, и если его там нет, сайт не заработает.
GitHub Desktop
Если вы планируете обновлять плакат после первой загрузки, удобнее установить приложение GitHub Desktop. Оно синхронизирует папку на вашем компьютере с репозиторием на GitHub без командной строки.
Шаг 1. Установите и войдите.
Скачайте GitHub Desktop с desktop.github.com, установите и войдите в свой аккаунт GitHub.
Шаг 2. Создайте репозиторий из существующей папки.
Выберите «Add», «Add Existing Repository» и укажите папку вашего проекта. Если GitHub Desktop скажет, что это не репозиторий, нажмите «create a repository» в появившейся подсказке. Заполните имя и нажмите «Create Repository».
Шаг 3. Сделайте коммит и опубликуйте.
В левой панели вы увидите список всех файлов проекта с пометкой «new». Внизу введите краткое описание (например, «первая версия») и нажмите «Commit to main». После этого нажмите «Publish repository» в верхней панели. Убедитесь, что галочка «Keep this code private» снята, иначе GitHub Pages не сможет показать сайт.
Теперь ваш проект на GitHub. Дальнейшие изменения загружаются ещё проще: сохраняете файлы на компьютере → открываете GitHub Desktop, пишете описание ,жмёте «Commit» и жмёте Push origin. Два клика, и обновления на сервере.
Включаем GitHub Pages
Файлы на GitHub, но пока это просто хранилище кода. Чтобы превратить репозиторий в работающий сайт, нужно включить GitHub Pages.
Шаг 1. Откройте репозиторий на github.com. Перейдите во вкладку «Settings» (шестерёнка в верхней панели репозитория).
Шаг 2. В левом боковом меню найдите раздел «Pages».
Шаг 3. В секции «Source» выберите ветку «main» и папку «/ (root)». Нажмите «Save».
Шаг 4. Подождите одну-две минуты. Обновите страницу. Вверху появится зелёная плашка с вашей ссылкой: https://ваш-логин.github.io/название-репозитория/
Это и есть адрес вашего веб-плаката. Откройте его в браузере — вы увидите свой index.html, работающий как полноценный сайт.
Типичные проблемы
Cтраница пустая или 404. Проверьте, что index.html лежит в корне репозитория. Если он внутри вложенной папки, GitHub Pages его не найдёт.
Картинки не загружаются. Проверьте пути в HTML и CSS. Они должны быть относительными: img/background.webp, а не C:/Users/student/project/img/background.webp или /img/background.webp. Путь начинается без слеша и без буквы диска.
Шрифты не отображаются. Если вы подключаете шрифты локально через @font-face, убедитесь, что путь ../fonts/MyFont.woff2 правильный и файлы шрифтов действительно загружены в репозиторий. Если используете Google Fonts через — шрифты загрузятся автоматически, пока есть интернет.
CSS или JS не работают. Проверьте пути подключения в index.html. Частая ошибка — лишний слеш в начале: href="/css/style.css" не сработает на GitHub Pages. Правильно: href="css/style.css".
Обновления не видны. GitHub Pages кэширует старую версию. Попробуйте открыть ссылку в приватном окне браузера (Ctrl+Shift+N / Cmd+Shift+N) или добавьте ?v=2 в конец ссылки, чтобы обойти кэш.
Перед загрузкой на GitHub откройте свой index.html прямо с диска (двойным кликом по файлу) и убедитесь, что всё работает локально. Если плакат не работает на вашем компьютере, он не заработает и на GitHub Pages. Проблема всегда в коде или путях, а не в хостинге.
README файл
Когда репозиторий опубликован, добавьте файл README.md — он отображается на главной странице вашего репозитория и служит визитной карточкой проекта.
Создайте файл прямо на GitHub: нажмите «Add file» → «Create new file», назовите его README.md и добавьте несколько строк:
Ссылка на живой плакат в README — это самое важное. Любой, кто откроет ваш репозиторий преподаватель, потенциальный работодатель, другой студент сможет сразу перейти к результату, не разбираясь в файлах.
