#

Temas

• Comandos/Pasos
• Pasos para comenzar un proyecto
• Atajos de package.json
• Instrucciones

🔼 Regresar

Comandos/Pasos

Trae dependencias

1. echo '# Page header' > index.md: crear un archivos Markdown “index.md”
2. npx @11ty/eleventy: trae las dependencias
3. npx @11ty/eleventy --serve: servidor

🔼 Regresar

Pasos para comenzar un proyecto

1. npm init -y: instala package.json de NodeJs.
2. npm install @11ty/eleventy --save-dev: dependencias.
3. npx @11ty/eleventy --serve: crea servidor (como live server).
4. npm run clean: borrar antes de desplegar/subir a producción.

🔼 Regresar

Atajos de package json

"scripts": {
    "install": "npm install @11ty/eleventy --save-dev",
    "start": "npx @11ty/eleventy --serve --port=7777",
    "clean": "rm -rf docs",
    "deploy": "npx @11ty/eleventy --pathprefix=/",
    "deploy-subdomain": "npx @11ty/eleventy --pathprefix=/SUB-DIRECTORY/"
  },

Estructura de Carpetas

• 📂 code
  • 🔻 Carpetas de origen de @11ty
  • 📁 _data ( poder guardar datos tipo json )
  • 📁 _includes ( Estructura de página )
  • 🔻 Carpetas adicionales
  • 📁 css
  • 📁 img
  • 📁 js

Para contenido de páginas uso Nunjucks/YAML

Para todos artículos de blog uso Markdown

Subir proyectos a GitHub Pages

Starter Project 11ty + GitHub Pages.

🔼 Regresar

Instrucciones

1. Clona este repositorio.

   git clone https://github.com/jonmircha/starter-project-eleventy-github-pages.git
   

2. Instala las dependencias.

   npm install
   

3. Iniciar el ambiente de desarrollo.

   npm start
   

4. Comienza a crear el contenido de tu sitio.
5. Cuando termines recuerda modificar en el package.json el contenido del comando deploy-subdomain, reemplazando el texto:

   --pathprefix=/subdirectory/
   

   por

   --pathprefix=/el-nombre-de-tu-repositorio/
   

6. Limpia la carpeta docs y ejecuta tu despliegue:

   npm run clean
   npm run deploy-subdomain
   

7. Crea un repositorio en tu cuenta de GitHub.
8. Vincula tu carpeta con tu repositorio.
9. Sube el contenido a GitHub.
10. Configura el Servicio de GitHub Pages.
11. Feliz despliegue 🥳 🦡🎈.

Aquí puedes ver la demo de este starter project.

También puedes ver mi Curso de 11ty en YouTube, da clic a la siguiente imagen. 👇🏻

🔻Generador de Sitios Estáticos:

• Sitios web sin contenido dinámico.
• Eleventy es un generador de sitios estáticos, lo que significa que toma contenido y plantillas y los combina para producir archivos HTML, CSS y JavaScript estáticos que forman un sitio web completo.

🔻Plantillas:

• Estructuras para la generación de contenido.
• Eleventy admite varias opciones de plantillas, incluyendo HTML simple, Markdown, Nunjucks, Liquid, Handlebars y más. Estas plantillas son archivos que contienen código que se utilizará para generar las páginas del sitio.

🔻Datos:

• Información utilizada en la construcción del sitio.
• Eleventy permite la incorporación de datos en las plantillas desde una variedad de fuentes, como archivos JSON, YAML o JavaScript, así como desde APIs externas o bases de datos.

🔻Colecciones:

• Agrupaciones de contenido relacionado.
• Eleventy permite organizar el contenido en colecciones, que son conjuntos de datos relacionados. Por ejemplo, puedes tener una colección para tus publicaciones de blog y otra para tus páginas de proyectos.

🔻Configuración:

• Ajustes personalizables del funcionamiento de Eleventy.
• Eleventy es altamente configurable a través de su archivo de configuración .eleventy.js. Aquí puedes especificar opciones como directorios de entrada y salida, formatos de plantillas admitidos, y más.

🔻Comandos de línea de comandos (CLI):

• Interfaz de línea de comandos para Eleventy.
• Eleventy incluye una interfaz de línea de comandos que te permite ejecutar diferentes tareas, como construir el sitio, servirlo localmente para desarrollo, y más.

🔻Extensiones y complementos:

• Adiciones para ampliar la funcionalidad de Eleventy.
• Eleventy es extensible mediante el uso de complementos y extensiones que pueden agregar funcionalidades adicionales, como soporte para Sass, minificación de archivos, optimización de imágenes, entre otras cosas.

🔼 Regresar