Curso Eleventy 🦡🎈11ty - jonmircha

En este curso te enseño a trabajar con Eleventy, un generador de sitios estáticos rápido, accesible y minimalista.
📦 RECURSOS:

🦡🎈 Links mencionados en el curso:

📝 ÍNDICE:
1. 0:00:00 - Bienvenida al curso
2. 0:02:41 - Introducción a JAM Stack y SSG
3. 0:19:45 - Introducción a Eleventy
4. 0:29:31 - Hola Mundo con Eleventy
5. 0:35:13 - Instalación de Eleventy
6. 0:45:12 - Configuración de Eleventy
7. 0:58:51 - Estructura de carpetas en Eleventy
8. 1:12:04 - Pasando archivos estáticos en Eleventy
9. 1:17:37 - Creando layouts en Eleventy
10. 1:28:45 - Includes en Eleventy
11. 1:35:16 - Agregando CSS, JS y contenido
12. 1:39:38 - Creando un layout para los artículos de blog
13. 1:49:35 - Colecciones en Eleventy
14. 2:05:07 - Datos Globales en Eleventy
15. 2:14:24 - HTML Base Plugin
16. 2:21:34 - Desplegando a GitHub Pages
17. 2:32:50 - Despedida de Curso

#jonmircha #eleventy #11ty

[jonmircha]

Para que puedas escribir HTML dentro de Nunjucks agrega el siguiente atributo a tu archivo de configuración (settings.json) en Visual Studio Code, también no olvides tener instalada la extensión que te recomiendo en el video

"emmet.includeLanguages": {
"javascript": "html",
"md": "html",
"njk": "html"
}

[oscarnatera]

Saludos Jon, claro que seria genial una segunda parte. Sigo viendo contenido en tu canal. Excelente aporte!!

[walterarriaza]

Como siempre, Jon, otro curso grandioso. Muchas gracias por dar siempre lo mejor de ti en cada curso. Creo que a muchos no es encantaría un curso avanzado de generación de sitios estáticos, incluyendo tanto PHP como servidores Apache. Conocer cómo podrían trabajar de la mano tanto el Frontend como el Backend en la generación de sitios estáticos sería increíble.

[nicolasgonzalez]

Muy buen curso Jon!, te siguo desde hace años y te has convertido en mi referente en desarrollo web. Me encantó la idea de Eleventy + PHP. Quedo a la expectativa de ese video!

[soyuntranseunte]

Espectacular! muchas gracias por compartir. Estoy incursionando en 11ty y me vino muy pero muy bien!

[moronsantiago]

Excelente Jon! Gracias por compartir! una herramienta muy interesante, y por supuesto que estaría buena una segunda parte!

[malouco]

Gracias Jon. Impecable!!! el mejor!! como siempre- Esperando una segunda parte. Por ahi con PHP y trabajos de optimización de imágenes y comprimir los archivos. Dar una entrega final que comprenda lo fundamental de SEO. Muchas gracias nuevamente!

[alexmendoza]

Gran aporte estimado, ese estilo minimalista es bastante contagioso ajajaja, estaré atento a las demás clases!

[bgva]

Hola Jon muy interesante, muchas gracias. Sería ideal puedas hacer otros como indicas. Sigue adelante.

[JohannPineda]

Buen vídeo facil de entender, pero cuando subo el codigo a git me da error con las url, y tengo la ruta en el "deploy-subdomain": "npx @11ty/eleventy --pathprefix=/code-pages/", pero no funciona solo me muestra la pagina principal

[domingouribe]

Jon, ya descubrí cómo apuntar a dentro de los directorios para poder ordenar en carpetas los archivos. Se usa un archivo .json con esta estructura:
{

"layout": "layout-post.njk",
"permalink": "/{{page.fileSlug}}"
}
Lo más importante es la propiedad permalink y se pasa el layout, que serían las propiedades en común que podrían tener todas las páginas. Este archivo va dentro de la capeta en donde se guardarán los tipos de archivos, y se debe llamar como la carpeta. Por ejemplo, quiero crear un directorio pages, y el .json se llamará pages.json

[salva-dev]

Me ha encantado. Lo voy a probar para añadir a nuestro stack con lit. Estoy de acuerdo con tu enfoque minimalista. También probaré gracile.js que parece muy simple, no sé si lo probaste. Muchísimas gracias por compartir.

[andrestobio]

Gracias maestro!
Esperando algún curso de wordpress con Headless CMS❤

[nicolascabrera]

Excelente jon! Probaré implementar esta herramienta para sitios estáticos, me pareció super interesante, sería mi primera vez utilizando SSG para un sitio en producción realizado simplemente com HTML, CSS y JS.
La duda que tengo es, ¿cual es el beneficio o diferencia de implementar estas herramientas SSG a con puro HTML, CSS, JS ?
Gracias!

[domingouribe]

Hola Jon! Estoy disfrutando del curso. Sin embargo en los archivos .njk aunque instalé la extensión VSCode no reconoce el html ni Emmet;(

[MarcosLopez-enbl]

¡Hola Jon! Un placer tus cursos. Soy Marcos de Argentina, y estoy interesado en profundizar sobre la seguridad en los sitios web desarrollados con Eleventy. Me gustaría saber cuáles son las mejores prácticas para asegurar estos sitios y si hay alguna particularidad en la seguridad que deberíamos considerar específicamente para Eleventy. Aprecio cualquier consejo o recurso que puedas compartir. ¡Gracias de antemano!

[pablozallio]

Hola Jon, que opinas de AlpineJS, lo haz utilizado alguna vez??

[j.b.]

Excelente curso de 11ty, me ha encantado esta herramienta. Espero la segunda parte. Profe, ¿por casualidad tienes pensado en dar algún curso introductorio a Angular?, sería interesante.

[JulioVinachi]

Que animal es? Cómo se le dice? Por acá se le. Dice ravi pelado creo 😅

[EddieVillegas-lu]

Vas a votar por maynes, Xochitl o Claudia ?