teeny

Teeny: un simple generador de sitios estáticos

️ Descargo de responsabilidad: esta es una herramienta en la que construí un par de horas para generar mi blog personal Yakkomajuri.github.io. No hace mucho en este momento y probablemente nunca.

? Comienzo rápido

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

Para obtener un ejemplo de un proyecto que usa Teeny, consulte el repositorio de mi blog personal.

Historia de fondo

Puedes leer sobre mi motivación para construir Teeny en esta publicación de blog titulada "Por qué construí mi propio generador de sitios estáticos".

Comandos compatibles

Inicializar un proyecto Teeny en el directorio actual

teeny init

Cree los archivos HTML estáticos y agréguelos al public/

teeny build

Iniciar un servidor local de Teeny que escucha los cambios de archivo

teeny develop

? Cómo funciona

Teeny es un generador de sitio estático súper simple construido para satisfacer mis necesidades y solo mis necesidades.

Todo lo que hace es generar páginas basadas en plantillas HTML y contenido de marcado.

Hace muy poco y es fuertemente obstinado ( léase: era demasiado vago para construir manejadores de personalización/condicionales ), pero me ha permitido construir un blog con el que estoy contento extremadamente rápido.

Esencialmente, en realidad solo hay 2 conceptos en los que debe pensar: plantillas y páginas.

Plantillas

Las plantillas son HTML simples y deben agregarse a una templates/ subdirectorio.

Pueden contener un elemento con el page-content de ID, que es donde Teeny agrega el HTML generado al analizar el contenido de Markdown.

Páginas

Markdown es un ciudadano de primera clase en Teeny, por lo que todas las páginas de su sitio web se definen mediante un archivo de Markdown.

Sin embargo, el archivo no necesita tener ningún contenido real, por lo que si desea que una página se define exclusivamente en HTML, solo necesita crear una plantilla que se hace referencia desde un archivo de página.

Para especificar qué plantilla debe usar una página, puede especificarla en la parte delantera de la página, como así:

 ---
template: blog
---

En el ejemplo anterior, Teeny buscará una plantilla llamada blog.html . Si no se especifica una plantilla, Teeny busca un archivo default.html en templates/ y usa eso.

Uso de ejemplo

Aquí hay un ejemplo de Teeny en el trabajo.

Para comenzar un proyecto Teeny, corre teeny init . Esto creará lo siguiente en su directorio actual:

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

If you then run teeny build , you'll end up with this:

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

index.md uses the homepage template, and together they generate index.html . Como es estándar con otros SSGS, los archivos estáticos se sirven de public/ .

También notará que main.js se trasladó a public/ también. Teeny en realidad tomará todos los archivos que no son de plantilla y no páginas de pages/ , templates/ y static/ y los copiarán al public/ , siguiendo la misma estructura del directorio de origen.

La razón de esto es que en realidad no quería tener importaciones "mágicas", donde tienes que importar activos estáticos desde rutas que no corresponden a la estructura del directorio real. Como resultado, decidí que los archivos estáticos solo vivirían dentro de templates/ y pages/ según sea necesario.

Sin embargo, más tarde me rindí al enfoque static/ de directorio, ya que puede haber activos que tanto las páginas como las plantillas quieran usar. Las importaciones de static/ son "magia", lo que significa que debes pensar en la producción de teeny build para que funcionen.

El último comando que adolescente apoya es teeny develop . Esto crea un servidor HTTP a los archivos del servidor desde el public/ subdirectorio.

Escucha los cambios en los archivos y actualiza los archivos estáticos sobre la mosca (ingenuamente, simplemente reconstruyendo todo cada vez que detecta un cambio).

? Potenciales mejoras futuras

Quiero mantener a Teeny lo más pequeño posible. Deliberadamente pongo todo el código en un archivo como un recordatorio para mí mismo de que se supone que esto es una herramienta simple para que yo construya blogs estáticos simples rápidamente.

Sin embargo, podría usar algunas actualizaciones de "experiencia de desarrollador", como un enfoque optimizado para teeny develop en lugar de reconstruir ingenuamente todo, así como algunas mejores opciones de personalización.