Как сделать сайт без интернета: локальная копия

Сайт без интернета можно сделать как локальную копию собственных статических страниц: сохранить HTML, CSS, JavaScript, изображения и шрифты в одной папке, запустить простой сервер на компьютере и открыть локальный адрес с портом 8000. Такой вариант подходит для презентации, прототипа и архива. Формы, оплата, авторизация и данные из внешнего API без сети работать не будут.

Какой офлайн-вариант выбрать

Для показа на одном ноутбуке достаточно папки с файлами и локального HTTP-сервера. Если сайт должен устанавливаться на телефоны и открываться после первого посещения, нужен отдельный PWA-механизм с service worker и кешем. Здесь разбирается первый, более надёжный для презентации вариант.

• Одна HTML-страница без скриптов: иногда открывается двойным щелчком, но этот способ плохо выявляет ошибки путей.
• Несколько страниц, JavaScript-модули или загрузка локальных данных: запускайте локальный HTTP-сервер.
• Работа после первого посещения обычного публичного сайта: проектируйте PWA и заранее кешируйте нужные ресурсы.
• Личный кабинет, магазин или сервис с удалённой базой: простая офлайн-копия не воспроизводит серверную часть.

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

Офлайн-копия начинается не с отключения Wi-Fi, а со списка внешних зависимостей. Один шрифт, скрипт или API с чужого домена способен оставить страницу неполной.

Что должно лежать в локальной папке

Минимальный комплект содержит стартовую страницу index.html и все файлы, на которые она ссылается. Не сохраняйте чужой сайт целиком и не переносите материалы без разрешения. Для своего проекта соберите структуру, в которой каждый ресурс имеет понятный относительный путь.

offline-site/
  index.html
  about.html
  css/
    styles.css
  js/
    app.js
  images/
    hero.webp
  fonts/
    site-font.woff2

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

По теме: Как сделать разрешение сайта: адаптивный экран в 2026

Как подготовить статический сайт к показу без сети

Перед переносом сделайте отдельную копию готовой папки. Если проект собирается конструктором или инструментом разработки, используйте его штатный экспорт или каталог готовой сборки, а не исходники, которые браузер не умеет исполнять сам.

1. Создайте папку offline-site и перенесите в неё готовые HTML, CSS, JavaScript, изображения и шрифты.
2. Убедитесь, что стартовый файл называется index.html и открывает главную страницу.
3. Замените обязательные ресурсы с CDN на локальные файлы. Не копируйте внешнюю библиотеку, если её лицензия этого не разрешает.
4. Проверьте пути. Ссылка images/photo.webp берётся относительно текущей страницы, а /images/photo.webp начинается от корня локального сервера.
5. Уберите или явно подпишите функции, которым нужна сеть: отправку формы, карту, видео с внешней площадки, оплату, чат и аналитику.
6. Запустите локальный сервер только на адресе своего компьютера и откройте сайт в браузере.
7. Отключите внешнюю сеть и пройдите все страницы по проверочному списку ниже.

Открытие через локальный файл не равно работе сайта. Руководство MDN по локальному серверу объясняет, что асинхронные запросы и подключение локальных файлов могут блокироваться правилами безопасности браузера. Для JavaScript-модулей MDN также рекомендует тестирование через сервер, а не прямое открытие файла.

Как запустить папку через локальный сервер

Если на компьютере установлен Python, откройте терминал в папке сайта и выполните команду ниже. Параметр --bind 127.0.0.1 оставляет сервер доступным только на вашем компьютере. Документация Python подтверждает запуск модуля из командной строки и отдельно предупреждает, что он не предназначен для боевого размещения в интернете.

cd offline-site
python3 -m http.server 8000 --bind 127.0.0.1

Откройте локальный сайт и не закрывайте окно терминала до конца показа. Для остановки вернитесь в терминал и нажмите Ctrl+C. Если команда python3 не найдена, установите Python заранее или используйте штатный локальный просмотр среды, в которой был собран сайт.

Проверяемая карта внешних зависимостей

Не пытайтесь оценивать готовность по внешнему виду одной страницы. Пройдите каждый тип зависимости и отметьте ожидаемое поведение без сети.

• HTML и навигация: все внутренние ссылки открывают локальные страницы без ошибки 404.
• Стили: в Network нет CSS с внешнего домена, внешний вид сохраняется после жёсткой перезагрузки.
• Изображения и шрифты: файлы лежат в папке, подписи и запасные шрифты не дают пустых блоков.
• JavaScript: консоль не показывает CORS, failed to fetch и ошибку импорта модуля.
• Формы: кнопка либо сохраняет данные локально, либо честно сообщает, что отправка требует интернета.
• Видео, карты и виджеты: есть локальная заглушка или заранее подготовленная альтернатива.
• Аналитика: её сбой не блокирует интерфейс и не создаёт бесконечное ожидание.

Практический критерий готовности: новый сеанс браузера открывает главную, все обязательные страницы и локальные изображения при физически отключённом Wi-Fi. Кеш ранее открытого сайта не считается доказательством. В DevTools включите Disable cache, затем режим Offline и только после этого перезагрузите страницу.

По теме: Как сделать на сайте список: HTML, CSS и доступность

Как проверить отсутствие скрытых обращений в интернет

1. Откройте DevTools, вкладку Network, включите Preserve log и перезагрузите локальный сайт.
2. Добавьте столбец Domain или просмотрите полный адрес каждого обязательного ресурса.
3. Исправьте обращения к доменам, от которых зависит отображение или навигация.
4. Выберите режим Offline в меню ограничения сети и снова перезагрузите страницу.
5. Пройдите ссылки, кнопки и сценарий показа, затем проверьте красные строки Network и ошибки Console.

В официальной справке Chrome DevTools режим Offline описан как симуляция полного отсутствия сетевого соединения. После программной проверки всё равно отключите Wi-Fi физически: так вы исключите ошибочно открытый профиль браузера или вкладку без включённой симуляции.

Диагностика по симптому

• Страница белая при двойном щелчке: не исправляйте CORS отключением защиты браузера, запустите локальный HTTP-сервер.
• Нет стилей: откройте Network, найдите CSS со статусом 404 и сравните путь с реальной папкой.
• Пропали картинки: проверьте регистр букв в имени файла и расширение, особенно если копия будет открываться на другой системе.
• Работает главная, но не внутренняя страница: перенесите её HTML или настройте экспорт маршрутов; один index.html не создаёт остальные адреса автоматически.
• Форма зависает: отключите сетевой вызов и покажите понятное состояние офлайн, либо замените отправку локальным сохранением.
• После переноса на флешку пути сломались: уберите ссылки на конкретную папку пользователя и оставьте пути внутри комплекта.
• Сайт работает только после онлайн-посещения: ресурс попал в кеш браузера, но отсутствует в папке. Очистите данные сайта и повторите тест.

По теме: Как сделать сайт на MacBook: локально и опубликовать в 2026

Когда нужен service worker

Service worker нужен не для разового показа из папки, а для управляемого кеширования веб-приложения после его установки или посещения. MDN описывает service worker как механизм офлайн-работы и указывает, что localhost считается безопасным источником для разработки. Публично такой механизм должен работать в безопасном контексте. Его кеш надо версионировать и обновлять, иначе посетитель может долго видеть старые файлы.

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

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

Можно ли открыть сайт без интернета двойным щелчком?

Простую страницу без модулей и запросов иногда можно открыть так. Для надёжной проверки и нескольких страниц используйте локальный сервер.

Нужен ли домен для локального сайта?

Нет. На своём компьютере сайт открывается по локальному адресу. Домен понадобится для публичного доступа через интернет.

Будет ли работать форма заявки?

Только если она сохраняет данные локально. Отправка письма, запись в удалённую таблицу или CRM требуют сети и работающего сервера.

Можно ли передать комплект на флешке?

Да. Передавайте всю папку и инструкцию запуска. На другом компьютере заранее проверьте наличие подходящего локального сервера и свободного порта.