Когда начинаешь практиковаться в вёрстке сайтов, может быть очень полезно разобраться, как устроены сайты у других ребят. Вот как это сделать.
👉 Всё, что мы делаем в этой статье, мы делаем в учебных целях. Если вы просто скопируете себе чужой сайт и будете выдавать его за свой, это может плохо кончиться.
💡 На самом деле всё сказанное в этой статье нужно для тех, кто боится отключения интернета и хочет сохранить у себя на компьютере самую важную информацию. Но эта мысль бредовая сразу на стольких уровнях, что мы стесняемся её произносить вслух. Разве что шёпотом.
В чём идея
Мы будем копировать чужой сайт, чтобы его можно было запустить на своём сервере или на домашнем компьютере. Задача — не просто открыть сайт в браузере и посмотреть его код, а забрать из него все важные файлы — и стили, и скрипты, и изображения. Чтобы было проще, мы будем практиковаться на одностраничном сайте, но всё то же самое будет работать и на многостраничном.
❌ Мы не сможем утащить чужие PHP-скрипты и страницы, связанные с данными пользователя (например, не сможем утащить из интернет-магазина рабочую версию корзины с покупками). Для этого нужен доступ к файлам сервера, а этого у нас нет.
Главный принцип этой работы: когда ваш браузер запрашивает страницу чужого сайта, веб-сервер отправляет ему эту страницу, в буквальном смысле. То же с картинками, стилями и скриптами: каждый раз, когда вы посещаете сайт, вы как будто делаете его копию у себя на компьютере. Браузер получает страницу от сервера и выводит её копию на экран, а в памяти держит исходный код. Разве что он не сохраняет эту страницу на диск, чтобы вы могли её редактировать.
Вот этот последний этап мы и исправим: теперь мы будем сохранять чужие сайты к себе на диск.
Весь процесс покажем на примере сайта ux-posters.ru – простом одностраничном сайте, где есть картинки, стили и скрипты. Автору этого текста пришлось помогать авторам этого сайта с похожей задачей, так что пример свеженький.
Быстрый путь: грабберы
Есть категория программ под названием «веб-грабберы», или «веб-рипперы». Они работают так:
- Ты говоришь программе, на какую страницу сайта зайти.
- Программа собирает все ссылки с этой страницы, переходит по этим ссылкам и строит себе виртуальную карту сайта — то есть пытается понять, сколько на этом сайте страниц и как они связаны.
- Потом граббер начинает ползать по этим страницам подряд, запрашивать их у сервера, получать ответы и сохранять ответы на вашем жёстком диске.
- В какой-то момент граббер останавливается, потому что он скачал все доступные ему страницы с этого сайта.
После работы граббер оставляет у вас на диске гору файлов, которые представляют собой статичный отпечаток чужого сайта. Эту гору можно загрузить на собственный сервер, и издалека это будет похоже на чужой сайт.
✅ Плюсы: граббер может быстро охватить много страниц и скачать из них огромное количество стилей, картинок и всего подряд. Работа очень быстрая и хорошо автоматизирована.
❌ Минусы: часто он качает всё без разбора, оставляя на диске много дублей. Также он бессилен с сайтами, в которых контент выводится динамически или имеет нестандартную систему адресации.
💡 В целом грабберы можно использовать, чтобы скачивать сайты библиотек, архивов и других мест, где документов много и всё устроено логично. Например, с помощью граббера можно скачать какую-нибудь классическую книгу из онлайн-библиотеки.
Вот ссылки на грабберы для разных платформ:
- HTTrack — старый интерфейс из нулевых, но свою задачу выполняет полностью. Бесплатный и надёжный, работает везде.
- Getleft — мультиплатформенный граббер, который пытается выкачивать всё, до чего дотянется, включая PHP-скрипты.
- Cyotek WebCopy — для тех, кто любит только Windows, тоже бесплатный.
Сложный путь: ручное сохранение
Допустим, мы хотим сохранить какую-то отдельную страницу сайта или конкретные её части (например, картинки). Но эти картинки как-то так хитро встроены, что вы не можете просто нажать «Сохранить картинку как...». Тогда потребуется ручной метод.
Заходим на страницу и нажимаем в браузере Ctrl + I (в Виндоус) или ⌥ + ⌘ + I (если у вас мак). Появляется окно «Инспектора», где видна внутренняя структура страницы:
Мы видим, что текущий документ в браузере состоит:
- из страницы index.html;
- скрипта likely.js;
- четырёх таблиц стилей;
- шрифтов, подключённых через сервис Google;
- папки с картинками.
Шрифты нам скачивать необязательно — сайт и так их подключит с сервера гугла, а всё остальное скачать нужно. Чтобы не создавать хаос на компьютере, создадим сначала папку ux-posters — в ней будет храниться наш сайт. Потом в эту папку сохраняем все файлы таким способом:
- Нажимаем правой кнопкой мыши на очередной файл.
- Выбираем пункт Save as, или «Сохранить как».
- Пишем имя и расширение файла — точно так, как указано в списке.
- Если лень писать самому — скопируйте перед этим название файла, нажав правую кнопку мыши и выбрав Copy file name, или «Скопировать имя файла».
- Чаще всего название файла подставится само, но если нет — смотрите пункт 4.
Исключения в названии файлов два:
- (index) — это index.html.
- В любом файле знак вопроса и всё, что после него, писать не нужно.
Скачать можно всё, а можно только то, что вам нужно для работы и экспериментов. Например, если вам нужны только стили и код страницы, сохраняйте файлы .css и (index). Если нужны картинки, заходите в папку pics и сохраняйте всё оттуда.
Что в итоге
Если мы пройдёмся по всем папкам и сохраним в них всё нужное нам, у нас получится локальный слепок сайта. Теперь можно:
- Изучить, как он устроен, что-то отредактировать и увидеть результат у себя на компьютере.
- Открыть файл index.html в браузере, и будет ощущение, что вы зашли на сайт, но с локального компьютера. Сайт откроется по протоколу file:// — это так браузер говорит нам, что файл взялся с нашего компьютера, а не из интернета.
- Запустить MAMP и завести на нём локальную копию сайта для экспериментов. Тогда браузер будет думать, что ходит за этим сайтом в интернет. Можно написать какие-нибудь php-скрипты и оживить сайт.
💡 Важно понимать, что перед нами именно «слепок» — то, что мы бы увидели, если бы сервер сегодня ответил на наш запрос. Если завтра сервер будет отвечать по-другому, мы этого в своей локальной копии не увидим.
Когда ещё это пригодится
Защитить сайт перед наплывом пользователей. С помощью грабберов можно быстро создать неубиваемую статическую копию сайта и временно подменить ей динамическую версию сайта. Это полумера, но может сработать. А вообще вместо этого есть специальные надстройки, которые делают почти то же самое, но более умно, — поищите слово «кеширование».
Сделать копию своего блога, личного сайта или ещё чего-то важного вам, если вы потеряли к нему доступ, но сайт всё ещё на ходу.
Если вы едете туда, где не будет интернета, а вам нужна информация с сайта (например, путеводитель по чужой стране). Помните, что динамические карты и видеоролики так не сохранятся.
Сделать собственный «веб-архив» — это сервис, который ползает по сайтам и делает их «слепки» для истории. Благодаря этому сервису можно посмотреть, как выглядели ваши любимые сайты много лет назад — например, Яндекс.
Часто задаваемые вопросы:
Какой способ копирования сайта выбрать в конкретной ситуации: граббер, ручное сохранение или онлайн-сервис?
Всё зависит от вашей задачи и навыков.
Ручное сохранение (DevTools): идеально, если вам нужно скопировать только вёрстку одной конкретной страницы или вытащить отдельные элементы (картинки, стили). Это даёт самый чистый результат, но требует времени. Если же вам нужен просто голый HTML-файл без стилей и картинок, откройте страницу, нажмите Ctrl+S (или через меню «Сохранить как»), и браузер загрузит HTML-файл на ваш компьютер.
Специальные программы-грабберы (HTTrack, SiteSucker): лучший выбор для создания полной автономной копии сайта (бэкапа) со всеми вложенными страницами.
Консольные утилиты (Wget, cURL): выбор системных администраторов. Позволяет скачать сайт одной командой, но требует навыков работы с терминалом.
Онлайн-сервисы и расширения: подходят для быстрой загрузки контента «здесь и сейчас», если нет желания устанавливать софт, но качество кода может быть хуже, чем при ручном парсинге.
1. Браузерные расширения. Работают прямо в вашем браузере, поэтому видят сайт так же, как вы, включая закрытые разделы, если вы залогинены.
- SingleFile (Chrome/Firefox): упаковывает всю страницу (картинки, стили, шрифты) в один HTML-файл. Очень удобно хранить и пересылать.
- Save Page WE: аналог, сохраняет страницу как есть, делает её автономной.
2. Онлайн-сервисы. Вы вставляете ссылку, сервис скачивает файлы и отдаёт вам ZIP-архив:
- SaveWeb2Zip: простой сервис, который выкачивает HTML, CSS и картинки. Хорошо справляется с простыми лендингами.
- PDFmyURL: если вам не нужен код, а только визуал — проще сохранить сайт в PDF.
Важно: онлайн-сервисы хуже справляются со сложными сайтами (React/Vue), потому что «видят» их своим роботом, а не вашим браузером. Если вёрстка поехала — используйте расширение SingleFile.
Можно ли скопировать сайт с динамическим контентом (на React, Vue.js или с AJAX-подгрузкой), и если да, то как?
Обычные грабберы (wget, HTTrack) тут бессильны, потому что они скачивают только исходный HTML, а в SPA-приложениях контент генерируется JavaScript’ом уже в браузере. Вы скачаете пустую страницу.
Чтобы скопировать такой сайт, вам нужны инструменты, которые умеют выполнять JS:
- Headless-браузеры (Puppeteer, Selenium): это программы, которые запускают настоящий Chrome без окна, дожидаются полной загрузки скриптов и только потом сохраняют готовый HTML.
- Специализированные сервисы: некоторые платные парсеры, например ScrapingBee, умеют рендерить JS на своей стороне.
- Браузерные расширения (SingleFile): самый простой способ для новичка. Расширение делает «моментальный снимок» (снэпшот уже отрисованной страницы прямо в вашем браузере и сохраняет его в один файл.
Что делать, если скопированный сайт локально отображается некорректно (не видно картинок, сломаны стили)?
Чаще всего проблема в том, что браузеры ограничивают работу файлов, открытых напрямую с диска (протокол file://). Из-за этого могут не грузиться шрифты, SVG или скрипты и возникают CORS-ошибки.
Чек-лист по починке:
- Запустите локальный сервер. Вместо того чтобы кликать по index.html, откройте папку с сайтом в терминале и запустите python3 -m http.server. Сайт откроется по адресу http://localhost:8000 и будет работать корректно.
- Проверьте пути. Если картинки лежат в папке images, а в коде написано /images/logo.png со слешем в начале, локально это может не сработать. Слеш в начале означает «корень диска», а не «корень сайта». Уберите первый слеш.
- Внешние ресурсы. Если стили или шрифты подключаются с внешних CDN, например fonts.googleapis.com, убедитесь, что у вас есть интернет. Грабберы часто не скачивают внешние ресурсы, оставляя их ссылками.
