Как я научился собирать front-end, чтобы публиковать фотографии
В мае 2019-го Саша Катин одолжил мне «Зенит» своего отца в путешествие во Вьетнам. Это был чуть ли не первый раз, когда мне довелось пользоваться подобным плёночным фотоаппаратом. Несмотря на отсутствие опыта, процесс съёмки мне понравился и дело быстро пошло.
Помимо Вьетнама, «Зенит» успел съездить со мной в Индию и прокатиться по некоторым городам России. Количество фотографий росло и встал вопрос о том, где и в каком виде их публиковать.
Решение
Я практически сразу понял, что хочу размещать свои фотографии у себя на сайте, минуя популярные сервисы фотографий. Но для этого нужен сайт или его подобие.
Сначала, я сделал очень простой шаблон на чистом HTML и размещал готовые снимки в нём у себя на сервере. Этого было достаточно, чтобы отправить кому-нибудь ссылку на фотографии.
Шаблон не имел никакого оформления, не умел адаптироваться под разные разрешения экранов (не было CSS) и отсутствовал lazy load. Так продолжалось около года.
После начала карантина, я практически сразу начал изучать вёрстку по урокам на YouTube. И уже через пару недель после начала, у меня было готово две адаптивные страницы: общая со списком всех фотографий и внутренняя.
Готовый результат можно посмотреть: https://boboshko.me/photos/.
Stack технологий
На самом деле, тут всё просто. Сетка реализована на CSS Grid. Ещё я смотрел на Flexbox, но мне показалось, что оно того не стоит.
Никаких препроцессоров CSS на начальном этапе я не использовал.
Во время эксплуатации шаблона, я понял, что новые фотографии в таком виде добавлять сложно. Из-за этого я решил сильно упростить процесс с помощью шаблонизатора Pug, препроцессора SASS и таск-менеджера Gulp с набором плагинов. За lazy load фотографий отвечает небольшой скрипт — lazysizes.
Теперь, если мне нужно внести какие-то изменения в дизайне, я делаю это в одном месте. А не в десяти, как раньше. И Gulp соберёт весь front-end за меня, используя Pug и SASS. Дополнительные плагины оптимизируют все изображения, HTML и CSS. Всё автоматически.
В качестве веб-сервера я использую Caddy. Он умеет автоматически получать SSL-сертификаты от Let’s Encrypt. К тому же, он очень прост в настройке.
Остаётся подключить какую-нибудь систему CI / CD, чтобы можно было делать автоматические сборки на сервере.
В общем, теперь я могу говорить заветное «сбилдилось»!
Если у вас остались вопросы, вы можете их задать в чате канала: @codeque.