Как выложить HTML-сайт с компьютера
У вас есть папка с готовым сайтом — index.html, стили, картинки. Разбираем, как выложить её в интернет за минуту: что проверить перед загрузкой, два способа публикации без FileZilla и покупки хостинга, и что настроить сразу после.
Что считается готовым сайтом
Готовый сайт — это папка, внутри которой лежит
index.html и всё, что к нему прилагается: стили,
скрипты, картинки, шрифты. Такую папку можно отдать любому серверу, и
он начнёт раздавать её посетителям. Ничего дополнительно
устанавливать и «запускать» не нужно — статический сайт работает сам
по себе.
Типичная структура выглядит так:
index.html— главная страница, обязательна;about.html,contacts.html— остальные страницы, если они есть;css/— стили;js/— скрипты;img/— изображения;404.html— страница «не найдено», необязательна, но желательна.
Если вместо этого у вас папка src, файл
package.json и инструкция про npm run build —
сайт ещё не готов, его нужно собрать. Это можно не делать вручную:
платформа деплоя выполнит сборку сама, приняв исходники.
Проверьте папку перед загрузкой
Шесть пунктов, которые экономят час на разбирательствах «почему не работает».
index.html в корне
Не Index.html, не main.html, не внутри вложенной папки. Ровно index.html на верхнем уровне.
Относительные пути
img/logo.png — правильно. C:/Users/Ivan/site/img/logo.png — работает только на вашем компьютере.
Латиница в именах файлов
Кириллица и пробелы в путях ломаются. foto-1.jpg вместо Фото 1.jpg.
Единый регистр букв
Сервер различает Logo.PNG и logo.png, Windows — нет. Держите всё в нижнем регистре.
Ничего лишнего
Исходники в PSD, архивы, заметки и резервные копии в папке не нужны — они увеличат размер и попадут в открытый доступ.
Никаких паролей в коде
Всё, что лежит в HTML и JS, видно посетителям через просмотр исходного кода. Ключи доступа туда попадать не должны.
Как выложить сайт: два способа
Оба дают один результат — рабочий адрес с HTTPS. Отличается только то, чем вам удобнее пользоваться.
Через браузер, без терминала
- Войдите на app.layero.ru по почте или через Яндекс
- Создайте проект и перетащите в него папку сайта
- Дождитесь окончания публикации — 30–60 секунд
- Откройте выданную ссылку вида
ваш-проект.layero.ru
Через терминал, одной командой
- Откройте папку сайта в терминале
- Выполните
npx layero@latest deploy - Войдите по ссылке, которую покажет команда
- Получите адрес сайта в выводе команды
Второй способ удобен тем, что повторная публикация — это та же одна команда. Полное описание — в документации CLI.
Выложите сайт бесплатно
Без FTP, без покупки хостинга и без настройки сервера. HTTPS и CDN в России — сразу.
А как же FTP
В большинстве инструкций в интернете публикация сайта описана так:
купите хостинг, установите FileZilla, подключитесь по FTP, скопируйте
файлы в папку public_html. Это рабочий способ, ему больше
двадцати лет, и он до сих пор используется — но у него есть цена.
- Ручное копирование при каждом изменении. Поправили текст в одном файле — нужно вспомнить, какой именно файл перезаписать.
- Нет истории версий. Если новая версия оказалась хуже, вернуться можно только из собственной резервной копии, если вы её сделали.
- Сборку фронтенда делаете вы. Каждый раз локально, перед каждой загрузкой.
- Хостинг платный с первого дня, даже если сайт — одностраничное портфолио.
Когда FTP всё-таки нужен: сайт на PHP, готовая CMS (WordPress, «1С-Битрикс», OpenCart), необходимость в базе данных MySQL и почте на своём домене в одном тарифе. Платформы деплоя такие задачи не закрывают — там нужен классический хостинг. Для статических сайтов и фронтенда FTP сегодня — лишний шаг.
Где ещё можно выложить HTML-сайт
Layero — не единственный вариант, и честно сравнить их полезно до того, как вы потратите вечер. Ниже — площадки, которые реально подходят для готовой папки со статикой.
| Куда | Что нужно уметь | Цена | Когда это ваш вариант |
|---|---|---|---|
| Layero | Перетащить папку | Бесплатный тариф | Нужен быстрый результат, аудитория в России, свой домен и HTTPS без настройки |
| GitHub Pages | Базовый git | Бесплатно | Код уже на GitHub, сайт — документация или портфолио, аудитория международная |
| Виртуальный хостинг | FTP-клиент, панель управления | От ~150 ₽/мес | Нужны PHP, база данных, почта на своём домене или готовая CMS |
| Объектное хранилище (S3) | Консоль облака, настройка прав и CDN | Оплата за трафик и хранение | Вы уже работаете с облаком и хотите собрать раздачу сами |
| Свой VPS | Linux, nginx, сертификаты | От ~300 ₽/мес | Нужен полный контроль над сервером и нестандартное окружение |
Для одной статической папки два нижних варианта — это работа ради работы: вы потратите вечер на то, что в других местах делается перетаскиванием. Они оправданы, когда сайт лишь часть большей инфраструктуры.
Что настроить после публикации
Свой домен
Технический адрес рабочий, но для клиентского сайта обычно нужен собственный. Домен покупается у регистратора, добавляется в панели, а затем у регистратора прописывается CNAME-запись. Сертификат HTTPS для своего домена выпускается автоматически — доплачивать не нужно. Подробности — в документации.
Страница 404
Положите в корень файл 404.html — он будет показываться
вместо стандартной ошибки, когда посетитель попадает на несуществующий
адрес. Мелочь, но заметная: стандартная страница ошибки выглядит так,
будто сайт сломан.
Обновление сайта
Повторная публикация не ломает адрес: посетители продолжают ходить по той же ссылке и видят новую версию. Предыдущие версии остаются в истории деплоев, к любой можно вернуться одной кнопкой.
Закрыть сайт от посторонних
Если сайт показывается заказчику до запуска и не должен попасть в поисковики, включите защиту паролем — доступ будет только у тех, кому вы дали пароль.