WebDev Уроки
Запуск · Урок 20

Публикация сайта

Финальный шаг: сайт из локальной папки становится доступен всему интернету. Разберём три способа, подключение своего домена и HTTPS — по-настоящему «сайт готов» звучит только после этого.

Способ 1: GitHub Pages — для статики

Бесплатно, минуты на настройку. Идеален для наших лендингов и статических проектов.

  1. Создайте репозиторий и закоммитьте сайт (урок 11);
  2. Settings → Pages → Source: Deploy from a branch → main → / (root);
  3. Через минуту сайт живёт на https://логин.github.io/репо/;
  4. При следующем git push обновится автоматически.
💡
Если сайт собран Vite, Pages попросит папку build output — укажите dist. Вкладки Actions тогда покажет, как сборка бежала автоматически.

Способ 2: Netlify и Vercel — для всего

Хостинги нового поколения: перетащили папку — сайт уже в сети, с сертификатом HTTPS, и даже привязали домен. Ссылку можно получить, даже зарегистрировавшись через аккаунт GitHub.

netlify deploy --prod --dir=dist
# или просто перетащить папку dist на netlify.com/drop
# Vercel: vercel --prod — и следить за подсказками
ℹ️
Главный бонус: подключите репозиторий к Netlify/Vercel — и каждый «пуш» в GitHub будет автоматически собирать npm run build и публиковать результат. Это называется Continuous Deployment и работает на прод-проектах точно так же.

Свой домен

Красивый адрес покупается у регистратора доменов (около 10–30 $/год). Дальше — привязка: у хостинга есть адрес для CNAME-записи или A-записи.

# у регистратора, в DNS — добавляем запись
www   CNAME  my-site.netlify.app
      A      75.2.60.5   (пример, берите адрес у вашего хостинга)

HTTPS — обязательно

HTTP передаёт данные открытым текстом; HTTPS шифрует. Браузеры помечают сайты без замка как «не защищено», Google не любит их в поиске. Хорошая новость: сертификаты бесплатны.

# на Vercel / Netlify HTTPS включается автоматически.
# на ВАШЕМ сервере — Let's Encrypt:
certbot --nginx -d example.com
⚠️
Проверить сайт после запуска: откройте его с телефона, попробуйте купить/записаться, прогоните страницы в Mobile-Friendly Test и PageSpeed Insights. Внешний вид и скорость — то, что в первую очередь видит пользователь.

Первая аналитика

Запустили — пора узнать, заходят ли люди. Бесплатные метрики: Google Analytics и Яндекс.Метрика. Скрипт счётчика вставляется на каждую страницу, а дальше приходят цифры: посещения, откуда пришли, сколько пробыли.

<!-- Счётчик от сервиса аналитики (пример) -->
<script async src="https://example-analytics.example/next.js"
        data-website-id="ваш-id"></script>

Вы дошли до конца 🎉

20 уроков позади: от первого <h1> до опубликованного сайта с доменом, HTTPS и аналитикой. Вы умеете верстать, программировать на JS, работать с Git, собирать проекты и запускать их. Это — полноценный набор junior-разработчика. Дальше — только практика: больше проектов, больше итераций, рефакторинг того, что уже сделали.

💡
Последнее задание на память: вернитесь на главную этого курса и откройте закладку «Сертификат» — после прохождения всех квизов курса у вас появится. Пусть он подтвердит: курс пройден целиком.
← Урок 19 Урок 21: Node.js и Express →