Практикум: сайт на GitHub Pages

Что такое GitHub Pages

GitHub Pages — это бесплатный хостинг статических сайтов прямо из репозитория GitHub: он берёт HTML, CSS и JavaScript из выбранной ветки и показывает их по адресу в интернете. Чтобы опубликовать сайт на GitHub Pages, нужно открыть Settings, затем Pages, выбрать Deploy from a branch, ветку main и папку / (root), после чего нажать Save. В практикуме вы сделаете это для визитки и дальше будете обновлять сайт обычным git push.

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

Что нужно знать заранее (по документации GitHub):

• адрес сайта для проекта имеет вид https://логин.github.io/репозиторий/, у вас это https://alex-ivanov.github.io/portfolio/;
• на бесплатном тарифе репозиторий должен быть публичным;
• главная страница должна называться index.html и лежать на верхнем уровне публикуемой папки; регистр в имени важен;
• после изменений сайт обновляется не мгновенно: документация обещает до 10 минут, обычно быстрее.

Все эти условия у нас уже выполнены: репозиторий portfolio публичный, а index.html лежит в корне.

Задание

Нужно получить работающий сайт и пройти полный цикл обновления. Что должно получиться в конце:

• визитка открывается по адресу https://ваш-логин.github.io/portfolio/;
• в подвале сайта видна новая фраза, добавленная через git push;
• в карточке репозитория на GitHub указана ссылка на сайт, а в README.md она тоже есть;
• история git log --oneline дополнена двумя новыми коммитами.

Шаг 1. Проверьте старт

В папке ~/projects/portfolio убедитесь, что всё отправлено:

$ git status
On branch main
Your branch is up to date with 'origin/main'.

nothing to commit, working tree clean

Если git status показывает ahead или behind, сначала выполните git push или git pull.

Шаг 2. Включите Pages

1. Откройте репозиторий на GitHub и нажмите вкладку Settings (если её не видно, она спрятана в меню с тремя точками).
2. В боковом меню, в разделе Code, planning, and automation, нажмите Pages.
3. В разделе Build and deployment в списке Source выберите Deploy from a branch. (Второй вариант, GitHub Actions, нам не нужен: это отдельная тема.)
4. Откроется список веток. По умолчанию в нём стоит None («ничего»), поэтому выберите ветку main, а в списке папок оставьте / (root).
5. Нажмите Save.

Шаг 3. Дождитесь публикации

Сайт собирается в фоне. На вкладке Actions появится запись о сборке Pages: так GitHub показывает, что публикация идёт. Подробно про Actions (автоматизацию) расскажет отдельный курс, сейчас достаточно знать, что запись есть. Подождите минуту-две, перезагрузите страницу Pages и нажмите Visit site. Если сайт не открылся, подождите ещё: до 10 минут — это нормально.

Откройте https://alex-ivanov.github.io/portfolio/ (со своим логином). Должна открыться ваша визитка с оформлением, с ссылкой «Все проекты» и подвалом.

Шаг 4. Обновите сайт пушем

Теперь самое интересное: сайт живёт в репозитории, поэтому для обновления достаточно закоммитить и отправить. Откройте index.html, найдите строку с <footer> и после имени допишите фразу «Сайт опубликован на GitHub Pages.»:

$ git diff
...
-  <footer><p>&copy; 2026 Алекс Иванов</p></footer>
+  <footer><p>&copy; 2026 Алекс Иванов. Сайт опубликован на GitHub Pages.</p></footer>
$ git commit -am "Дополнить подвал"
[main e74f7d8] Дополнить подвал
 1 file changed, 1 insertion(+), 1 deletion(-)
$ git push
To https://github.com/alex-ivanov/portfolio.git
   71e4ceb..e74f7d8  main -> main

Подождите минуту-две и обновите сайт в браузере с очисткой кеша (Ctrl+F5 на Windows и Linux, Cmd+Shift+R на Mac). Новая фраза должна появиться в подвале.

Шаг 5. Добавьте ссылку на сайт

1. На странице репозитория найдите блок About справа от списка файлов и нажмите значок шестерёнки рядом с ним. В открывшемся окне есть поле для адреса сайта (Website): впишите https://alex-ivanov.github.io/portfolio/ и сохраните. Теперь ссылка видна всем, кто откроет репозиторий.
2. Добавьте ссылку и в README.md: допишите в конец пустую строку и «Сайт: https://alex-ivanov.github.io/portfolio/».
3. Закоммитьте и отправьте: git commit -am "Добавить ссылку на сайт в README", затем git push.

$ git commit -am "Добавить ссылку на сайт в README"
[main 6b82c9b] Добавить ссылку на сайт в README
 1 file changed, 2 insertions(+)
$ git push
To https://github.com/alex-ivanov/portfolio.git
   e74f7d8..6b82c9b  main -> main

Если у вас остался клон portfolio-colleague, выполните в нём git pull, чтобы получить эти коммиты.

Разбор

Что происходило на самом деле. Включив Pages, вы не копировали файлы на какой-то другой сервер: вы сказали GitHub «следи за веткой main и показывай её содержимое как сайт». При каждом git push в эту ветку GitHub заново публикует сайт. Поэтому:

• адрес сайта состоит из логина и имени репозитория;
• опубликовать можно только то, что лежит в выбранной ветке и папке: незакоммиченные и неотправленные правки на сайт не попадут;
• выбирая / (root), вы публикуете корень репозитория. Вариант /docs нужен, если файлы сайта лежат в папке docs.

Шпаргалка модуля

Рабочий день с GitHub выглядит так: git pull, правки, add, commit, git push.

Проверьте себя

• Сайт открывается по адресу https://ваш-логин.github.io/portfolio/.
• В подвале видна фраза «Сайт опубликован на GitHub Pages.».
• git log --oneline содержит коммиты «Дополнить подвал» и «Добавить ссылку на сайт в README», а git status — up to date with 'origin/main'.
• В карточке репозитория на GitHub указан адрес сайта.
• Вы можете объяснить, почему после git push сайт обновляется не мгновенно.

Частые ошибки

На адресе сайта 404

Что видно: страница GitHub с надписью 404. Проверьте по очереди. Во-первых, публикация только началась: подождите (до 10 минут). Во-вторых, Settings, Pages: выбрана ли ветка main, а не None, и нажимали ли вы Save. В-третьих, лежит ли index.html в корне выбранной папки: документация GitHub требует, чтобы файл назывался именно index.html и лежал на верхнем уровне. Если вы выбрали /docs, а файлы лежат в корне, сайта не будет. Разбор 404 в документации.

Сайт открылся без стилей или картинок

На сайте GitHub имена файлов различаются по регистру: Style.css и style.css — разные файлы. На Windows и Mac локально всё может работать, а на Pages нет. Приведите имя файла в соответствие со ссылкой в HTML и сделайте переименование через Git: git mv Style.css style.css, затем коммит и push. Если Git откажется переименовывать только по регистру, сделайте это в два шага через промежуточное имя: git mv Style.css tmp.css, затем git mv tmp.css style.css.

Изменил, закоммитил, а сайт прежний

Проверьте, что вы сделали git push, а не только commit (git status скажет ahead). Затем подождите пару минут и обновите страницу с очисткой кеша.

Private-репозиторий

Если репозиторий приватный, на бесплатном тарифе Pages не заработает: по документации GitHub, при тарифе Free репозиторий должен быть публичным. Видимость меняют в Settings репозитория. Учтите, что после смены видимости может поменяться и адрес сайта.

Справка: создание сайта на GitHub Pages.

Что важно запомнить

• Pages публикует выбранную ветку и папку: Settings, Pages, Deploy from a branch, main, / (root), Save.
• Адрес сайта — https://логин.github.io/репозиторий/; на бесплатном тарифе репозиторий должен быть публичным.
• Обновить сайт — значит закоммитить и отправить: git push. Подождите несколько минут.
• 404: проверьте ветку, папку, имя index.html и регистр имён файлов.

Модуль закончен: у вас есть репозиторий на GitHub, вход по ключу или токену, два клона и живой сайт. Но пока вы работаете один и пишете прямо в main. В следующем модуле мы научимся предлагать изменения через pull request, проверять чужие правки и работать вдвоём, не ломая основной сайт.