NG Interiors: перенос портфолио с Figma Sites на собственный хостинг

Задача

Студия дизайна интерьеров NG Interiors собрала сайт-портфолио в Figma Sites. Сайт нужно было перенести на собственный хостинг студии, не меняя внешний вид и навигацию. У Figma Sites нет кнопки «скачать сайт»: страница собирается в браузере специальным скриптом из данных, которые подгружаются с серверов Figma.

Как снята копия

Скрипт обходит сайт начиная с карты сайта и главной, скачивает страницы, стили, шрифты, скрипты и данные страниц, находит в них ссылки на остальные файлы и повторяет это, пока не соберёт всё. В итоге получилась полная статическая копия: главная и шесть страниц проектов, которая работает без обращений к Figma. Скрипт можно запускать повторно, он докачивает только недостающее и пишет отчёт.

Что пришлось обойти

• Данные страниц. Скрипт Figma запрашивает данные по адресу страницы. Обычный хостинг добавляет к адресу косую черту, данные не находятся, и страница остаётся пустой. Решено настройкой сервера: страница отдаётся без перенаправления, а данные продублированы по второму адресу.
• Правки поверх копии. Figma при загрузке перерисовывает страницу и возвращает исходный текст. Поэтому пункт меню пришлось переименовать и в разметке, и во всех файлах данных, а форма заявки вставлена вне области, которой управляет скрипт Figma.
• Неудачная попытка. Правка самого скрипта Figma, чтобы он запрашивал уменьшенные картинки, привела к двойной загрузке изображений на телефонах. Её пришлось откатить и оставить скрипт нетронутым.

Фотографии: с 915 до 66 МБ

Портфолио дизайнера интерьеров состоит из больших фотографий, и в исходной выгрузке они занимали 915 МБ в формате PNG. Фотографии переведены в WebP с ограничением размера, и сайт стал весить 66 МБ, без единой битой ссылки.

Для телефонов подготовлены уменьшенные версии каждого изображения. Главная на мобильном стала легче на 61%, на компьютере на 43%. Уменьшенные версии работают при прямом открытии страницы; при переходах внутри сайта скрипт Figma по-прежнему берёт полные изображения.

Что добавлено поверх копии

• Форма заявки в модальном окне: открывается с существующих кнопок «Написать нам» и «Связаться». Заявка уходит на почту студии, от спама защищают поле-ловушка и ограничение частоты.
• Политика конфиденциальности и согласие на обработку данных.
• Своя страница 404, карта сайта и правила для поисковиков.
• Кэширование: картинки и шрифты кэшируются надолго, страницы на несколько минут.

Как устроено

Python-скрипты для снятия копии и обработки картинок, PHP для формы, настройки Apache на обычном хостинге. Вся сборка запускается одной командой. Сайт работает на домене студии.

Скриншоты

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