Выкладываем свой сайт: GitHub Pages, Vercel или российский хостинг

Выкладка сайта — перенос его файлов на хостинг, который отдаёт их всем, например GitHub Pages или Vercel, и привязка своего домена с HTTPS.

От файлов до адреса

У вас есть сайт: файлы в галерее, которые вы собирали в десяти частях. Но пока их видите только вы. Выложить сайт значит положить эти файлы на компьютер, который отдаёт их всем. Всё нужное вы уже знаете: что такое хостинг, домен, DNS, сертификат, конвейер. Теперь сложим это вместе.

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

Что вы выкладываете

Откройте галерею и нажмите «Скачать сайт» у любой версии. Вы получите архив с файлами сайта и файлом README.md с короткой инструкцией (в ней те же три пути). Всё, что вы выкладываете, это статический сайт: файлы HTML, CSS и картинки. Для такого сайта выкладка это «положить файлы так, чтобы index.html лежал на верхнем уровне папки, которую раздаёт сервер».

Форма заявки на статическом сайте сама ничего не принимает: ей нужен приёмник (сервис форм или функция, как в уроке про serverless). Это не мешает выкладке: страницы отдаются, а приёмник подключается отдельно.

Три пути

GitHub Pages. Бесплатно для открытых репозиториев. Сайт отдаётся прямо из репозитория, и каждое изменение обновляет его. Подходит, если вы готовы завести аккаунт на GitHub, а ваш сайт не секрет (репозиторий на бесплатном плане открытый, поэтому секретов в файлах быть не должно). По условиям GitHub, Pages не предназначен для интернет-магазина и другого коммерческого сервиса (октябрь 2026). Адрес по умолчанию имеет вид https://аккаунт.github.io/репозиторий/; свой домен подключается записями DNS (четыре A для корня и CNAME для www), а HTTPS GitHub включает сам после выдачи сертификата.

Vercel. Есть бесплатный тариф Hobby, но он только для личных некоммерческих проектов: для сайта, который приносит деньги, нужен платный тариф или другой хостинг (страница тарифов Vercel, октябрь 2026). Можно подключить репозиторий (тогда каждый коммит выкладывается сам, а чужие ветки дают предпросмотр) или просто перетащить папку на страницу Vercel Drop. Домен подключается в настройках проекта, а какие записи нужны, Vercel показывает прямо там: используйте значения из вашего проекта, а не из чужих статей. Предыдущую выкладку можно вернуть. Но учтите: зарубежные платформы из России бывают недоступны или неудобны, а оплату зарубежным сервисам российскими картами сейчас трудно сделать, так что проверяйте это до того, как строить на них планы.

Российский виртуальный хостинг. Платно (порядка сотен рублей в месяц), с договором и поддержкой на русском, дата-центр в России, что удобно, когда у вас есть форма с персональными данными. Вы заводите тариф, добавляете сайт и домен в панели, загружаете файлы в папку сайта (обычно public_html, но у некоторых называется иначе) и направляете домен: сменой NS на серверы хостинга или записью A с адресом, который вам назовёт хостинг. Сертификат включается кнопкой в панели.

Выберите путь по правилу из первого урока: самый простой, на котором работает главное действие вашего проекта. Для визитки это почти всегда бесплатный статический вариант, для проекта с формой и российскими посетителями российский хостинг и приёмник заявок тоже в России.

Репетиция

Выберите путь и отмечайте шаги. Страница подставит адрес вашего проекта. Под шагами список симптомов с причинами: самые частые «Выложил, а там пусто» и «Предупреждение о сертификате».

Это репетиция: ничего не отправляется и не публикуется. Шаги настоящие, и вы можете повторить их у себя.

GitHub PagesVercelРоссийский хостинг

Бесплатно для открытых репозиториев; сайт отдаётся из репозитория. Подходит для статических сайтов. По условиям GitHub, Pages не предназначен для интернет-магазина и другого коммерческого сервиса (октябрь 2026).

Ваш сайт будет по адресу вроде https://ваш-аккаунт.github.io/moi-sait/, а на своём домене: https://example.ru/.

Ваш домен (для примера):

1. Скачайте свой сайт из галереи («Скачать сайт»): получится архив с файлами и README.
2. Создайте аккаунт на github.com и новый репозиторий с именем, например, из латинских букв и дефисов.
3. Загрузите файлы в корень репозитория (кнопка «Add file», «Upload files») и сохраните («Commit»). index.html должен лежать на верхнем уровне.
4. В репозитории откройте Settings, затем Pages, выберите источник: ветку main и корневую папку, сохраните.

   Подождите несколько минут (иногда до десяти): вверху раздела Pages появится адрес.

5. Откройте адрес вида https://ваш-аккаунт.github.io/имя-репозитория/ и убедитесь, что страница та же, что в предпросмотре.

   Если пусто или 404, смотрите раздел «Что-то не так» ниже.

6. Свой домен: в Settings, Pages впишите домен в поле Custom domain и сохраните, затем добавьте у регистратора записи DNS из документации GitHub (четыре A для корня и CNAME для www на ваш-аккаунт.github.io).
7. Когда сертификат готов (до суток), отметьте «Enforce HTTPS».

   Проверьте: http:// перенаправляет на https://, www и без www открываются.

Отмечено шагов: 0 из 7.

Что-то не так

Симптом 404 или пусто после выкладкиСтраница без стилей и картинокПосле правки виден старый сайтПредупреждение о сертификате на своём доменеДомен вообще не открываетсяБез www открывается, с www нет (или наоборот)

Чаще всего. Файл index.html не на верхнем уровне публикуемой папки, выбрана не та ветка или папка, или регистр букв в имени не тот (на серверах Index.html и index.html разные файлы).

Что делать. Проверьте источник публикации в настройках и положение index.html. Подождите до десяти минут после выкладки.

Проверьте себя: зачем при выкладке в подпапку писать адреса файлов без слеша в начале?

Адрес со слешем отсчитывается от корня домена, и браузер не найдёт файл, если сайт лежит в подпапке. Относительные адреса (styles.css) отсчитываются от самой страницы и работают в любом месте.

Привязка своего домена

Для любого пути последовательность одна, и она вам знакома по урокам про DNS и HTTPS.

1. Сначала добавьте домен в настройках платформы (у GitHub это Settings, Pages, Custom domain; у Vercel Settings, Domains). Платформа скажет, какие записи нужны.
2. Потом добавьте записи у регистратора (или там, куда указывают NS): для корня A (или ALIAS), для www CNAME. Выписывайте значения из панели платформы.
3. Подождите. Записи расходятся по TTL, а сертификат выпускается после того, как платформа увидит верные записи. У GitHub это бывает до суток.
4. Включите HTTPS и перенаправление. Выберите один основной адрес (с www или без) и перенаправьте второй на него.
5. Проверьте командами dig и открыв сайт из мобильной сети: у домашнего интернета свой кэш.

Не меняйте записи подряд, если сразу не получилось: каждое изменение сбрасывает ожидание. Сверьтесь с симптомами выше и подождите TTL.

Что проверить после выкладки

• Открывается ли сайт по https://, и перенаправляет ли http:// на него.
• Открываются ли и www, и адрес без www.
• Все ли страницы, картинки и стили на месте (пути относительные, регистр букв совпадает).
• Главное действие проекта работает на настоящем адресе: форма отправляется, запись приходит вам.
• Как сайт выглядит на телефоне в мобильной сети.
• Куда уходят данные из формы (о законе в следующем уроке).

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

Практика

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

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

Что было не так раньше

В 2010 году выложить сайт значило купить хостинг, получить письмо с логином и паролем от FTP, установить программу для загрузки и перетащить файлы в папку с названием вроде www или htdocs. Сайт появлялся без HTTPS, правки заливались поверх, прежней версии не оставалось. Сегодня бесплатная выкладка за минуты стала обычным делом, а мерой качества стало не «сайт выложен», а «его можно спокойно менять»: с проверками, откатом и записанным порядком. Первую половину вы сделали сегодня, вторую делает конвейер из прошлого урока.