htmlбогиня
Минималистичный фреймворк для создания веб-сайта, напоминающего 1999 год.
Требования
- Компьютер с доступом в Интернет, текстовый редактор и веб-браузер.
- НПМ
Начиная
- Открыть терминал
-
npm install -g @htmlgoddess/cli
Это установит утилиту командной строки. -
htmlgoddess create path/to/your/new/site - следуйте подсказкам, и вы сразу же приступите к работе.
Сделать
- рефакторинг: изолировать тесты.
- добавить: команду «хост».
- add: команда выбора стиля, позволяющая пользователю изменить тему после создания.
- подвиг: Проверка орфографии.
- feat: автоматический крючок фиксации, срабатывающий при фиксации.
- подвиг: корректировать команды.
- подвиг: команда «домен».
- подвиг: загружаемый исполняемый файл.
- рефакторинг: замените CNAME на конфигурацию yaml для хостинга.
- задача: охват
- конвертировать «документы» в настраиваемые переменные
- Задача: убедиться, что наблюдатель не теряет память.
- ошибка: cli.action все еще выводится на консоль во время тестов.
- подвиг: графический интерфейс
Я не знаю никакого HTML
Это нормально. Посмотрите это видео, чтобы начать.
Меню командной строки
Когда вы запустите npm start , он предоставит вам следующие параметры.
Как это работает
- Файлы в папке «src» компилируются (распечатываются) в статические HTML-файлы в папке «docs».
- Папка
src/templates содержит шаблоны. Они компилируются с папкой содержимого для создания статических HTML-страниц. - Папка
src/content содержит содержимое вашего сайта, которое хранится в html-файлах, представляющих собой фрагменты HTML-кода. - Когда вы запускаете
npm run print (или выбираете «Печать» в меню терминала), он скомпилирует ваш контент и шаблоны в статические HTML-файлы и заново создаст папку документов. (ПРИМЕЧАНИЕ. Все в документах перезаписывается, поэтому сохраняйте содержимое только в каталоге src!) - Вы можете протестировать свой сайт локально, выполнив команду «обслуживать» из меню.
- Когда вы будете готовы развернуть свой сайт, просто выполните
npm run save && npm run publish - Затем вы можете указать своему веб-серверу «документы», будь то Apache, git-страницы, nginx или что-то еще.
- Вы можете добавить любую таблицу стилей, ориентированную на простые элементы HTML, и она должна работать :)
Шаблоны
- Теги в шаблоне, которые являются самозакрывающимися, например
<head /> или <main /> будут искать файлы шаблона, соответствующие тому же имени; либо каталог с индексом html, например main/index.html , либо просто файл main.html- Теги не обязательно должны быть стандартными HTML. Если вы создадите шаблон foo.html в папке шаблонов, вы можете включить тег
<foo /> , и он заменит содержимое foo. - Компиляция шаблона является рекурсивной, поэтому вы можете использовать шаблоны внутри шаблонов, однако вложенные шаблоны должны представлять собой файлы, содержащиеся внутри родительского шаблона или рядом с ним. В противном случае оно будет просто проигнорировано.
- Тег
<content/> является специальным и будет либо использовать шаблон с тем же именем, что и файл (с каталогом), либо основной шаблон ('templates/index.html). - Когда вы создаете нужные страницы в каталоге контента. Относительные каталоги будут отображаться на вашем сайте с тем же путем. Эта структура позволяет самостоятельно организовывать папки и URL-адреса.
Ограничения
- Нет JS
- Никаких атрибутов, кроме базового href и т. д.
- Никаких занятий. Это то, что позволяет вам добавлять любую таблицу стилей, ориентированную на ванильный CSS.
- Нет SASS/SCSS/LESS. В этом нет необходимости для простых элементов HTML.
- Никаких React, Angular или чего-то еще.
- Или нет, вы можете взломать все, что захотите.
Философия
HTML был задуман как простой и предназначенный для того, чтобы обычные люди могли создавать и использовать что-либо в Интернете. Сегодня сеть довольно интересна, но в то же время она стала довольно сложной, и многие люди остаются позади. Эта CMS возвращается к основам, чтобы дать людям возможность свободно и легко выражать себя.
- Структура пытается использовать как можно больше существующих технологий и стандартов.
- HTML используется для всего (как повелела Богиня HTML) вместо собственных тегов шаблонов и другого специального синтаксиса. Система шаблонов ищет самозакрывающиеся HTML-теги и заменяет их соответствующими шаблонами или содержимым.
- Файловая система используется как для поиска/именования шаблонов, так и для маршрутизации URL-адресов.
- Git служит фактической базой данных для CMS вместе с файлами HTML в контенте и шаблонах.
- Сайт «печатает» в папку «docs», а затем вы «публикуете» в git, где вы можете настроить страницы github. Он не зависит от веб-сервера, поэтому вы можете взять файлы из папки документов, разместить их куда угодно и указать на них веб-сервер.
- Теги не требуют классов или атрибутов. Это позволяет легко добавлять новые темы. Вы можете рассматривать ванильный HTML как интерфейс для применения стилей.
- Использование JavaScript не рекомендуется, поскольку оно не должно быть ненужным, хотя в платформе нет ничего, что мешало бы вам его использовать.
- Вы можете игнорировать все, что я только что написал, и делать все, что захотите. Это Интернет!
Частые проблемы
- Зависимости ведут себя странно:
Лерна скрытно делает некоторые вещи для перекрестного связывания зависимостей. Если вы установите новый модуль и все перестанет работать, попробуйте lerna bootstrap из корня. - Тестовый каталог не очищается. Если тест не пройден, это может помешать очистке тестового каталога. В этом случае запустите
npm run clean-test-dir , который удалит его вручную.
Содействие
- запустите тесты в packages/cli, чтобы убедиться, что все в порядке.
npm run test - Зафиксируйте изменения в моно-репо
npm run commit и следуйте инструкциям. - lernaPublish --force-publish Это опубликует в NPM, а также отправит тег в git.
