В прошлой заметке мы рассказали об общей структуре проекта и о назначении локального контура разработки: https://t.me/interface31/5178
Сегодня продолжим и более подробно остановимся на его практической реализации и инструментах, которые мы используем.
Сам локальный контур у нас находится на отдельной виртуальной машине с Linux, куда установлен HUGO и все нужные библиотеки и скрипты. Первое, что понадобится вам для управления средой разработки – это SSH-доступ и терминал.
Нам нравится Windows Terminal ,и мы не видим смысла его не использовать. В терминале мы запускаем непосредственно HUGO в режиме отладки и с указанием использовать внешний интерфейс вместо localhost, что даст возможность работать с сайтом непосредственно в браузере основного ПК или любого другого устройства в сети. Это полезно, когда нужно проверить работу на реальном устройстве, скажем, мобильном телефоне.
Это можно сделать командой:
hugo server -D --cleanDestinationDir --baseURL 192.168.3.110 --bind 192.168.3.110
В таком режиме HUGO будет также отображать черновики, что удобно, если вы работаете над статьями не один день или в работе у вас несколько материалов одновременно. Локально вы будете видеть рабочие материалы, но в конечную сборку они не попадут, пока вы не снимете с них статус черновика.
Также терминал используется нами для запуска вспомогательных скриптов, например, для коррекции таксономии, транслитерации или конвертации изображений. Например, я написали при помощи ИИ простой скрипт, который отслеживает появление картинок в папке проекта и автоматически формирует для них AVIF и WebP версии.
Далее – сам проект. Для того, чтобы не придумывать лишних сущностей и не усложнять себе жизнь он опубликован как общая папка через Samba, это позволяет работать с файлами и папками в нем как локальными, а также спокойно добавлять туда новые файлы и изображения.
Теперь самое интересное – создание контента. Для этого используется язык разметки Markdown, он достаточно прост и нагляден, что в целом не требует какого-либо WYSIWYG-редактора, вы и так видите, как будет выглядеть материал, а сам язык разметки позволяет оформлять его даже быстрее, чем применять стили через редактор.
В качестве такого редактора мы используем VS Code, который с установленными языковыми плагинами удобно подсвечивает разметку и делает работу весьма комфортной. Плюс — это мой повседневный инструмент, что уменьшает количество дополнительного софта на ПК.
Также VS Code имеет встроенный git-клиент, что закрывает еще одну потребность – управление репозиторием, как локальным, так и удаленным.
Но это не говорит о том, что такой вариант единственный или безальтернативный. Вы можете использовать любой редактор Markdown и любой git-клиент. Например, некоторые коллеги используют для написания статей Obsidian.
В общем – пробуйте, выбирайте, тут полная свобода. Главное, чтобы ваш инструмент выдавал на выходе правильный Markdown и копировал изображения в папку с файлом (если там есть редактор, позволяющий это делать).
После чего повседневная работа строится следующим образом: открыли терминал, запустили HUGO, скрипты. Перешли в общую папку с проектом, создали или открыли на редактирование нужный файл, работаете. Копируете нужное статическое содержимое, проверяете результат визуально в браузере.
Коммитите изменения в локальный git, рекомендуем это делать почаще. После того, как вы довольны результатом, фиксируете результат в git и отправляете изменения во внешний репозиторий, который после этого запустит автоматический деплой сайта. Но это уже следующая часть истории, о которой поговорим позже.