Eleventy es un generador de sitios estático simple o SSG basado en JavaScript. Lo bueno de Eleventy, es que no tiene configuración por defecto, pero también se puede ejecutar con opciones de configuración; lo que hace que sea totalmente flexible y extremadamente fácil de usar al mismo tiempo.

A diferencia de otros generadores de sitios estáticos, como por ejemplo Jekyll, Eleventy no te obliga a utilizar un motor de plantilla específico. Eleventy trabaja con muchos lenguajes de plantillas diferentes como:

  • HTML (*.html)
  • Markdown (*.md)
  • JavaScript (*.11ty.js)
  • Liquid (*.liquid)
  • Nunjucks (*.njk)
  • Handlebars (*.hbs)
  • Mustache (*.mustache)
  • EJS (*.ejs)
  • Haml (*.html)
  • Pug (*.pug)
  • JavaScript Template Literals (*.jstl)

Se puede optar por utilizar cualquiera de estos lenguajes para la realización de las plantillas y el contenido; y el propio SSG de Eleventy se encarga de reconocer el motor correspondiente a través de la extensión del archivo.

Creando tu primer proyecto con Eleventy

Crea una carpeta para el proyecto

Para crear un nuevo proyecto de Eleventy, solo necesita crear una carpeta vacía:

$ mkdir eleventy-01
$ cd eleventy-01

Crear un archivo package.json

Dentro de esta carpeta de proyecto recién creada, debes crear un archivo inicial para json: package.json, de modo que puedas usar la herramienta de Node.js Package Manager (npm) posteriormente, para la administración de las dependencias:

$ npm init -y

Instalación de Eleventy

Habiendo creado el archivo package.json a continuación debemos agregar el paquete de Eleventy ( @11ty/eleventy ) como una dependencia de desarrollo, dentro de nuestro proyecto, usando el comando npm install:

$ npm install --save-dev @11ty/eleventy

Ejecutando Eleventy

Ahora solamente debes probar que Eleventy ya esta instalado. Ejecuta el comando, y la consola te mostrará una respuesta del número de ficheros creados y el tiempo que ha tardado en ello.

$ npx @11/eleventy

Como aún no se han creado archivos adicional a la carpeta del proyecto, el resultado debería ser de 0 archivos. También puedes iniciar Eleventy en modo de recarga en caliente, utilizando la opción –serve:

$ npx @11/eleventy --serve

En este caso, el comando sigue ejecutándose y está atento a cualquier cambio de archivo de los archivos dentro de la plantilla y dentro de la carpeta del proyecto actual. Si el contenido de un archivo se cambia y luego se guarda, Elevanty reconoce ese cambio automáticamente y genera un nuevo archivo de salida.

Adición de plantillas

Ahora es el momento de ver realmente a Eleventy en acción y eso requiere que agreguemos archivos de plantilla a nuestro proyecto.

Crear una plantilla de diseño

En primer lugar, estamos creando un archivo de plantilla especial, una plantilla de diseño. Al utilizar una plantilla de diseño, puedes ajustar el contenido con un diseño común. Para crear dicha plantilla, primero agregamos una nueva carpeta denominada _includes al proyecto:

$ mkdir _includes

Luego, dentro de esta nueva carpeta _includes, creamos un nuevo archivo vacío con el nombre de mylayout.njk e insertamos el siguiente código de plantilla:

site_title: Mi Primer Sitio de Eleventy
---

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title></title>
    </head>
    <body>
        <h1></h1>
        <hr/>
        <article class="feature-image" >
  <header id="main" style="">
    <div class="title-padder">
      
      <h1 id="%E2%96%B7+ZzFXM%3A+Un+peque%C3%B1o+renderizador+de+m%C3%BAsica+JavaScript" class="title"> ZzFXM: Un pequeño renderizador de música JavaScript</h1>
      


<div class="post-info"><a href="/quien-soy/" target="_blank">
      <img alt="" src="/assets/img/logos/ciberninjas-logo.webp" />
    
    <p class="meta">
      Pablo Álvarez Corredera - August 18, 2020
    </p></a></div>

      
    </div>
  </header>

  <!-- Social media shares -->
  

<div class="share-buttons">
    <ul class="share-buttons">
        <div class="meta">ALÍSTATE <a href="http://feeds.feedburner.com/ciberninjas" rel="alternate" type="application/rss+xml"><i class="fa fa-rss-square fa-2x" aria-hidden="true"></i></a></div>
        <div class="meta">O COMPARTE</div>
        
        <li>
            <a href="https://twitter.com/intent/tweet?text=%E2%96%B7+ZzFXM%3A+Un+peque%C3%B1o+renderizador+de+m%C3%BAsica+JavaScript%20https%3A%2F%2Fciberninjas.com%2Fmicropython-miniplaca-con-python%2F" target="_blank" title="">
			<i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Tweet</span>
		</a>
        </li>
         
        <li>
            <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fciberninjas.com%2Fmicropython-miniplaca-con-python%2F" target="_blank" title=" Facebook">
			<i class="fa fa-facebook-square fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Compartir en Facebook</span>
		</a>
        </li>
          
        <li>
            <a href="https://t.me/share/url?url=https://ciberninjas.com/micropython-miniplaca-con-python/&&s=text=%E2%96%B7+ZzFXM%3A+Un+peque%C3%B1o+renderizador+de+m%C3%BAsica+JavaScript%20%7C%20Ciberninjas" target="_blank" title=" Telegram">
			<i class="fa fa-telegram fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Compartir en Telegram</span>
		</a>
        </li>
         
        <li>
            <a href="http://www.linkedin.com/shareArticle?mini=true&url=https://ciberninjas.com/micropython-miniplaca-con-python/&title=%E2%96%B7+ZzFXM%3A+Un+peque%C3%B1o+renderizador+de+m%C3%BAsica+JavaScript%20%7C%20Ciberninjas&summary=&source=https://ciberninjas.com/micropython-miniplaca-con-python/" target="_blank" title=" LinkedIn">
			<i class="fa fa-linkedin fa-2x" aria-hidden="true"></i>
			<span class="sr-only">Compartir en LinkedIn</span>
		</a>
        </li>
        
    </ul>
</div>



  
  <section class="post-content">
  
    <div class="bootstrap-iso">
    
      <!-- https://micropython.org/ -> Creo que esto es bueno para alguien que comienza con microcontroladores (similar al Arduino)  

Para la creación rápida de prototipos de aplicaciones GUI, LVGL tiene enlaces de micropython: https://github.com/lvgl/lv_micropython

La aplicación más genial de Python en uC que he visto recientemente está en el espacio del teclado mecánico personalizado:
https://github.com/makerdiary/python-keyboard

Seeedstudio proporciona ArduPy para su terminal Wio, que puede generar bibliotecas de micropython desde Arduino C Libs. Por lo tanto, puede escribir código Arduino con micropython en el dispositivo. Como IDE, proporcionan complementos para MS VisualStudo Code.
https://wiki.seeedstudio.com/ArduPy/

Echa un vistazo a uiflow de M5Stack. Es un IDE web que usa micropython para ESP32. Puede utilizar los sensores de arboleda M5stack. El IDE genera código Python que se puede utilizar en cualquier implementación de MicroPython (ESP8266, EPS32, Raspi, CircuitPython, Micro: Bit, lo que sea) y las bibliotecas de Python son todas de código abierto.
https://flow.m5stack.com/



 () buscar tambien Pycopy -->
<!-- TinyGo ( https://github.com/tinygo-org/tinygo ) es el equivalente en Golang de esto para cualquiera que quiera un lenguaje más eficiente (que Python) y simple de usar.
respuesta

	
lloeki Hace 20 horas [-]

De manera similar, hay mruby que está bastante simplificado, aunque no estoy seguro de los requisitos exactos (esos requisitos de micropython son bastante impresionantes)
https://mruby.org/ 


Ya lo hace! (Siempre que el destino admita LLVM)
https://rust-embedded.github.io/book/

 No quiero Python en Arduino, quiero Rust: https://github.com/avr-rust/ruduino
Qué hermoso sería eso; un administrador de paquetes asombroso (Cargo), tipos fuertes, un rendimiento increíblemente rápido, memoria segura y errores menos extraños que son difíciles de depurar en un sistema integrado.


Es un poco más limitado para el rendimiento, pero tal vez Starlark es lo que estás buscando. https://github.com/bazelbuild/starlark
respuesta




-->

<p>ZzFXM: Un pequeño renderizador de música JavaScript, que genera pistas de música estéreo a partir de patrones de notas y datos de instrumentos musicales. Las muestras de instrumentos se crean utilizando una versión modificada, del minúsculo generador de sonido ZzFX de Frank Force.</p>

<p>ZzfxM fue desarrollado para crear música para producciones de tamaño limitado (es decir, juegos js13k). El formato de la canción se basa libremente en el formato MOD del rastreador, utilizando secuencias de patrones repetidos para crear canciones largas a partir de pequeños fragmentos de datos musicales. Las canciones son muy comprimibles. Una vez comprimidos en gzip, son pequeños, por lo general, unos cientos de bytes.</p>

<h2 id="tocando-una-canción"><strong>Tocando una canción</strong></h2>

<p>Las muestras de audio se compilan pasando datos de instrumentos, patrones y secuencias a zzfxM(). La función devuelve un par de matrices que contienen datos de muestra para los canales estéreo izquierdo y derecho. Para reproducir la canción renderizada, llame zzfxP()usando los datos de muestra generados. La zzfxMfunción devuelve un AudioBufferSourceNode , que puede usar para controlar la canción (detenerla, hacer un bucle, etc.).</p>

<h2 id="componiendo-una-canción"><strong>Componiendo una canción</strong></h2>

<p>ZzFXM no viene con herramientas de creación de canciones. Sin embargo, el repositorio contiene un convertidor de canciones para que pueda usar herramientas establecidas, como MilkyTracker o el <a href="https://www.stef.be/bassoontracker/" rel="nofollow,noreferrer">Bassoon Tracker</a> basado en navegador para componer sus canciones (en formato MK MOD) y luego convertirlas a ZzFXM.</p>

<p>Una vez convertidos los datos de la canción, solo necesita crear y asignar sus instrumentos. Todas las canciones de ejemplo de esta página se crearon con este método.</p>

<p>También puede renunciar a las herramientas de autoría y generar canciones de forma procedimental. Consulte el archivo README para obtener detalles sobre el formato de la canción.</p>

<h3 id="relacionados-"><strong>Relacionados</strong> <!-- omit in toc --></h3>

<p><a href="https://ciberninjas.com/librer%C3%ADas%20javascript/2020/01/13/memoria-mejores-proyectos-javascript.html"> Análisis y Memoria 2020: Los mejores proyectos de Javascript</a></p>

<p><a href="https://ciberninjas.com/tensorflow-javascript/"> TensorFlow.js una biblioteca para añadir aprendizaje automático a través de JavaScript</a></p>

<p><a href="https://ciberninjas.com/roma-herramienta-javascript/">🔥  Rome, ¿La Mejor Herramienta para Javascript jamás creada?</a></p>

<p><a href="https://ciberninjas.com/la-historia-y-el-legado-de-jquery/">La historia y el legado de jQuery</a></p>

<p><a href="/amazon/" title="Los Mejores Chollos de Amazon, Ofertas Flash, Black Monday y Amazon Prime Day" class="btn btn-danger btn-lg btn-block" target="_blank" rel="nofollow,noreferrer">🛒 Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!</a></p>

<blockquote>
  <p><strong>Fuente</strong>: <a href="https://keithclark.github.io/ZzFXM/" target="_blank" rel="nofollow,noreferrer">Página de ZzFXM</a> por Kathryn Whitenton de NNGroup.</p>
</blockquote>

    
    </div>
  
  </section>

   <!-- Tag list -->
  
  


<footer>
  <div class="tag-list">
    
      <div class="meta">Etiquetas</div>
    

    
    <a class="button" href="/etiqueta#Electr%C3%B3nica">
      <p><i class="fa fa-tag fa-fw"></i> Electrónica</p>
    </a>
    
    <a class="button" href="/etiqueta#Python">
      <p><i class="fa fa-tag fa-fw"></i> Python</p>
    </a>
    
  </div>
</footer>


</article>

<!-- Disqus -->


<!-- Post navigation -->

  <div id="post-nav">
    
    <div id="previous-post">
        <a alt=" Eleventy: Un generador de sitios estáticos muy simple y minimalista" href="/eleventy-ssg/">
            <p>⬅ Anterior</p>
            ▷ Eleventy: Un generador de sitios estáticos muy simple y minimalista
        </a>
    </div>
    

    
    <div id="next-post">
        <a alt=" Conociendo Ct.js: Un nuevo editor de juegos 2D" href="/editor-juegos-2d/">
            <p>Siguiente ➡</p>
            ▷ Conociendo Ct.js: Un nuevo editor de juegos 2D
        </a>
    </div>
    
</div>



<!-- To change color of links in the page -->
<style>
  

  header#main {
    background-repeat:no-repeat;
   background-image: url('/assets/img/blog/16-renderizar-musica-javascript.webp');
  
  }
</style>

        <hr/>
        <small>by
            <a href="https://ciberninjas.com">Ciberninjas.com</a>
        </small>
    </body>
</html>

Al usar la extensión de archivo njk, estamos indicando que estamos usando el lenguaje de plantillas Nunjucks dentro de este archivo. Si quieres saber más sobre Nunjucks puedes encontrar el sitio web del proyecto y la documentación correspondiente en Mozilla Nunjucks.

El código comienza con una sección preliminar al principio. Dentro de la sección de contenido inicial, puede definir datos que luego se pueden usar en el siguiente código de plantilla. En el ejemplo, estamos usando la sección principal para definir la propiedad site_title que contiene una cadena para el valor del título.

Dentro del código de la plantilla, accedemos a site_title utilizando llaves dobles. El valor de esta propiedad se utiliza para establecer el título de la página.

Creación de plantillas utilizando un diseño

Ahora creemos dos plantillas más (usando Markdown como el lenguaje de la plantilla) usando nuestra plantilla de diseño creada previamente: Cree un nuevo archivo post-01.md en la carpeta del proyecto e inserte el siguiente código de Markdown:

---
layout: mylayout.njk
title: Mi primer post del blog.
---

## 

This is my first blog post! Have much fun using _Eleventy_, an easy and flexible JavaScript-based static site generator.

Estas plantillas, generan una publicación simple sobre un blog, que aún no posee ningun tipo de CSS ni estilo decorativo incluido.

Relacionados

Guía Completa de Generadores de Sitios Estáticos o SSG

🥇 ▷ Jekyll, Aprender desde Cero a Experto en 2020

Generador de Sitios Estáticos

🛒 Los Mejores Chollos de Amazon, ¡Agrégalos a tu Lista de Deseos!

Fuente: Página de ZzFXM por Kathryn Whitenton de NNGroup.