Лабораторная работа № 5 · после лекции № 6

Опубликуйте страницу на своём поддомене

Создайте простую страницу, опубликуйте её через GitHub Pages и предложите DNS-запись через pull request.

Работа выполняется индивидуально. Всё необходимое можно сделать в браузере: терминал, Git Bash, curl и dig не требуются. Оформление сайта и знание сложной вёрстки не оцениваются.

Перейти к шагам

Цель работы

Проследить путь от файла до страницы в браузере

Вы разместите HTML-файл в GitHub, включите GitHub Pages, предложите имя в учебной DNS-зоне и проверите страницу по этому адресу. Так вы увидите, как связаны репозиторий, публикация, DNS и HTTP.

  1. 01 · ФАЙЛРепозиторий GitHub
  2. 02 · ПУБЛИКАЦИЯGitHub Pages
  3. 03 · ИМЯЗаявка на CNAME
  4. 04 · DNSПоддомен ведёт к GitHub
  5. 05 · HTTPБраузер получает страницу

Перед началом

Подготовьте учётную запись GitHub

Безопасность. Не публикуйте пароли, токены, личный телефон, адрес электронной почты и другие сведения, не нужные для страницы. Не вводите учётные данные GitHub в сторонние формы.

Порядок работы

Выполните шаги по порядку

1. Создайте публичный репозиторий для сайта

На GitHub нажмите New repository, задайте имя, выберите видимость Public и создайте репозиторий. Например, можно назвать его my-first-page. В этом примере репозиторий пустой: так проще найти ссылку для первого файла.

Форма GitHub для создания публичного репозитория
Форма создания репозитория. Проверьте имя и отметку Public перед созданием.
Новый пустой репозиторий и ссылка creating a new file
Пустой репозиторий. Ссылка creating a new file откроет редактор файла прямо на GitHub.

2. Добавьте файл index.html

Нажмите creating a new file. Если при создании репозитория вы добавили README, используйте Add file → Create new file. Назовите файл index.html, затем вставьте простой HTML, например:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <title>Моя учебная страница</title>
</head>
<body>
  <h1>Привет!</h1>
  <p>Эта страница опубликована через GitHub Pages.</p>
</body>
</html>
Редактор GitHub с файлом index.html
Редактор файла. Достаточно заголовка и нескольких строк текста.

Нажмите Commit changes…, оставьте коммит в ветке main и подтвердите сохранение. Проверьте, что файл появился в репозитории.

Окно подтверждения коммита index.html
Сохранение файла. Commit записывает изменение в историю репозитория.
Список файлов репозитория с добавленным index.html
Результат коммита. В корне репозитория появился index.html.

Не размещайте на странице данные, которые не готовы показать всем. Вы можете использовать свой текст или разрешённый генератор; сложный дизайн не нужен.

3. Включите GitHub Pages

Откройте Settings → Pages. В разделе Build and deployment выберите Deploy from a branch, ветку main и папку /(root), затем нажмите Save.

В настройках GitHub Pages выбраны main и корневая папка
Источник публикации. Здесь выбраны ветка main и корень репозитория.
Настройки GitHub Pages после сохранения источника
Настройки сохранены. Первое развёртывание может занять несколько минут.

4. Проверьте исходный адрес страницы

Когда GitHub Pages закончит публикацию, откройте адрес вида https://<ваш-логин>.github.io/<имя-репозитория>/. На странице должен отображаться текст из index.html. Это исходный адрес сайта; он не зависит от учебного поддомена.

Опубликованная учебная страница по исходному адресу GitHub Pages
Страница опубликована. Откройте собственный адрес Pages и убедитесь, что видите свой текст.

5. Выберите имя учебного поддомена

Предпочтительный формат — imya-familiya.softdevtools.ru, например ivan-primerov.softdevtools.ru. До суффикса .softdevtools.ru используйте строчные латинские буквы, цифры и дефисы. Дефис не должен стоять в начале или конце; длина имени — не более 47 символов.

Настоящие имя и фамилию указывать не обязательно. Если имя занято, предложите вариант с числом, например ivan-primerov-2, или согласуйте псевдоним с преподавателем. До принятия PR имя ещё не закреплено.

6. Откройте свой fork DNS-репозитория

Откройте исходный репозиторий DNS-заявок и нажмите Fork. На странице созданной копии проверьте, что в адресе указан ваш логин и написано forked from denrad/softdevtools-dns. Работайте в своём fork, а не в исходном репозитории преподавателя.

Кнопка Fork в репозитории DNS-заявок
Кнопка Fork. Она создаёт копию репозитория в вашей учётной записи.
DNS-репозиторий в учётной записи пользователя
Ваш fork. Если копия уже есть, откройте её. Если GitHub сообщает, что она отстаёт, выберите Sync fork → Update branch.

7. Создайте файл DNS-заявки

В своём fork откройте папку records/, нажмите Add file → Create new file и назовите файл по выбранному имени, например ivan-primerov.yaml.

Папка records в DNS-репозитории
Папка records. Заявки хранятся в отдельных YAML-файлах.
Меню добавления нового файла в GitHub
Создание файла. Выберите пункт Create new file.

Заполните поля своими значениями:

subdomain: ivan-primerov
type: CNAME
target: denrad-dev.github.io
repository: https://github.com/denrad-dev/lab05-pages-walkthrough
  • subdomain — часть адреса до .softdevtools.ru; она же используется в имени файла.
  • type — оставьте CNAME.
  • target — <ваш-логин>.github.io, без https:// и без имени репозитория.
  • repository — полный URL вашего публичного репозитория со страницей.

Замените в примере логин и имя репозитория на свои. Значения target и repository должны относиться к одной учётной записи.

Заполненный пример YAML-файла DNS-заявки
Файл заявки. Сверьте имя файла и значение subdomain; подставьте собственный GitHub-логин и URL репозитория.

8. Сохраните заявку в своём fork

Нажмите Commit changes…. В этом сценарии оставьте выбранным Commit directly to the main branch своего fork и подтвердите коммит. Изменение должно содержать только ваш новый файл records/*.yaml.

Окно GitHub для коммита DNS-заявки прямо в main своего fork
Коммит в своём fork. Убедитесь, что выбран ваш репозиторий и ветка main.
DNS-заявка появилась в fork после коммита
Заявка сохранена. Новый YAML-файл находится в папке records/.

9. Создайте pull request

На странице своего fork нажмите Contribute → Open pull request. Проверьте направление: base repository — denrad/softdevtools-dns, ветка main; head repository — ваш fork, ветка main. В изменениях должен быть только ваш YAML-файл.

Экран GitHub compare с исходным DNS-репозиторием и fork
Направление PR. Слева — исходный репозиторий преподавателя, справа — ваш fork.

Укажите понятное название. В описании можно оставить ссылку на опубликованную страницу и написать, что изменено. Нажмите Create pull request. Студент не принимает PR самостоятельно: решение принимает преподаватель.

Созданный pull request с DNS-заявкой
Pull request открыт. Сохраните его ссылку, чтобы вернуться к проверкам и обратной связи.
В списке Files changed показан один файл DNS-заявки
Проверьте изменения. Во вкладке Files changed должен быть только ваш новый файл заявки.

10. Посмотрите автоматическую проверку

Откройте вкладку Checks в PR. Проверка заявки называется validate-student-request. Успешный результат означает, что формат YAML прошёл проверку; он ещё не подтверждает создание DNS-записи или доступность страницы.

Успешно завершилась автоматическая проверка DNS-заявки в pull request
Проверка прошла. Другие проверки могут отображаться как Skipped — смотрите на результат validate-student-request.

Если проверка не прошла, откройте сообщение об ошибке и исправьте файл в своём fork. Изменение появится в том же PR, новый PR создавать не нужно. При первом запуске GitHub может попросить преподавателя разрешить workflow — дождитесь решения.

11. Укажите поддомен в настройках GitHub Pages

Вернитесь в репозиторий сайта и откройте Settings → Pages → Custom domain. Введите полный адрес, например ivan-primerov.softdevtools.ru, и нажмите Save. Это нужно сделать до принятия PR преподавателем и появления DNS-записи. Проверьте, что полное имя сохранилось в настройках Pages.

В поле Custom domain настроек Pages введён учебный поддомен
Поле Custom domain. Введите то же имя, которое указано в YAML-заявке.

Ожидаемый результат сейчас. Пока PR не принят и DNS-запись не появилась, GitHub может показать DNS Check in Progress или DNS check unsuccessful / InvalidDNSError. Такое сообщение само по себе не означает ошибку в заявке: GitHub ещё не находит запись. Не удаляйте сохранённый домен из Pages и продолжайте работу с PR. Флажок Enforce HTTPS может пока быть недоступен.

GitHub Pages пока не находит DNS-запись, HTTPS ещё недоступен
Ожидание DNS. Такой статус до принятия заявки не означает, что вы неправильно настроили Pages.

12. После решения преподавателя проверьте адрес

Следите за PR и ответьте на замечания, если они появятся. После принятия PR автоматизация публикует CNAME-запись. Вернитесь в Settings → Pages и повторно посмотрите результат проверки DNS. Когда запись появится, откройте http://<ваш-поддомен>.softdevtools.ru/ и проверьте, что загрузилась ваша страница.

Ожидание может занять время. Сначала может появиться DNS-запись, затем GitHub сопоставит домен с сайтом. Если страница пока не открылась, отправьте преподавателю ссылку на PR и репозиторий сайта. Не создавайте повторную DNS-заявку.

На занятии достаточно проверить страницу по HTTP. Позже откройте обычный HTTPS-адрес с проверкой сертификата. Когда он работает без предупреждения браузера, в настройках Pages можно включить Enforce HTTPS. Не обходите предупреждение о сертификате ради отметки о готовом HTTPS.

Что предъявить

Покажите результат и объясните цепочку

ФИО и номер группы не добавляйте в публичный DNS-файл, описание PR или страницу. Способ связать работу с учебной группой преподаватель сообщит отдельно.

Работа считается технически завершённой, когда страница опубликована через GitHub Pages, PR принят, поддомен открывает именно эту страницу, а вы можете объяснить путь запроса. Если DNS или HTTPS ещё ожидаются по внешним причинам, сообщите об этом преподавателю: подтверждённые этапы сохраняются и проверяются отдельно.