teeny

Teeny: простой статический генератор сайтов

️ Отказ от ответственности: это инструмент, который я построил за пару часов, чтобы создать мой личный блог yakkomajuri.github.io. Сейчас это мало что делает и, вероятно, никогда не будет.

? Быстрый старт

npm i -g teeny-cli # yarn global add teeny-cli
teeny init && teeny develop

Для примера проекта, использующего Teeny, посмотрите репо моего личного блога.

Предыстория

Вы можете прочитать о моей мотивации для создания Teeny в этом сообщении в блоге под названием «Почему я построил свой собственный статический генератор сайтов».

Поддерживаемые команды

Инициализируйте крошечный проект в текущем каталоге

teeny init

Создайте статические HTML -файлы и добавьте их в public/

teeny build

Запустите локальный крошечный сервер, который прослушивает изменения файла

teeny develop

? Как это работает

Teeny - это супер простой статический генератор сайтов, созданный в соответствии с моими потребностями и только моими потребностями.

Все, что он делает, - это генерировать страницы на основе HTML -шаблонов и содержимого разметки.

Это делает очень мало и сильно самоуверенно ( читай: мне было слишком лениво, чтобы создавать настройку/условные обработчики ), но позволил мне создать блог, которым я доволен очень быстро.

По сути, на самом деле есть только 2 понятия, о которых вам нужно подумать: шаблоны и страницы.

Шаблоны

Шаблоны являются простыми HTML и должны быть добавлены в templates/ подкаталог.

Они могут содержать элемент с page-content , где Teeny добавляет HTML, сгенерированный путем анализа содержимого разметки.

Страницы

Markdown является первоклассным гражданином в Teeny, поэтому все страницы вашего сайта определяются файлом Marckdown.

Файл не должен иметь никакого фактического контента, поэтому, если вы хотите, чтобы страница была определена исключительно в HTML, вам просто нужно создать шаблон, на который ссылается файл страницы.

Чтобы указать, какой шаблон должен использовать страница, вы можете указать его в переднем крае страницы, как так:

 ---
template: blog
---

В приведенном выше примере Teeny будет искать шаблон под названием blog.html . Если шаблон не указан, Teeny ищет файл default.html в templates/ и использует его.

Пример использования

Вот пример подростка на работе.

Чтобы начать крошечный проект, запустите teeny init . Это создаст следующее в вашем текущем каталоге:

 .
├── pages
│   └── index.md
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

Если вы тогда запустите teeny build , вы получите это:

 .
├── pages
│   └── index.md
├── public
│   ├── index.html
│   └── main.js
├── static
│   └── main.js
└── templates
    ├── default.html
    └── homepage.html

index.md использует шаблон homepage , и вместе они генерируют index.html . Как стандартно с другими SSG, статические файлы обслуживаются от public/ .

Вы также заметите, main.js был перенесен на public/ тоже. Teeny на самом деле возьмет все неэлементы и не страничные файлы со pages/ , templates/ и static/ копий их в public/ , следуя той же структуре из каталога происхождения.

Причиной этого является то, что я на самом деле не хотел иметь «магический» импорт, где вы должны импортировать статические активы из путей, которые не соответствуют фактической структуре каталога. В результате я решил, что статические файлы будут жить внутри templates/ и pages/ по мере необходимости.

Позже я сдался подходу static/ каталогов, поскольку могут быть активы, как страницы, так и шаблоны. Импорт из static/ «магии», что означает, что вам нужно подумать о выводе teeny build для их работы.

Последняя команда, которую поддерживает Teeny, - это teeny develop . Это создает HTTP -сервер для файлов сервера из public/ подкаталории.

Он прослушивает изменения в файлах и обновляет статические файлы на лету (наивно, просто восстанавливая все каждый раз, когда обнаруживает изменение).

? Потенциальные будущие улучшения

Я хочу, чтобы подростка была максимально крошечной. Я намеренно поместил весь код в один файл в качестве напоминания для себя, что это должен быть простой инструмент для меня простого инструмента для быстрого создания простых статических блогов.

Тем не менее, он может использовать несколько обновлений «опыта разработчиков», таких как оптимизированный подход к teeny develop вместо того, чтобы наивно восстанавливать все, а также некоторые варианты настройки.