Из князи в грязи: Путь создания сайта на Hugo
Прежде чем погрузиться в приключение с Hugo, позвольте обрисовать картину. Раньше meshvoid.com работал на базе сайта из ArtStation Pro. Казалось, это быстрое решение, верно? Ну, не совсем. Хотя выглядело всё довольно прилично, я быстро упёрся в стену кастомизации – просто недостаточно тонкого контроля для того, кто любит ковыряться в настройках. Итак, решение принято: пора брать бразды правления в свои руки. Шаг первый включал запуск моего верного цифрового абордажного крюка, HTTrack, чтобы заскрэйпить весь контент со старого сайта на ArtStation. Своеобразная спасательная операция по восстановлению утерянных данных! Только после успешного скачивания всего я смог начать пересобирать его здесь, по кусочкам, на Hugo.
Примерно 3 года назад я начал более серьёзно изучать программирование самостоятельно, написав свой аддон для риггинга в Blender. Когда я впервые решил создать собственный сайт-портфолио, я подумал: «Насколько это может быть сложно?» – полагая, что это будет проще простого, учитывая мой предыдущий опыт программирования на Python и возни с различными сайтами на CMS (в основном, такие кошмарные цмски вроде Joomla и WordPress).
Несмотря на мою первоначальную самоуверенность, процесс написания сайта с нуля на фреймворке Hugo оказался довольно масштабной затеей, о которой я попытаюсь рассказать в этом посте.
Решение: Зачем писать сайт с нуля самому?
Итак, почему я выбрал «сложный режим» создания сайта с нуля вместо использования одного из этих модных конструкторов сайтов, натягивания темы на WordPress или даже адаптации одной из множества готовых тем для Hugo? Причина проста: я хотел научиться, в первую очередь основам фронтенда и деплоймента веб-проектов. И, как мне кажется, я научился! По пути я значительно лучше освоил такие технологии, как:
Hugo
Этот генератор статичных сайтов по праву считается одним из самых быстрых. Его ядро написано на Go, оптимизировано для скорости, гибкости и предоставления точного контроля (иногда слишком большого контроля, ха-ха). Вы, вероятно, слышали о нём; если нет, вот популярное видео с YouTube-канала Firebase, объясняющее, что такое Hugo за 100 секунд.
К сожалению, данное видео только на английском языке, но я думаю, кто захочет, тот разберется. Также заметил, что документация Hugo тоже вся только на английском языке, хотя и очень хорошо структурирована. Вероятно, поэтому данный фрэймворк\генератор статических сайтов не настолько распространен в русскоязычном сегменте интернета. Да, что там греха таить, чтобы пользоваться этим фреймворком, нужно быть на “ты” с консолью, желательно уметь пользоваться каким-нибудь IDE (лично я использую VSCodium, это как VSCode, только без венерических заболеваний от Microsoft), в котором будешь редактировать контент, и хотя бы немного знать разметку HTML и CSS.
CSS
Ах, CSS. Секретный соус, позволяющий сделать так, чтобы всё выглядело хотя бы наполовину прилично, не сходя при этом с ума. Имея практически нулевой опыт работы с версткой, мне пришлось устранять пробелы в знаниях. Я прошёл различные курсы по CSS и адаптивному дизайну – к счастью, сейчас полно отличных совершенно бесплатных образовательных ресурсов. Лично я сильно опирался на бесплатные курсы от w3schools.
По моему мнению, w3schools — одно из лучших мест для начала изучения фронтенд-разработки. Вам даже не обязательно проходить все уроки, чтобы начать редактировать стиль своего сайта. По факту, я учился в основном тем, что просто сразу писал файл styles.css для этого сайта, методом проб и ошибок разобрался с основами. На том же w3schools есть шаблоны CSS, которые также могут помочь быстрее структурировать ваш веб-проект.
JavaScript
Чтобы добавить немного интерактивности на сайт – такие вещи, как меню “гамбургер” (хз как на русском) для мобил, анимированную галерею, анимацию загрузки контента страницы и другие динамические элементы – мне пришлось написать немного JavaScript-кода. Ничего сверхсложного, просто простые скрипты, хранящиеся в папках static/js моего Hugo-проекта. Отличная особенность Hugo в том, что он берёт на себя “инфраструктурную” и организационную работу. Все что нужно это внимательно читать документацию Hugo, чаще практиковаться, и в конце концов вы начнёте входить в состояние потока и работа пойдет как по маслу. Как только вы поймёте логику Hugo, вы получите полный контроль над структурой сайта, и с опытом сможете превратить простой статичный сайт во что-то гораздо более способное.
Адаптивный дизайн
Было увлекательно взглянуть на принципы адаптивного веб-дизайна с точки зрения разработчика, а не чисто как художник. Раньше я воспринимал макеты дизайна просто как статические графические элементы. Но как только вы понимаете основы CSS, такие как Flexbox и Grid, многие проблемы реализации дизайна становятся почти тривиальными. Сейчас многое стандартизировано; меньше нужды в избыточном использовании изображений, иконки в основном SVG, и всё сводится к редактированию CSS. Можно при помощи контролировать дизайн элементов интерфейса, кнопок, анимацию. Думаю, это прокачивает и навык дизайна интерфейсов.
К концу проекта я прошёл путь от «Что такое медиа-запросы?» до сопосбности объяснить, почему flex-wrap: wrap — невоспетый герой адаптивной верстки.
Уроки: Мудрость, добытая тяжким трудом
Вот несколько программерских (фронтэндерских) крупиц мудрости, которые я с постепенно извлёк во время возрождения сайта meshvoid.com:
-
Начинай с малого (я серьёзно): Сначала сосредоточься на базовой структуре. Напиши нормальный README для репозитория твоего проекта, опиши используемый стек технологий и оставь напоминания для себя будущего, забывчивого. Семь раз отмерь, отрежь - один.
- Не пытайся сразу впихнуть все крутые фичи, которые видишь на других сайтах. Сначала добейся стабильной работы основ. Добавляй навороты позже.
- Не унывай из-за длинного списка дел. Ты будешь быстрее справляться с задачами по мере накопления опыта. Главное прогресс и движение, а не совершенство.
- Всегда делай личные заметки или документацию при изучении чего-то нового. Храни их где-нибудь в доступном месте (например, в отдельном репозитории на GitHub). Никогда не полагайся исключительно на память или на перечитывание официальной документации спустя месяцы.
-
Полюби дебаггинг: Это редко когда весело, часто раздражает, но абсолютно необходимо. Логи в консоли браузера — твои помощники.
- Не сдавайся, когда что-то ломается (а оно будет ломаться). Отлаживай, переписывай, переосмысливай. Иногда решение проблемы приводит к гораздо лучшему результату и более глубокому пониманию, чем твой первоначальный план.
-
Тестируй рано, тестируй часто, тестируй везде: Проверяй свой сайт на разных браузерах и устройствах (телефон, планшет) на ранних этапах разработки, а не только в конце. Поверь мне, это спасает от сильной головной боли и лихорадочных исправлений в последнюю минуту.
-
Делай перерывы (Обязательно!): Кодинг-марафоны звучат круто, пока ты не осознаешь, что уже два часа тупо смотришь на одну и ту же точку с запятой. Встань, разомнись, сделай пару отжиманий, выпей чаю (кофе я не признаю). Простое пяленье не решит проблему, свежий взгляд — да.
Финальные мысли: Стоило ли оно того?
Абсолютно. Были ли моменты, когда я ставил под сомнения свои жизненные решения, борясь с CSS-версточкой? Определённо. Но создание этого сайта научило меня очень многому о веб-разработке и, честно говоря, о моей собственном упорстве. Теперь я могу с уверенностью сказать, что заслужил свой значок «Начинающий фронтенд-разработчик, который иногда понимает, что делает».
Если вы подумываете о подобном путешествии, я говорю — дерзайте! Просто не забудьте запастись чаем, терпением, возможно, боксерской грушей и определённо готовностью часто задавать поисковикам очень специфические вопросы. Вам понадобится всё вышеперечисленное. Удачи!
Поделиться в социальных сетях:
