Все никак не мог собраться с мыслями о том что же за сайт это будет. Но потом таки определился. Это будет нечто подобное ДЗЕНу, только моё личное. Что хочу, то и публикую, не оглядываясь на правила каких либо платформ. Но и запрещенного контента тут не будет. Это будет всего лишь то, что я хотел бы записать для себя (в первую очередь), ну и поделиться с другими людьми.
Итак, у меня свежеустановленный арч:
Фронтенд я буду писать по руководству, скачанному откуда-то с торрентов. Я полностью прошел по этому руководству и вот что у меня получилось:
И на базе этого буду делать нечто своё.
Установка minista и библиотек
Погнали, начинаем с установки необходимого программного обеспечения. Первое что понадобится nodejs и npm. Я думал, устанавливая nodejs что и npm автоматически подтянется... Не подтянулось... Штош...
sudo pacman -S nodejs npm
Установим тогда и то и другое... Проверим наличие данных пакетов:
Для написания фронта я буду использовать фрэймворк minista, это некая надстройка над фреймворком Vite:
Не буду за плюсы и минусы сего продукта, к делу!
Предварительно создам директорию в для нового проекта и перейду в нее. Оттуда, в консоли, выполню команду:
code .
Точка означает что открыть IDE vs_code из текущей директории, у меня выглядит это так:
Установим minista из терминала (можно IDE открыть терминал, а можно и в отдельном эмуляторе терминала, например alacritty):
npm create minista@latest
В оригинале курса по вебвёрстке была указана не последняя версия фреймворка (а 3.1.7), я же буду использовать именно последнюю, дабы посмотреть какие произошли изменения с момента публикования. Возможно пойдет что-то не так...
Далее пишем
npm install (как было указано выше)
После чего можем запустить скрипт:
npm run dev
И если всё норм - можем пройти по адресу http://localhost:5173 и увидеть шаблон министы:
Добавлю еще необходимые в проекте модули:
npm i -D sass postcss-pxtorem
npm i @a1rth/css-normalize classnames imask swiper
Опция -D означает что эти зависимости нужны только в режиме разработки, при компиляции в продакшен они подтягиваться не будут. После всех манипуляций файл package.json выглядит так:
Ну вот, пакеты установлены, нужно настроить сборщик проектов.
Настройка сборщика проектов
Создаем файл jsconfig.json в корне проекта, в нем будет указан псевдоним корневой директории проекта "src"
Так же потребуется файл конфигурации minista.config.js, образец которого берем с сайта министы. В котором нужно добавить импорт и прописать алиас, что указан выше в файле jsconfig.json
Делаем настройку postcss, для преобразования единиц измерения "пиксель" в "rem". Создаем файл postcss.config.js
Подготовка структуры папок проекта
Нам потребуется директория public, в которой будут храниться статические файлы (иконки, картинки и т.д.). Создаем дополнительные папки в директории src: assets, components, constants, layouts, modules, sections, styles, utils. Получается вот такая картина:
Плюс, в директории assets нужно создать еще несколько директорий:
Картинки из images, будут оптимизироваться под современные стандарты и сжиматься до нужного уровня, иконки будут собираться в одну большую иконку - спрайт.
Scss-константы и функции
Создадим файлы constants.scss и functions.scss директории src/styles/helpers (helpers нужно создать! где будут храниться вспомогательные файлы)
Данные функции будут в дальнейшем постоянно использоваться при определении размеров элементов на странице. Так как сайт будет автоматически изменяться при изменении размеров экрана с десктоп-ноутбук-планшет-телефон.
Файл mixins.scss
Файл media.scss
После написания четырех вспомогательных файлов constants.scss, functions.scss, media.scss, mixins.scss объединим их в один index.scss
И подключим директорию helpers в файле minista.config.js
Добавим файл нормализации стилей. Для этого в папке styles создадим файл index.js где импортируем библиотеку нормализации стилей:
Подключение шрифтов
Шрифты Manrope находим на google fonts
Распаковываем скачанные шрифты
Но шрифты ttf нам не подходят, их нужно конвертировать. Открываем сайт transfonter.org, загружаем четыре шрифта (все шрифты тоже не нужно). Снимаем галочку с WOFF, оставляем только WOFF2!!!
После конвертации появится ссылка на скачивание шрифтов
Распаковываем файлы шрифтов в директорию /src/assets/fonts
После чего эти шрифты можно прописать в папке /src/styles в файле fonts.scss
После того как файл fonts.scss написан, его нужно подключить в файле index.js там где подключали нормализацию шрифтов (чтобы "два раза не вставать" - тут же и пропишем файлы с глобальными переменными и классами, утилитарными классами - см. ниже):
Запишем глобальные переменные
В директории /src/styles создаем файл variables.scss куда запишем все переменные что будут использоваться в данном проекте.
Пусть пока все переменные будут такими, потом, с развитием сайта, возможно, буду менять цвета на какие-то другие.
Файл utils.scss
Пропишем утилитарные классы:
Файл globals.scss
Работа над общими файлами стилей завершена.
Начинаем верстать наш сайт
Настроим глобальную обертку всех будущих страниц. Сайт будет состоять из трех частей "шапка" - Header, "тело страницы" - Content, "нижняя часть" - Footer. Все эти слои создадим в /src/layouts. Но в начале, создаем файл global.jsx в корне директории src, где и будет находиться шаблон каждой страницы сайта:
Я скачал необходимые favicon с рандомного сайта и сохранил их с соответствующими именами в папку public. Откуда они и будут подтягиваться на мою страничку.
Подключаем модуль Head в папке pages к файлу index.jsx:
Теперь можно даже посмотреть что же получилось, как можно увидеть - подгрузились файлы стилей, иконки, title, язык страницы:
Пишем Header, Content, Footer
Все три слоя будут примерно одинаковы, просто для демонстрации работы этой штуки.
В директории layouts создаем папку Header (обязательно с большой буквы!!!), где будет два файла: index.js и Header.jsx
По такому же принципу и создаем Content, только тут еще и файл стилей добавлен Contents.scss пока пустой, но мы сразу импортируем в Content.jsx:
Footer:
Ну вот, основные слои сайта сформированы, можно их подключить в файле global.jsx:
Поправлю главнуюстраницу сайта, файл index.jsx в директории pages:
После чего, запускаем вебсервер (команда в консоли: npm run dev) , если он еще не запущен и можем видеть начальную разметку сайта, главной страницы:
Ну вот, что-то уже работает. Если возникли ошибки, то надо искать опечатки, у меня это как правило 90% ошибок. До этого момента статьи сделал два экземпляра сайта, в первом не мог найти опечатку... В упор не видел helpers и helpsers.
Ну и нормалайзер стилей (@a1rth/css-normalize) был переработан текущей версии 1.2.4, в отличии от версии 1.1.9 его импорт стал проще:
import '@a1rth/css-normalize' (версия 1.2.4)
import '@a1rth/css-normalize/index.css' (версия 1.1.9)
Может быть и не очень понятно, но я сам прошел по данному руководству и запустил вебсервер с начальной версией сайта. Ошибка была, но это тоже опечатка, и я ее так же долго искал: файл global.jsx обозвал globals.jsx и долго ломал голову - чож не работает!?
Фуф, на сегодня всё!