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

Эта версия руководства не нуждается в каких-то дополнительных инструментах – только ваш браузер (я предпочитаю хром) и удобный редактор кода (в моем случае Sublime Text 2)

Для демонстрации я взял казалось бы нормальный сайт како-то московского фотографа – я хотел сделать клон лендинг пейджа, потому что у меня часто просят сделать клон одностраничного сайта. Выбор пал на вот это чудо. Я не присмотрелся, а зря – сайт был с кучей ошибок, да и вобще устаревший.

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

Весь процес рипа сайта я заснял на видео, выложил на ютубик:

Видео без коментариев, нет нормального микрофона, все что покупаю даёт посторонний шум;(

Так что опишу вкратце что я делал.

  1. Сохранил страничку, дождался пока все закачается.
  2. Создал папки js, img, css для скриптов, картинок и стилей соответственно. Раскидал скачаные файлы по соответствующим папкам.
  3. С помощью плагина Beatify к редактору Atom причесал код, что бы было лучше видно где что грузится.
  4. Отсортировал в хтмл файле стили и скрипты, все переместил временно в шапку, но обязательно в той последовательности,  какой они грузятся на сайте-доноре.
  5. Изменил ссылки на стили, картинки и скрипты. У нас же они расбросаны по папкам (п.2)
  6. Проверил стили на предмет недокачанных картинок. Это одно из трудоемких дел, довольно скучно. Картинки с ошибками я удалял / коментировал, дабы оно не давало ошибок. Также в стилях были ссылки на другие стили, также докачал
  7. Проверил по скриптам где какая ошибка, подправил где смог, где не смог найти файла – коментировал / удалял
  8. Разобрался с скриптами, удалил где были 404 ошибки, поставил нужную последовательность.
  9. Подправил нехватающие картинки.

Так как это этот рип сайта был для демки, я не доводил уже все до идеала, но убрал все ошибки и сайт отлично работал

1469291557-57762-2-11

Как правило на нормальный рип уходит гораздо больше времени. Сейчас я копировал дизайн с простой посадочной страницы, да и то не до конца, без существеных правок. Когда делаю подобные вещи для себя / под заказ – делаю все идеально, мне нравится делать сайт лучше оригинала)

Что я делаю дополнительно

  • Скрипты, если есть такая возможность обновляю
  • После обновления я их пытаюсь склеить в 1-2 файла (конкатинация), это ускоряет скорость загрузки сайта
  • Стили я проверяю все, вручную. Скачиваю все картинки
  • Причесываю стили, переганяю их в scss, добавляю префиксы для поддержки разных браузеров, чищу мусор, конкатинирую и минифицирую
  • Картинки я оптимизирую

После моего рипа сайта получается полностью готов к натяжке на движок, расширению функционала.

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

Если вы посмотрели видео и хотите попробовать – без проблем, если есть вопросы – пишите, я подскажу. За все время сделал уже штук 400-450 рипов сайтов, опыта предостаточно. Не получилось штуки 2-3.

Если же у вас недостаточно знаний (а они нужны) – я могу вам помочь сделать копию дизайна сайта, натянуть его на cms, изменить под ваши нужды.

Любой каприз;)

2 комментария

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

два × пять =