Деплой статики на бесплатный хостинг

«Статика» — это файлы, которые отдаются как есть: HTML/CSS/JS, в т.ч. собранный билд React/Vue/Vite. Её можно выложить бесплатно и с HTTPS на нескольких платформах. Команды сверены с офиц. документацией GitHub Pages, Netlify CLI и Cloudflare Wrangler (2026-06).

🧭 Картина целиком

Что получишь на выходе: публичную ссылку на свой сайт с замочком (HTTPS), которая живёт постоянно и ничего не стоит. Три равноценных пути — выбираешь под привычку и потребности.

Сначала — развилка: статика или backend? Эти платформы отдают ТОЛЬКО статику. Если у тебя серверная логика, БД, секретные ключи на сервере — нужен настоящий сервер (гайд «Свой проект на сервере с нуля»). Лендинг, портфолио, документация, собранный React/Vue без своего бэкенда — идеально для статики.

Что считается готовым к деплою: папка с index.html (и ассетами). Для React/Vite — это результат сборки (npm run build → папка dist/ или build/), а не исходники.

Три способа: GitHub Pages (если код уже на GitHub) · Netlify (удобнее всего для SPA, drag-and-drop или CLI) · Cloudflare Pages (быстрая глобальная сеть, деплой одной командой). Выбери ОДИН.

💡 Перед деплоем собранного фронтенда учти базовый путь: на GitHub Pages сайт часто лежит на под-пути /имя-репо/, и ассеты по / ломаются (белый экран). Netlify/Cloudflare обычно отдают с корня — проще. Подробно — в частых ошибках.

Шаг 1. Подготовить папку (собрать билд, если нужно)

Что делаем: получаем папку со статикой, готовую к публикации.

• Чистый HTML/CSS/JS — папка уже готова (в ней index.html).
• React/Vue/Vite и т.п. — собери продакшен-билд:

npm install        # один раз, если не ставил зависимости
npm run build      # создаст папку dist/ (Vite) или build/ (CRA) — это и есть статика

Как понять, что ОК: появилась папка dist//build/ с index.html и ассетами. Можно проверить локально: npx serve dist → открой показанный адрес, сайт работает.

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

• Пытаешься выложить ИСХОДНИКИ React (с src/, node_modules/) вместо билда → в браузере белый экран/ошибки. Деплой только результат build.
• npm run build падает на ошибках → сначала почини сборку локально; сломанный билд не выложится рабочим.

Шаг 2 (Путь А). GitHub Pages — если код уже на GitHub

Что делаем: включаем бесплатный хостинг прямо в репозитории.

1. Залей проект в публичный репозиторий GitHub (см. «Git за 15 минут»). Для собранного фронта — положи содержимое билда в корень или в папку /docs (или используй ветку gh-pages).
2. Репозиторий → Settings → Pages → Source: Deploy from a branch → ветка main, папка /(root) или /docs → Save.
3. Через ~минуту сайт живёт по https://ТВОЙ_ЛОГИН.github.io/имя-репозитория/.

Как понять, что ОК: на странице Settings → Pages появилась плашка «Your site is live at …» с ссылкой; ссылка открывается по HTTPS.

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

• Белый экран у SPA на под-пути: ассеты ищутся от /, а сайт на /имя-репо/. Реши относительной базой: в Vite — base: "/имя-репо/" (или "./") в vite.config, в CRA — "homepage" в package.json. Пересобери и перезалей.
• 404 при перезагрузке роутов SPA: Pages не знает про клиентский роутинг. Сделай 404.html копией index.html или используй HashRouter.
• Репозиторий приватный → на бесплатном плане Pages может быть недоступен. Сделай публичным.

🧠 Для сеньора: чище — деплой через GitHub Actions (actions/deploy-pages) из артефакта сборки, а не «папка из main»; кастомный домен + авто-HTTPS в настройках Pages; кэш-busting через хеши в именах файлов (Vite даёт из коробки).

Шаг 2 (Путь Б). Netlify — проще всего для SPA

Что делаем: публикуем папку через CLI (или вообще перетаскиванием в браузере).

npm install -g netlify-cli      # поставить Netlify CLI
netlify login                   # вход через браузер
netlify deploy --dir=dist       # черновой деплой (превью-ссылка), вместо dist — твоя папка билда
netlify deploy --prod --dir=dist  # боевой деплой на основной адрес

При первом deploy Netlify предложит создать новый сайт или выбрать существующий.

Как понять, что ОК: CLI печатает Website URL (для --prod — боевой адрес) — открой, сайт работает по HTTPS. Без логина можно netlify deploy --prod --dir=dist --allow-anonymous.

💡 Совсем без терминала: на app.netlify.com просто перетащи папку билда в зону Drag-and-drop — получишь ссылку за секунды.

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

• Указал --dir не на ту папку (исходники вместо dist/build) → пустой/битый сайт. Путь — на собранный билд.
• 404 на роутах SPA: добавь файл _redirects в папку публикации со строкой /* /index.html 200 (Netlify читает его и отдаёт SPA на любой путь).
• Забыл --prod → задеплоил в превью, а не на основной адрес. Боевой — только с флагом --prod.

Шаг 2 (Путь В). Cloudflare Pages — быстрая глобальная сеть

Что делаем: заливаем папку напрямую через Wrangler (CLI Cloudflare).

npm install -g wrangler                       # поставить Wrangler
npx wrangler login                            # вход через браузер
npx wrangler pages project create             # создать проект Pages (один раз, задать имя)
npx wrangler pages deploy dist                # выложить папку билда (вместо dist — твоя)

Как понять, что ОК: Wrangler выводит ссылку вида https://<проект>.pages.dev — открой, сайт отдаётся по HTTPS с глобального CDN.

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

• Не залогинен / нет аккаунта Cloudflare → wrangler login сначала. Аккаунт бесплатный.
• Указал не ту папку в pages deploy → выложится не то. Аргумент — папка билда (dist/build).
• SPA-роуты 404 → положи _redirects (как у Netlify: /* /index.html 200) или настрой fallback в проекте.

Шаг 3. Проверить и привязать домен (по желанию)

Что делаем: убеждаемся, что всё работает, и при желании вешаем свой домен.

1. Открой выданную ссылку с телефона и на чужом устройстве — сайт грузится, HTTPS (замочек) на месте, страницы и роуты работают.
2. Свой домен: во всех трёх платформах есть «Custom domain» — добавляешь домен и прописываешь в DNS запись по их инструкции; HTTPS-сертификат платформа выдаёт сама.

Как понять, что ОК: сайт открывается у других людей по ссылке (и по своему домену, если привязал), везде HTTPS, навигация не выдаёт 404.

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

• «У меня открывается, у других нет» — проверял из кеша/локально. Открой в режиме инкогнито и попроси кого-то ещё.
• Домен «не подхватился» сразу — DNS обновляется не мгновенно (от минут до часов). Сверь запись с инструкцией платформы и подожди.

🧠 Для сеньора

• CI/CD вместо ручного деплоя: подключи репозиторий к Netlify/Cloudflare Pages — каждый git push авто-собирает и деплоит (preview на ветку, prod на main). У GitHub Pages — Actions с deploy-pages.
• SPA-fallback и заголовки: _redirects/_headers (Netlify/CF) для history-роутинга, кэш-политик и security-заголовков (CSP, HSTS). Иммутабельный кэш на хешированные ассеты, no-cache на index.html.
• Base path: при деплое на под-путь правильно выставляй base/publicPath; на Netlify/CF с корня — обычно не нужно. Проверь, что абсолютные пути ассетов не «уезжают».
• Превью и откат: все три дают immutable-деплои и мгновенный rollback на прошлую версию — пользуйся для безопасных релизов.
• Граница статики: нужен бэкенд-кусок (формы, авторизация, секреты) — добавь serverless (Netlify Functions / Cloudflare Workers) рядом со статикой, не тащи всё на отдельный сервер ради мелочи.

⚠️ Предупреждения

• Публичный репозиторий и публичная статика = публичный код. Перед деплоем убедись, что в файлах и истории git нет секретов, ключей, токенов, приватных данных — всё это видно всем в исходниках страницы. Утёкший ключ = взлом.
• Никаких «секретных» бэкенд-ключей в JS. Любой ключ, попавший в статику, доступен каждому через DevTools. Серверные секреты — только на сервере/в serverless-переменных, не в коде фронта.
• Только статика. Не пытайся «спрятать» сюда backend/БД — их здесь нет. Для серверной логики — отдельный сервер (см. соответствующий гайд).
• Бесплатные лимиты. У платформ есть лимиты трафика/сборок на бесплатном плане — для личных и небольших проектов их с запасом хватает, но для нагрузки сверь тариф.

🆘 Промт-спасалка

Помоги выложить мой сайт на бесплатный хостинг, объясняй по шагам.
ЧТО У МЕНЯ: <чистый HTML/CSS/JS / собранный React-Vite-билд / исходники, ещё не собирал>.
ХОСТИНГ: <GitHub Pages / Netlify / Cloudflare Pages / посоветуй под мой случай>.
МОЯ ОС: <macOS / Windows>. Я ЗАСТРЯЛ: <белый экран / 404 на роутах / не пойму, какую папку деплоить / ошибка CLI>.

Что делать:
1) Нужно ли собирать билд и какую папку выкладывать (dist/build vs исходники).
2) Дай точные команды для выбранного хостинга по шагам.
3) Если SPA — как починить базовый путь и 404 на роутах (base / _redirects / 404.html).
4) Как проверить, что открывается у других по HTTPS. Предупреди про секреты в публичном коде.

💎 Глубина и ценность

• «Готово на компе» ≠ «есть у людей». Пока сайт живёт только локально — его как бы нет. Бесплатный хостинг с HTTPS превращает папку с файлами в продукт по ссылке за пару минут — последняя отговорка «не на что выложить» исчезает.
• Три пути — одна модель. GitHub Pages, Netlify, Cloudflare отличаются кнопками, но суть одна: «собрал статику → залил → получил HTTPS-ссылку». Понял модель — задеплоишь на любом из них и не привяжешься к одному вендору.
• Ступенька к большему. Освоив статику, ты естественно дорастаешь до CI/CD (авто-деплой на push), своего домена, serverless-функций и, когда понадобится backend, — до своего сервера. Это первый и самый дешёвый шаг «показать миру», с которого начинается всё остальное.