Как выложить статический сайт (HTML, CSS, JS)

Лендинг, портфолио, визитка, короткая страница с рекламой услуги — всё это может быть набором из нескольких файлов, которым для работы не нужны ни бэкенд, ни база данных, ни сборка. Такой сайт называется статическим, и выложить его в интернет можно действительно быстро. Путь от папки на ноутбуке до живой ссылки ломается всегда в одних и тех же местах: где должен лежать index.html, почему отваливаются стили и картинки, куда заливать файлы и как получить HTTPS. Ниже — разбор по шагам.

Как выглядит статический сайт и почему его так просто выложить

Это просто файлы. Папка с index.html, таблицами стилей, скриптами и картинками. Браузер открывает её без серверного кода: разметка, CSS и JavaScript выполняются на стороне посетителя.

Проверка занимает секунду. Двойной клик по index.html открывает страницу с картинками и стилями — значит статика у вас уже собрана и работает локально. Если так, публиковать больше нечего.

Сборка не нужна. В отличие от сайта на Astro, Vue или Svelte, здесь нечего компилировать: npm install и npm run build не потребуются, потому что исходный код уже и есть готовый сайт. Платформе достаточно отдать файлы наружу.

Отсюда выигрыш по времени. Настройка FTP-доступа на классическом хостинге, поиск корневой папки и правка конфигов веб-сервера занимают вечер. Статика публикуется одним действием.

Шаг 1. Соберите файлы в одну папку

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

site/
  index.html
  css/style.css
  js/app.js
  img/logo.svg

Точка входа — index.html в корне папки. Именно этот файл сервер отдаёт, когда посетитель открывает адрес без указания конкретной страницы. Если главная лежит на уровень глубже, например site/pages/index.html, по корневому адресу откроется пустота. Переместите файл в корень или переименуйте его.

Регистр букв имеет значение. Index.html и index.html — разные имена файлов. Локально, на Windows или macOS, первый вариант откроется, а на сервере с Linux вернёт ошибку 404.

Не оставляйте файлы за пределами папки. Кнопка «Скачать» в архиве или ссылка на картинку из соседнего каталога перестанут работать после загрузки: сервер отдаёт только то, что попало в архив.

Шаг 2. Проверьте относительные пути

Это причина номер один, по которой после публикации вместо сайта появляется белое полотно без стилей.

Плохой вариант — абсолютные пути к вашему компьютеру. Они указывают на локальный диск и после загрузки не существуют:

<link rel="stylesheet" href="/Users/anna/site/css/style.css">
<img src="C:\site\img\logo.png" alt="">

Хороший вариант — относительные пути от файла страницы. Адрес стилей и картинок считается от самого index.html, поэтому работает и локально, и на сервере:

<link rel="stylesheet" href="css/style.css">
<script src="js/app.js"></script>
<img src="img/logo.svg" alt="Логотип">

Внутренние ссылки между страницами — тоже относительные. Пишите href="about.html", а не href="file:///Users/anna/site/about.html". Первый вариант сервер разрешит сам, второй не откроется ни у кого.

Слэш в начале пути работает только в корне сайта. Запись href="/css/style.css" указывает на корень домена — на платформе деплоя это обычно та самая папка сайта, но если проект окажется в подкаталоге, стили отвалятся. Вариант css/style.css надёжнее.

Не забудьте про кодировку и мобильный вид. Две строки в <head> избавят от «кракозябр» вместо русских букв и от мелкого масштаба на телефоне:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Шаг 3. Загрузите сайт на платформу

Способов два, и оба не требуют терминала.

ZIP-архив. Упакуйте папку в архив и загрузите его через панель. Важно, чтобы index.html оказался в корне архива, а не внутри лишней вложенной папки: часто получается site/site/index.html, и тогда по адресу снова открывается пустая страница.

Git-репозиторий. Если файлы уже лежат на GitHub или в GitLab, подключите репозиторий — платформа заберёт код сама, включая приватный, и будет обновлять сайт при каждом коммите.

Ничего настраивать не нужно. Платформа видит HTML в корне проекта и понимает, что это статика: команда запуска и переменные окружения не требуются. В отличие от серверных приложений, здесь не нужно поднимать процесс и читать порт из PORT — отдавать файлы умеет сам веб-слой.

Шаг 4. Получите HTTPS-ссылку

Адрес выдаётся сразу. После загрузки проекта платформа даёт публичный адрес с уже подключённым сертификатом — открыть его можно с компьютера и с телефона.

Сертификат не нужно выпускать руками. На собственном сервере его ставят через certbot, прикручивают к nginx и продлевают каждые три месяца, иначе ссылка «протухает» и браузер показывает предупреждение. На платформе это часть публикации.

Ссылкой можно делиться. Замок в адресной строке — обязательное условие, если ссылка идёт в резюме, отклик на вакансию или сообщение клиенту.

Шаг 5. Подключите свой домен

Свой домен — не обязателен. Технический адрес платформы работает сразу, и для быстрой проверки его достаточно.

Подключение через DNS. Свой домен добавляется в настройках проекта: панель показывает, какие записи A или CNAME прописать у регистратора. После обновления DNS заявку нужно подтвердить — проверка занимает от нескольких минут до пары часов.

Сертификат выпускается заново. После того как домен указывает на платформу, HTTPS для него настраивается автоматически, и ссылка становится вида https://вашдомен.ru.

Шаг 6. Обновляйте сайт по тому же адресу

Правка текста или картинки — это новая публикация. Изменили файлы, загрузили новую версию архива или сделали git push — и обновление уезжает на тот же адрес.

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

Проверяйте кэш и пути. Если после обновления видна старая версия, обновите страницу без кэша. Если пропали только картинки — почти всегда дело в путях внутри файлов.

Сколько это стоит и как работают контейнеры

Администрировать сервер не нужно — контейнеры работают постоянно, без лимита по часам и без «засыпания». Если процесс упал, платформа перезапускает его сама.

Starter — 990 ₽/мес. 1 vCPU, 2 GB RAM, первый месяц бесплатный. Для одного статического сайта этого достаточно с запасом, и ограничения по времени работы у тарифа нет.

Pro — 2 490 ₽/мес. Больше ресурсов и до пяти проектов — если рядом с сайтами живут боты, база или API.

Team — 4 990 ₽/мес — для команд, которым нужен запас ресурсов и SLA.

Тарифы и подробности — на dockbox.host.

Частые вопросы