Как утащить простой сайт за 5 минут

Как утащить простой сайт за 5 минут

Например, чтобы научиться делать так же

Когда начинаешь практиковаться в вёрстке сайтов, может быть очень полезно разобраться, как устроены сайты у других ребят. Вот как это сделать. 

👉 Всё, что мы делаем в этой статье, мы делаем в учебных целях. Если вы просто скопируете себе чужой сайт и будете выдавать его за свой, это может плохо кончиться.

💡 На самом деле всё сказанное в этой статье нужно для тех, кто боится отключения интернета и хочет сохранить у себя на компьютере самую важную информацию. Но эта мысль бредовая сразу на стольких уровнях, что мы стесняемся её произносить вслух. Разве что шёпотом. 

В чём идея

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

❌ Мы не сможем утащить чужие PHP-скрипты и страницы, связанные с данными пользователя (например, не сможем утащить из интернет-магазина рабочую версию корзины с покупками). Для этого нужен доступ к файлам сервера, а этого у нас нет. 

Главный принцип этой работы: когда ваш браузер запрашивает страницу чужого сайта, веб-сервер отправляет ему эту страницу, в буквальном смысле. То же с картинками, стилями и скриптами: каждый раз, когда вы посещаете сайт, вы как будто делаете его копию у себя на компьютере. Браузер получает страницу от сервера и выводит её копию на экран, а в памяти держит исходный код. Разве что он не сохраняет эту страницу на диск, чтобы вы могли её редактировать.

Вот этот последний этап мы и исправим: теперь мы будем сохранять чужие сайты к себе на диск.

Весь процесс покажем на примере сайта ux-posters.ru – простом одностраничном сайте, где есть картинки, стили и скрипты. Автору этого текста пришлось помогать авторам этого сайта с похожей задачей, так что пример свеженький. 

Как утащить простой сайт за 5 минут

Быстрый путь: грабберы

Есть категория программ под названием «веб-грабберы», или «веб-рипперы». Они работают так: 

  1. Ты говоришь программе, на какую страницу сайта зайти. 
  2. Программа собирает все ссылки с этой страницы, переходит по этим ссылкам и строит себе виртуальную карту сайта — то есть пытается понять, сколько на этом сайте страниц и как они связаны.
  3. Потом граббер начинает ползать по этим страницам подряд, запрашивать их у сервера, получать ответы и сохранять ответы на вашем жёстком диске. 
  4. В какой-то момент граббер останавливается, потому что он скачал все доступные ему страницы с этого сайта. 

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

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

❌ Минусы: часто он качает всё без разбора, оставляя на диске много дублей. Также он бессилен с сайтами, в которых контент выводится динамически или имеет нестандартную систему адресации.

💡 В целом грабберы можно использовать, чтобы скачивать сайты библиотек, архивов и других мест, где документов много и всё устроено логично. Например, с помощью граббера можно скачать какую-нибудь классическую книгу из онлайн-библиотеки.

Вот ссылки на грабберы для разных платформ: 

  • HTTrack — старый интерфейс из нулевых, но свою задачу выполняет полностью. Бесплатный и надёжный, работает везде. 
  • Getleft — мультиплатформенный граббер, который пытается выкачивать всё, до чего дотянется, включая PHP-скрипты. 
  • Cyotek WebCopy — для тех, кто любит только Windows, тоже бесплатный.

Как утащить простой сайт за 5 минут
Типичный интерфейс типичного граббера

Сложный путь: ручное сохранение

Допустим, мы хотим сохранить какую-то отдельную страницу сайта или конкретные её части (например, картинки). Но эти картинки как-то так хитро встроены, что вы не можете просто нажать «Сохранить картинку как...». Тогда потребуется ручной метод. 

Заходим на страницу и нажимаем в браузере Ctrl + I (в Виндоус) или ⌥ + ⌘ + I (если у вас мак). Появляется окно «Инспектора», где видна внутренняя структура страницы:

Как утащить простой сайт за 5 минут

Мы видим, что текущий документ в браузере состоит:

  • из страницы index.html;
  • скрипта likely.js;
  • четырёх таблиц стилей;
  • шрифтов, подключённых через сервис Google;
  • папки с картинками.

Шрифты нам скачивать необязательно — сайт и так их подключит с сервера гугла, а всё остальное скачать нужно. Чтобы не создавать хаос на компьютере, создадим сначала папку ux-posters — в ней будет храниться наш сайт. Потом в эту папку сохраняем все файлы таким способом:

  1. Нажимаем правой кнопкой мыши на очередной файл.
  2. Выбираем пункт Save as, или «Сохранить как».
  3. Пишем имя и расширение файла — точно так, как указано в списке.
  4. Если лень писать самому — скопируйте перед этим название файла, нажав правую кнопку мыши и выбрав Copy file name, или «Скопировать имя файла».
  5. Чаще всего название файла подставится само, но если нет — смотрите пункт 4.

Исключения в названии файлов два: 

  1. (index) — это index.html.
  2. В любом файле знак вопроса и всё, что после него, писать не нужно.

Скачать можно всё, а можно только то, что вам нужно для работы и экспериментов. Например, если вам нужны только стили и код страницы, сохраняйте файлы .css и (index). Если нужны картинки, заходите в папку pics и сохраняйте всё оттуда. 

Как утащить простой сайт за 5 минут
Щёлкаем на очередном файле и выбираем «Сохранить как»
Как утащить простой сайт за 5 минут
Выбираем нашу папку для сохранения и пишем имя файла

Что в итоге

Если мы пройдёмся по всем папкам и сохраним в них всё нужное нам, у нас получится локальный слепок сайта. Теперь можно: 

  1. Изучить, как он устроен, что-то отредактировать и увидеть результат у себя на компьютере.
  2. Открыть файл index.html в браузере, и будет ощущение, что вы зашли на сайт, но с локального компьютера. Сайт откроется по протоколу file:// — это так браузер говорит нам, что файл взялся с нашего компьютера, а не из интернета. 
  3. Запустить MAMP и завести на нём локальную копию сайта для экспериментов. Тогда браузер будет думать, что ходит за этим сайтом в интернет. Можно написать какие-нибудь php-скрипты и оживить сайт. 

💡 Важно понимать, что перед нами именно «слепок» — то, что мы бы увидели, если бы сервер сегодня ответил на наш запрос. Если завтра сервер будет отвечать по-другому, мы этого в своей локальной копии не увидим. 

Когда ещё это пригодится

Защитить сайт перед наплывом пользователей. С помощью грабберов можно быстро создать неубиваемую статическую копию сайта и временно подменить ей динамическую версию сайта. Это полумера, но может сработать. А вообще вместо этого есть специальные надстройки, которые делают почти то же самое, но более умно, — поищите слово «кеширование». 

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

Если вы едете туда, где не будет интернета, а вам нужна информация с сайта (например, путеводитель по чужой стране). Помните, что динамические карты и видеоролики так не сохранятся. 

Сделать собственный «веб-архив» — это сервис, который ползает по сайтам и делает их «слепки» для истории. Благодаря этому сервису можно посмотреть, как выглядели ваши любимые сайты много лет назад — например, Яндекс

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Изучить
Веб-разработка — это новый чёрный
Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Как добавить на страницу блок, который можно закрыть (например, баннер)
Как добавить на страницу блок, который можно закрыть (например, баннер)

Рецепт самого бесящего явления в интернете

easy
Пишем программу, которая одобрит вам кредит

Или не одобрит, хехех.

easy
Блокировщик соцсетей, который спасёт вашу продуктивность

И поднимет осознанность.

easy
На что способен менеджер пакетов
На что способен менеджер пакетов

Управляем программами как программисты

easy
Цветной арканоид на JavaScript
Цветной арканоид на JavaScript

Всё как на старых приставках.

hard
Проверяем текст в Главреде
Проверяем текст в Главреде

Добавляем новые возможности через API.

medium
Что будет, если переменную разделить и сразу умножить на одно и то же число
Что будет, если переменную разделить и сразу умножить на одно и то же число

Будет ошибка, которую чертовски сложно отловить

easy
Успокаивающие звуки на любой странице
Успокаивающие звуки на любой странице

Тревожное время требует кода на JavaScript.

easy
глитч-эффект
Проглючило: делаем глитч-эффект на SASS

На это можно смотреть бесконечно.

medium
UX-тест простого калькулятора на JavaScript
UX-тест простого калькулятора на JavaScript

Что скажут UX-тестировщики про наш проект

easy
easy