{"id":65225,"date":"2023-04-27T12:34:09","date_gmt":"2023-04-27T10:34:09","guid":{"rendered":"https:\/\/kinsta.com\/es\/?p=65225&#038;preview=true&#038;preview_id=65225"},"modified":"2023-08-23T17:31:59","modified_gmt":"2023-08-23T15:31:59","slug":"eleventy","status":"publish","type":"post","link":"https:\/\/kinsta.com\/es\/blog\/eleventy\/","title":{"rendered":"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)"},"content":{"rendered":"<p>Con el auge de los <a href=\"https:\/\/kinsta.com\/es\/blog\/generadores-de-sitios-estaticos\/\">generadores de sitios est\u00e1ticos<\/a> (SSG &#8211; Static Site Generators) como Eleventy, crear un sitio web est\u00e1tico con estilo y eficaz nunca ha sido tan f\u00e1cil.<\/p>\n<p>En este art\u00edculo, exploraremos c\u00f3mo utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.<\/p>\n<p>Tambi\u00e9n aprender\u00e1s a desplegar tu sitio web est\u00e1tico directamente <a href=\"https:\/\/docs.sevalla.com\/applications\/get-started\/add-an-application\">desde tu repositorio de GitHub a la plataforma de Alojamiento de Aplicaciones de Kinsta<\/a>, consiguiendo que tu sitio web funcione r\u00e1pidamente en un dominio <em>.kinsta.app<\/em> gratuito.<\/p>\n<p>Aqu\u00ed tienes una <a href=\"https:\/\/ty-portfolio-lvjy7.kinsta.app\/\" target=\"_blank\" rel=\"noopener noreferrer\">demostraci\u00f3n en vivo<\/a> del sitio web est\u00e1tico que construir\u00e1s con Eleventy.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/11ty-portfolio-static-site.jpg\" alt=\"Portafolio est\u00e1tico con estilo\" width=\"1600\" height=\"788\"><figcaption class=\"wp-caption-text\">Portafolio est\u00e1tico con estilo<\/figcaption><\/figure>\n<p>Puedes acceder al <a href=\"https:\/\/github.com\/kinsta\/11ty-portfolio\" target=\"_blank\" rel=\"noopener noreferrer\">repositorio GitHub<\/a> de este proyecto si quieres echarle un vistazo m\u00e1s de cerca.<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>\u00bfQu\u00e9 es Eleventy?<\/h2>\n<p>Eleventy, tambi\u00e9n conocido como 11ty, es un generador de sitios est\u00e1ticos que crea sitios web basados en <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-el-html\/\">HTML<\/a>, <a href=\"https:\/\/kinsta.com\/es\/blog\/buenas-practicas-css\/\">CSS<\/a> y <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a> sin necesidad de bases de datos ni lenguajes de programaci\u00f3n <a href=\"https:\/\/kinsta.com\/es\/blog\/backend-vs-frontend\/\">backend<\/a>.<\/p>\n<p>Eleventy es conocido por su sencillez y flexibilidad, ya que no te obliga a utilizar un \u00fanico lenguaje de plantillas o framework. Es compatible con m\u00e1s de 10 lenguajes de plantillas e incluso te permite utilizar tantos como desees en un mismo proyecto:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/11ty-template-languages.jpg\" alt=\"Once lenguajes de plantillas\" width=\"1600\" height=\"226\"><figcaption class=\"wp-caption-text\">Once lenguajes de plantillas<\/figcaption><\/figure>\n<p>Eleventy, como la mayor\u00eda de los SSG, te permite construir el contenido de tu sitio est\u00e1tico utilizando componentes reutilizables en lugar de crear documentos HTML completos para cada p\u00e1gina.<\/p>\n\n<h2>C\u00f3mo Instalar Eleventy<\/h2>\n<p>Es f\u00e1cil instalar Eleventy. Aqu\u00ed tienes c\u00f3mo:<\/p>\n<ol start=\"1\">\n<li>Aseg\u00farate de que tienes <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-node-js\/\">Node.js<\/a> instalado en tu ordenador. Puedes comprobarlo ejecutando el comando <code>node -v<\/code> en tu terminal. \u00bfNo lo tienes? Aqu\u00ed tienes <a href=\"https:\/\/kinsta.com\/es\/blog\/como-instalar-node-js\/\">c\u00f3mo instalar Node.js<\/a> en tu ordenador.<\/li>\n<li>Crea un nuevo directorio para tu proyecto.<\/li>\n<li>Abre tu terminal y ejecuta el comando <code>npm init -y<\/code> en el directorio de tu proyecto para inicializar un nuevo proyecto Node.js, creando un archivo <strong>package.json<\/strong> con la configuraci\u00f3n predeterminada.<\/li>\n<li>Ejecuta el comando <code>npm install @11ty\/eleventy --save-dev<\/code> para instalar el paquete como dependencia de desarrollo en tu proyecto.<\/li>\n<li>\u00a1Ya est\u00e1! Ahora puedes ejecutar Eleventy ejecutando el comando <code>npx @11ty\/eleventy<\/code> en el directorio de tu proyecto. Esto generar\u00e1 los archivos de tu sitio y los mostrar\u00e1 en un directorio <strong>_site<\/strong> (o el directorio que hayas configurado) en la carpeta de tu proyecto.<\/li>\n<\/ol>\n<p><strong>Nota:<\/strong> Cuando ejecutes el comando <code>npx @11ty\/eleventy<\/code>. Obtendr\u00e1s este resultado:<\/p>\n<pre><code class=\"language-bash\">[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)<\/code><\/pre>\n<p>Aqu\u00ed se escriben 0 archivos porque no hay plantillas en la carpeta de tu proyecto.<\/p>\n<h2>Comandos y Configuraci\u00f3n de Eleventy<\/h2>\n<p>Ya tienes tu proyecto Eleventy creado, pero eso no es todo. Necesitas crear algunas configuraciones y conocer algunos comandos b\u00e1sicos para que tu sitio est\u00e1tico pueda ser servido al navegador.<\/p>\n<h3>Comandos Eleventy<\/h3>\n<p>\u00c9stos son algunos de los comandos clave de Eleventy que debes conocer:<\/p>\n<ul>\n<li><code>npx eleventy<\/code>: Este comando se utiliza para construir tu sitio y mostrar el resultado en la carpeta <strong>_site<\/strong> (o en la carpeta que hayas configurado como directorio de salida).<\/li>\n<li><code>npx @11ty\/eleventy --serve<\/code>: Este comando iniciar\u00e1 un servidor local para que puedas previsualizar tu sitio en tu navegador. Cuando realices cualquier cambio en tu sitio, tu proyecto se reconstruir\u00e1 autom\u00e1ticamente y se actualizar\u00e1 en tu navegador.<\/li>\n<li><code>npx @11ty\/eleventy --serve --port=8081<\/code>: Este comando inicia el servidor Eleventy y especifica un puerto personalizado en el que escuchar\u00e1 el servidor.<\/li>\n<li><code>npx @11ty\/eleventy --watch<\/code>: Este comando vigilar\u00e1 los archivos de tu proyecto en busca de cambios y reconstruir\u00e1 autom\u00e1ticamente tu sitio cuando sea necesario.<\/li>\n<\/ul>\n<p>No tienes que memorizar estos comandos porque puedes a\u00f1adirlos a los comandos generales en el objeto scripts de tu archivo package.json:<\/p>\n<pre><code class=\"language-bash\">\"scripts\": {\n    \"start\": \"npx @11ty\/eleventy --serve\",\n    \"watch\": \"npx @11ty\/eleventy --watch\",\n    \"build\": \"npx eleventy\"\n  },<\/code><\/pre>\n<p>Ahora puedes utilizar <code>npm start<\/code> para servir tu aplicaci\u00f3n en lugar de <code>npx @11ty\/eleventy --serve<\/code>, y tambi\u00e9n puedes ejecutar <code>npm run build<\/code> en lugar de <code>npx eleventy<\/code>.<\/p>\n<h3>C\u00f3mo configurar tu sitio est\u00e1tico con Eleventy<\/h3>\n<p>Eleventy es \u00abzero-config\u00bb por defecto y tiene opciones de configuraci\u00f3n flexibles. Aqu\u00ed tienes algunas opciones de configuraci\u00f3n clave que debes conocer:<\/p>\n<ul>\n<li><strong>input:<\/strong> Esta opci\u00f3n te permite especificar el directorio de los archivos de tu proyecto. La mejor pr\u00e1ctica es utilizar <strong>src<\/strong>.<\/li>\n<li><strong>output:<\/strong> Esta opci\u00f3n te permite especificar el directorio de salida de tu sitio construido. Por defecto, Eleventy da salida a la carpeta <strong>_site<\/strong>. (Muchos desarrolladores utilizan <strong>public<\/strong>).<\/li>\n<li><strong>templateFormats:<\/strong> Esta opci\u00f3n te permite especificar qu\u00e9 extensiones de archivo deben procesarse como plantillas. Por defecto, Eleventy procesa los archivos <strong>.html<\/strong>, <strong>.njk<\/strong> y <strong>.md<\/strong> como plantillas.<\/li>\n<\/ul>\n<p>Estos son s\u00f3lo algunos comandos y opciones de configuraci\u00f3n disponibles en Eleventy. Para configurar tu proyecto Eleventy, crea un archivo <strong>.eleventy.js<\/strong> en la ra\u00edz de tu proyecto. A continuaci\u00f3n, pega este c\u00f3digo en el archivo para dar a tu proyecto una estructura que incluya directorios de entrada y salida:<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    return {\n        dir: {\n            input: 'src',\n            output: 'public',\n        },\n    };\n};<\/code><\/pre>\n<p><strong>Nota:<\/strong> <code>eleventyConfig<\/code> se pasa como argumento, proporcionando m\u00e1s opciones de configuraci\u00f3n que se utilizar\u00e1n m\u00e1s adelante en este proyecto.<\/p>\n<h2>C\u00f3mo Previsualizar un Sitio Eleventy<\/h2>\n<p>Ahora conoces algunos comandos clave que pueden utilizarse para previsualizar tu sitio web est\u00e1tico Eleventy, pero cuando ejecutas el comando, como <code>npx @11ty\/eleventy<\/code>, no se sirve nada. Esto se debe a que no tienes ning\u00fan archivo de plantilla.<\/p>\n<p>Puedes crear una carpeta <strong>src<\/strong> en la carpeta ra\u00edz de tu proyecto, y luego crear algunos archivos de plantilla como <strong>index.html<\/strong> o utilizar tu lenguaje de plantillas preferido para representar la p\u00e1gina de inicio:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;title&gt;Eleventy Static Site&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        Hello World!\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Si ahora ejecutas el comando <code>npx @11ty\/eleventy<\/code>, se crear\u00e1 una carpeta <strong>p\u00fablica<\/strong> con el archivo est\u00e1tico generado. Seguramente querr\u00e1s que esto se sirva a tu navegador y habilitar algunas funciones de recarga en caliente. Esto es posible ejecutando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">npx @11ty\/eleventy --serve<\/code><\/pre>\n<p>Esto servir\u00e1 tu sitio en http:\/\/localhost:8080\/.<\/p>\n<p>Estos comandos son bastante dif\u00edciles de memorizar y utilizar siempre. Ya los has a\u00f1adido a la sintaxis familiar en tu archivo <strong>package.json<\/strong>, as\u00ed que puedes utilizar <code>npm start<\/code> para servir tu aplicaci\u00f3n en <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/.<\/a><\/p>\n<h2>C\u00f3mo Crear un Sitio Web Est\u00e1tico de Portafolio con Eleventy<\/h2>\n<p>Ahora ya sabes c\u00f3mo crear un sitio est\u00e1tico con Eleventy. Vamos a crear el proyecto del portafolio.<\/p>\n<p>Puedes crear un nuevo proyecto Eleventy desde cero, o querr\u00e1s im\u00e1genes, CSS y contenido real para tu proyecto, as\u00ed que hemos creado una <a href=\"https:\/\/github.com\/olawanlejoel\/11ty-portfolio-starter\" target=\"_blank\" rel=\"noopener noreferrer\">plantilla de repositorio GitHub<\/a>\u00a0 para ayudarte a acelerar las cosas. En GitHub, selecciona <strong>Usar esta plantilla<\/strong> &gt; <strong>Crear un nuevo repositorio<\/strong>\u00a0para copiar estos activos y los archivos de configuraci\u00f3n inicial en un nuevo repositorio propio, y luego desc\u00e1rgalos a tu m\u00e1quina local.<\/p>\n<p>Tu proyecto tendr\u00e1 la siguiente estructura:<\/p>\n<pre><code class=\"language-bash\">\u251c\u2500\u2500 node_modules\/\n\u251c\u2500\u2500 public\/\n\u251c\u2500\u2500 src\/\n |        \u251c\u2500\u2500 _includes\n |                      \u251c\u2500\u2500 layouts\n \u2502       \u251c\u2500\u2500 assets\n \u2502       \u251c\u2500\u2500 css\n \u2502       \u251c\u2500\u2500 projects\n \u2502       \u2514\u2500\u2500 index.njk\n\u251c\u2500\u2500 .eleventy.js\n\u251c\u2500\u2500 .gitignore\n\u251c\u2500\u2500 package.lock.json\n\u2514\u2500\u2500 package.json<\/code><\/pre>\n<h3>C\u00f3mo utilizar plantillas en Eleventy<\/h3>\n<p>Cuando utilices Eleventy, hay tres tipos principales de plantillas que debes comprender. Estas plantillas pueden crearse con Nunjucks, que te permite definir variables, bucles, condicionales y otra l\u00f3gica que puede utilizarse para generar el contenido de la p\u00e1gina de forma din\u00e1mica.<\/p>\n<ul>\n<li><strong>Plantillas de p\u00e1gina:<\/strong> Definen la estructura y el contenido de las p\u00e1ginas individuales de tu sitio web.<\/li>\n<li><strong>Plantillas de dise\u00f1o:<\/strong> Definen la estructura general y el dise\u00f1o de las p\u00e1ginas de tu sitio web. Suelen incluir elementos comunes como encabezados, pies de p\u00e1gina, men\u00fas de navegaci\u00f3n y barras laterales, que se comparten en varias p\u00e1ginas.<\/li>\n<li><strong>Plantillas parciales:<\/strong> Definen secciones peque\u00f1as y reutilizables del marcado HTML de tu sitio web. Suelen utilizarse para definir elementos comunes como encabezados, pies de p\u00e1gina, men\u00fas de navegaci\u00f3n y barras laterales, que pueden incluirse en plantillas de dise\u00f1o y de p\u00e1gina.<\/li>\n<\/ul>\n<p>Ahora que entiendes cada uno de estos tipos de plantillas. Vamos a crear plantillas para el sitio web de portafolio est\u00e1tico.<\/p>\n<h4>C\u00f3mo crear dise\u00f1os en Eleventy<\/h4>\n<p>Dentro del directorio src, crea un directorio <strong>_includes<\/strong>. Este contendr\u00e1 todos nuestros dise\u00f1os y parciales.<\/p>\n<p>A continuaci\u00f3n, puedes crear una carpeta <strong>layouts<\/strong> (para una correcta organizaci\u00f3n) que contenga todos tus dise\u00f1os. Estos dise\u00f1os son plantillas y pueden utilizar tu lenguaje de plantillas preferido, como Nunjucks, que es el que utilizamos aqu\u00ed.<\/p>\n<p>Vamos a crear un archivo <strong>base.njk<\/strong> para guardar el dise\u00f1o general de todas tus p\u00e1ginas.<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;link rel=\"icon\" href=\"\/assets\/favicon.jpeg\" \/&gt;\n        &lt;link\n            rel=\"stylesheet\"\n            href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n            integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n            crossorigin=\"anonymous\"\n            referrerpolicy=\"no-referrer\"\n        \/&gt;\n        &lt;link rel=\"stylesheet\" href=\"\/css\/global.css\" \/&gt;\n        &lt;title&gt;J.'s Portfolio&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div&gt;\n            {{ content | safe }}\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, se crea un marcado HTML general y se incluye Font Awesome desde una CDN para que puedas acceder a sus iconos. Adem\u00e1s, se pasa la variable content para que se incluya todo el contenido de cualquier p\u00e1gina que utilice este dise\u00f1o.<\/p>\n<p>Pero esa no es toda la historia de la maquetaci\u00f3n. Tu maqueta tendr\u00e1 algunas secciones que aparecer\u00e1n en todas las p\u00e1ginas, como la barra de navegaci\u00f3n y el pie de p\u00e1gina. Vamos a crear parciales para cada una de estas secciones.<\/p>\n<h4>C\u00f3mo utilizar parciales en Eleventy<\/h4>\n<p>Todos los parciales se almacenan en el directorio <strong>_includes<\/strong>. Para organizarlos adecuadamente, puedes almacenarlos en una carpeta. En este caso, crea una carpeta <strong>components<\/strong> dentro del directorio <strong>_includes<\/strong> y crea las plantillas navbar y footer.<\/p>\n<p>Aqu\u00ed tienes los parciales de la barra de navegaci\u00f3n en <strong>navbar.njk<\/strong>:<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"nav-container\"&gt;\n    &lt;div class=\"logo\"&gt;\n        &lt;a href=\"\/\"&gt;\n            J.\n        &lt;\/a&gt;\n    &lt;\/div&gt;\n    &lt;div class=\"nav\"&gt;\n        &lt;a href=\"\/projects\" class=\"link\"&gt;\n            Projects\n        &lt;\/a&gt;\n        &lt;a href=\"https:\/\/docs.google.com\/document\/d\/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE\/edit?usp=sharing\" class=\"cta-btn\"&gt;Resume&lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Aqu\u00ed est\u00e1n los parciales del pie de p\u00e1gina en <strong>footer.njk<\/strong>:<\/p>\n<pre><code class=\"language-html\">&lt;hr \/&gt;\n&lt;div class=\"footer-container\"&gt;\n    &lt;p&gt;\u00a9 {% year %} Joel's Portfolio&lt;\/p&gt;\n    &lt;div class=\"social_icons\"&gt;\n        &lt;a\n            href=\"https:\/\/twitter.com\/olawanle_joel\"\n            aria-label=\"Twitter\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n        &gt;\n            &lt;i class=\"fa-brands fa-twitter\"&gt;&lt;\/i&gt;\n        &lt;\/a&gt;\n        &lt;a\n            href=\"https:\/\/github.com\/olawanlejoel\"\n            aria-label=\"GitHub\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n        &gt;\n            &lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;\n        &lt;\/a&gt;\n        &lt;a\n            href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"\n            aria-label=\"LinkedIn\"\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n        &gt;\n            &lt;i class=\"fa-brands fa-linkedin\"&gt;&lt;\/i&gt;\n        &lt;\/a&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>A\u00f1ade estos parciales a tu p\u00e1gina o plantilla de dise\u00f1o. Puedes hacerlo utilizando la declaraci\u00f3n <code>{% include %}<\/code>. Este es el aspecto que tendr\u00e1 la plantilla <strong>layouts\/base.<\/strong><strong>njk<\/strong> cuando incluyas las plantillas navbar y footer:<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;link rel=\"icon\" href=\"\/assets\/favicon.jpeg\" \/&gt;\n        &lt;link\n            rel=\"stylesheet\"\n            href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n            integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n            crossorigin=\"anonymous\"\n            referrerpolicy=\"no-referrer\"\n        \/&gt;\n        &lt;link rel=\"stylesheet\" href=\"\/css\/global.css\" \/&gt;\n        &lt;title&gt;J.'s Portfolio&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div&gt;\n            {% include \"components\/navbar.njk\" %}\n                {{ content | safe }}\n            {% include \"components\/footer.njk\" %}\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Cuando ejecutes el comando <code>npm start<\/code>, este dise\u00f1o no aparecer\u00e1 porque no se ha a\u00f1adido a una plantilla de p\u00e1gina. Crea una plantilla de p\u00e1gina y a\u00f1ade este dise\u00f1o.<\/p>\n<h4>C\u00f3mo crear plantillas de p\u00e1gina en Eleventy<\/h4>\n<p>En tu carpeta <strong>src<\/strong>, crea un archivo <strong>index.njk<\/strong> para que sirva como p\u00e1gina de inicio de tu sitio web de portafolio. Esta p\u00e1gina utilizar\u00e1 el dise\u00f1o base:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/base.njk\ntitle: Home\n---\n&lt;h1&gt; This is the {{title}} Page. &lt;\/h1&gt;<\/code><\/pre>\n<p>Cuando ejecutes ahora el comando <code>npm start<\/code>, tu sitio est\u00e1tico se cargar\u00e1 en <strong>http:\/\/localhost:8080\/<\/strong>. \u00c9ste es el aspecto que tendr\u00e1 la salida:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-home-page.jpg\" alt=\"Page Template without styling\" width=\"1600\" height=\"470\"><figcaption class=\"wp-caption-text\">Plantilla de p\u00e1gina sin estilo<\/figcaption><\/figure>\n<h3>C\u00f3mo utilizar CSS e im\u00e1genes en Eleventy<\/h3>\n<p>Ahora ya conoces las distintas plantillas que existen, c\u00f3mo funcionan y c\u00f3mo se pueden utilizar juntas. Pero te dar\u00e1s cuenta de que en el archivo <strong>layouts\/base.njk<\/strong>, se enlaza un archivo CSS para dar estilo a la p\u00e1gina de la cartera, pero cuando se carga el sitio, los estilos CSS no se ven afectados porque el archivo CSS no se a\u00f1ade a la carpeta <strong>public<\/strong>.<\/p>\n<p>Para solucionar esto, tienes que configurarlo en tu archivo<strong>.eleventy.js<\/strong> utilizando el par\u00e1metro <code>eleventyConfig<\/code>. Esto hace posible que Eleventy sepa que existe(n) el(los) archivo(s) CSS y tambi\u00e9n que est\u00e9(n) atento(s) a posibles cambios en el archivo CSS.<\/p>\n<p>En la carpeta <strong>src<\/strong>, puedes crear una carpeta <strong>css<\/strong> para almacenar todos los archivos CSS que vayas a utilizar en tu proyecto, pero para este art\u00edculo, puedes utilizar un \u00fanico archivo CSS: <a href=\"https:\/\/github.com\/kinsta\/11ty-portfolio\/blob\/starter\/src\/css\/global.css\" target=\"_blank\" rel=\"noopener noreferrer\">global.css<\/a>. A continuaci\u00f3n, puedes configurar la carpeta <strong>css<\/strong>, para que configure todos los archivos dentro de la carpeta:<\/p>\n<pre><code class=\"language-js\">eleventyConfig.addPassthroughCopy('src\/css');\neleventyConfig.addWatchTarget('src\/css');<\/code><\/pre>\n<p>Lo mismo con las im\u00e1genes. Si a\u00f1ades alguna imagen a tu p\u00e1gina, te dar\u00e1s cuenta de que no se muestra. Para que se muestre, necesitas configurar la carpeta en la que se almacenan tus im\u00e1genes. Creemos una carpeta de <strong>activos<\/strong> para almacenar todas nuestras im\u00e1genes y configuremos la carpeta de <strong>activos<\/strong>.<\/p>\n<pre><code class=\"language-js\">eleventyConfig.addPassthroughCopy('src\/assets');<\/code><\/pre>\n<p>Este es el aspecto que tendr\u00e1 ahora tu archivo de configuraci\u00f3n:<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    eleventyConfig.addPassthroughCopy('src\/assets');\n    eleventyConfig.addPassthroughCopy('src\/css');\n    eleventyConfig.addWatchTarget('src\/css');\n\n    return {\n        dir: {\n            input: 'src',\n            output: 'public',\n        },\n    };\n};<\/code><\/pre>\n<p>Cuando ejecutes <code>npm start<\/code>, el estilo CSS funcionar\u00e1, y tu p\u00e1gina de inicio tendr\u00e1 este aspecto:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-home-page-with-css.jpg\" alt=\"Aspecto de la plantilla despu\u00e9s de a\u00f1adir el dise\u00f1o\" width=\"1600\" height=\"436\"><figcaption class=\"wp-caption-text\">Aspecto de la plantilla despu\u00e9s de a\u00f1adir el dise\u00f1o<\/figcaption><\/figure>\n<h2>Crear Parciales y A\u00f1adirlos a la P\u00e1gina de Inicio<\/h2>\n<p>Ya has conseguido crear un dise\u00f1o y a\u00f1adirlo a tu p\u00e1gina de inicio (<strong>index.njk<\/strong>). Vamos a personalizar la p\u00e1gina de inicio para que contenga alguna informaci\u00f3n sobre ti, como m\u00e1s informaci\u00f3n sobre ti, tus habilidades e informaci\u00f3n de contacto.<\/p>\n<p>Puedes decidir a\u00f1adir tus c\u00f3digos y marcas directamente a la plantilla <strong>index.njk<\/strong>, pero vamos a crear Parciales individuales para la informaci\u00f3n de Inicio, acerca de, competencias y contacto.<\/p>\n<h3>Los parciales del H\u00e9roe<\/h3>\n<p>Esta es la primera secci\u00f3n debajo de la Navbar, cuyo objetivo principal es dar a los usuarios una idea de lo que trata el sitio web.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"hero-container\"&gt;\n    &lt;img src='assets\/profile.jpeg' class=\"profile-img\" alt=\"Joe's personal headshot\" \/&gt;\n    &lt;div class=\"hero-text\"&gt;\n        &lt;h1&gt;Hey, I'm Joe \ud83d\udc4b&lt;\/h1&gt;\n        &lt;p&gt;\n            I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.\n        &lt;\/p&gt;\n        &lt;div class=\"social-icons\"&gt;\n            &lt;a href=\"https:\/\/twitter.com\/olawanle_joel\"&gt;\n                &lt;i class=\"fa-brands fa-twitter\"&gt;&lt;\/i&gt;\n            &lt;\/a&gt;\n            &lt;a href=\"https:\/\/github.com\/olawanlejoel\"&gt;\n                &lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;\n            &lt;\/a&gt;\n            &lt;a href=\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\"&gt;\n                &lt;i class=\"fa-brands fa-linkedin\"&gt;&lt;\/i&gt;\n            &lt;\/a&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior se incluyen algunos detalles sobre ti, junto con algunos iconos sociales para conectar enlaces a tus perfiles en las redes sociales.<\/p>\n<p>Los parciales del H\u00e9roe deber\u00edan tener este aspecto:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-hero-partials.jpg\" alt=\"Pantalla de h\u00e9roe\" width=\"1600\" height=\"680\"><figcaption class=\"wp-caption-text\">Pantalla de h\u00e9roe<\/figcaption><\/figure>\n<p>Puedes a\u00f1adir m\u00e1s contenido a la secci\u00f3n H\u00e9roe, cambiar los estilos en el archivo css\/globals.css, o incluso crear tu propia versi\u00f3n de esta secci\u00f3n.<\/p>\n<h3>Los parciales Acerca de<\/h3>\n<p>La secci\u00f3n Acerca de ofrece a las personas que visitan tu portafolio m\u00e1s informaci\u00f3n sobre ti en tantos p\u00e1rrafos como desees. Puede ser una p\u00e1gina aparte si tienes m\u00e1s informaci\u00f3n que contar.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"about-container\"&gt;\n    &lt;h2&gt;About Me&lt;\/h2&gt;\n    &lt;div class=\"flex-about\"&gt;\n        &lt;div class=\"about-text\"&gt;\n            &lt;p&gt;\n                As a developer, I have always been passionate about creating elegant and effective solutions to complex problems. I have a strong foundation in software development, with a focus on web technologies such as HTML, CSS, and JavaScript. I enjoy working on both the front-end and back-end of applications, and I am always looking for ways to optimize performance, improve user experience, and ensure the highest level of code quality.\n            &lt;\/p&gt;\n            &lt;p&gt;Throughout my career, I have worked on a wide range of projects, from simple static websites to complex enterprise-level applications. I am experienced in working with a variety of development tools and frameworks, including React, Angular, Vue.js, Node.js, and Laravel. I am always eager to learn and explore new technologies, and I am constantly seeking out opportunities to improve my skills and knowledge.&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"about-img\"&gt;\n            &lt;Image src='\/assets\/about.jpeg' class=\"profile-img\" alt=\"Joe and animal relaxing and having fun\" \/&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>El c\u00f3digo contiene informaci\u00f3n sobre ti (una imagen y algo de texto). Este es el aspecto que debe tener la secci\u00f3n \u00abAcerca de\u00bb:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-about-partials.jpg\" alt=\"Parciales Acerca de\" width=\"1600\" height=\"704\"><figcaption class=\"wp-caption-text\">Parciales Acerca de<\/figcaption><\/figure>\n<h3>Los parciales de Competencias<\/h3>\n<p>Esta secci\u00f3n se utiliza para mostrar las tecnolog\u00edas que utilizas o que te gusta utilizar.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"skills-container\"&gt;\n    &lt;h2&gt;Skills&lt;\/h2&gt;\n    &lt;div class=\"grid-skills\"&gt;\n        &lt;div class=\"skill-card html\"&gt;\n            &lt;i class=\"fa-brands fa-html5 html-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;HTML&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card css\"&gt;\n            &lt;i class=\"fa-brands fa-css3-alt css-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;CSS&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card js\"&gt;\n            &lt;i class=\"fa-brands fa-js-square js-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;JavaScript&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card react\"&gt;\n            &lt;i class=\"fa-brands fa-react react-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;React&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card node\"&gt;\n            &lt;i class=\"fa-brands fa-node-js node-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;Node&lt;\/p&gt;\n        &lt;\/div&gt;\n        &lt;div class=\"skill-card python\"&gt;\n            &lt;i class=\"fa-brands fa-python python-icon\"&gt;&lt;\/i&gt;\n            &lt;p&gt;Python&lt;\/p&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>El c\u00f3digo anterior crea una tarjeta que contiene el icono de la tecnolog\u00eda y el nombre de cada habilidad. Tambi\u00e9n puedes a\u00f1adir m\u00e1s estilos y modificar el c\u00f3digo para hacerlo m\u00e1s atractivo y distinto. Este es el aspecto que debe tener la secci\u00f3n de habilidades:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-skills-partials.jpg\" alt=\"Parciales de habilidades\" width=\"1600\" height=\"446\"><figcaption class=\"wp-caption-text\">Parciales de habilidades<\/figcaption><\/figure>\n<h3>Los parciales de Contacto<\/h3>\n<p>Puesto que se trata de un portafolio, deber\u00edas a\u00f1adir un medio para que los clientes potenciales se pongan en contacto contigo. Una forma ser\u00eda que te enviaran un correo electr\u00f3nico.<\/p>\n<pre><code class=\"language-html\">&lt;div class=\"contact-container\"&gt;\n    &lt;h2&gt;Get In Touch&lt;\/h2&gt;\n    &lt;p&gt;If you want us to work together, have any question or want me to speak at your event, my inbox is always open. Whether just want to say hi, I'll try my best to get back to you! Cheers!&lt;\/p&gt;\n    &lt;a href=\"mailto:joelolawanle@kinsta.com\" class='cta-btn'&gt;Say Hello&lt;\/a&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Sustituye la direcci\u00f3n de correo electr\u00f3nico de la etiqueta <code>a<\/code> por la tuya propia para que el bot\u00f3n lance una aplicaci\u00f3n de correo electr\u00f3nico para que la gente te env\u00ede un mensaje.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/portfolio-contact-partials.jpg\" alt=\"Parciales de contacto\" width=\"1600\" height=\"318\"><figcaption class=\"wp-caption-text\">Parciales de contacto<\/figcaption><\/figure>\n<p>Ya has creado con \u00e9xito todos los Parciales para tu p\u00e1gina de inicio. A continuaci\u00f3n, debes incluirlos en tu archivo <strong>index.njk<\/strong> para que se muestren en la p\u00e1gina de inicio:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/base.njk\ntitle: Home\n---\n{% include \"components\/hero.njk\" %}\n{% include \"components\/about.njk\" %}\n{% include \"components\/skills.njk\" %}\n{% include \"components\/contact.njk\" %}<\/code><\/pre>\n<p>Cuando ejecutes el comando start, tu p\u00e1gina de inicio mostrar\u00e1 todos los Parciales a\u00f1adidos en consecuencia.<\/p>\n<h3>C\u00f3mo utilizar las colecciones en Eleventy<\/h3>\n<p>En Eleventy, las colecciones son una forma de agrupar contenido relacionado para que puedas generar p\u00e1ginas basadas en ese contenido. Por ejemplo, si tienes archivos markdown de contenido similar (entradas de blog) almacenados en una carpeta de blog de tu proyecto, puedes utilizar colecciones para recuperarlos y mostrar una lista de todo el contenido. Adem\u00e1s, puedes crear un dise\u00f1o para gestionar c\u00f3mo se muestran estos contenidos.<\/p>\n<p>Las colecciones se definen en el archivo de configuraci\u00f3n <strong>.eleventy.js<\/strong> y pueden incluir datos de diversas fuentes, como archivos markdown o JSON.<\/p>\n<p>Para este sitio web de portafolio, vamos a crear un directorio de <strong>proyectos<\/strong> en el directorio <strong>src<\/strong>, para almacenar el contenido markdown de cada proyecto. Este contenido incluir\u00e1 detalles sobre el proyecto, el problema resuelto, las tecnolog\u00edas utilizadas, los retos encontrados y las lecciones aprendidas.<\/p>\n<p>Puedes crear un archivo markdown con el nombre del proyecto (<strong>quotes-generator.md<\/strong>) y pegar el c\u00f3digo que aparece a continuaci\u00f3n:<\/p>\n<pre><code class=\"language-md\">---\ntitle: Quotes Generator\ndescription: \"Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.\"\ngitHubURL: \"https:\/\/github.com\/olawanlejoel\/random-quote-generator\"\nimage: \"\/assets\/quotes-banner.jpeg\"\n---\n\nThe quotes generator project is a software tool designed to display random inspirational or thought-provoking quotes to users. This project aims to solve the problem of lack of motivation or inspiration by providing users with a quick and easy way to access inspiring quotes.\n\n### Technologies Used\nThe technologies used in this project include HTML, CSS, and JavaScript. The application utilizes an API to fetch random quotes and display them to the user.\n\n### Challenges and Lessons Learned\nOne of the main challenges faced during this project was designing the user interface to be visually appealing and responsive on different devices. The team had to consider various design elements such as font sizes, colors, and layout to create a user-friendly and aesthetically pleasing interface.\n\nAnother challenge was handling errors and edge cases such as network connectivity issues or invalid API responses. The team had to implement error handling and fallback mechanisms to ensure that the application would continue to function smoothly under various conditions.\n\nThroughout the project, the team learned valuable lessons about front-end development, such as the importance of clean and efficient code, effective debugging and troubleshooting, and responsive design principles. They also learned the importance of utilizing APIs to access and display data from external sources.\n\nOverall, the quotes generator project was a valuable learning experience that allowed the team to develop their technical and creative skills, and create a useful tool for users looking for daily inspiration or motivation.<\/code><\/pre>\n<p><strong>Nota:<\/strong> Si has utilizado la plantilla de inicio, ya deber\u00edas tenerlos, si no, puedes copiarlos del directorio de proyectos de nuestra <a href=\"https:\/\/github.com\/kinsta\/11ty-portfolio\/tree\/starter\/src\/projects\" target=\"_blank\" rel=\"noopener noreferrer\">plantilla de inicio en GitHub<\/a>.<\/p>\n<p>El frontmatter de la parte superior de estos archivos, al igual que las plantillas, hace que los valores est\u00e9n disponibles para inyectarlos en tus plantillas.<\/p>\n<p>Como estos archivos Markdown est\u00e1n en el directorio src, Eleventy los tratar\u00e1 como plantillas y generar\u00e1 una p\u00e1gina HTML para cada una. Su URL ser\u00e1 algo as\u00ed como <strong>\/projects\/quotes-generator<\/strong>.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/quote-project-page.jpg\" alt=\"Aspecto del proyecto sin maquetaci\u00f3n\" width=\"1600\" height=\"587\"><figcaption class=\"wp-caption-text\">Aspecto del proyecto sin maquetaci\u00f3n<\/figcaption><\/figure>\n<p>Eleventy, sin embargo, no sabr\u00e1 qu\u00e9 dise\u00f1o utilizar para estas p\u00e1ginas porque a\u00fan no tienen un valor de dise\u00f1o en su frontmatter.<\/p>\n<p>Creemos primero un dise\u00f1o para este contenido antes de crear una colecci\u00f3n y a\u00f1adirlos como lista a una p\u00e1gina de proyectos dedicada.<\/p>\n<p>Como antes, crea un archivo de dise\u00f1o (<strong>project.njk<\/strong>)\u00a0en la carpeta de <strong>layouts<\/strong>. Para evitar repeticiones, ya que este archivo utilizar\u00e1 el marcado HTML por defecto, ajusta la maquetaci\u00f3n <strong>base.njk<\/strong>\u00a0creando un bloque que indique la secci\u00f3n de tu maquetaci\u00f3n que va a cambiar.<\/p>\n<pre><code class=\"language-html\">&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n    &lt;head&gt;\n        &lt;meta charset=\"UTF-8\" \/&gt;\n        &lt;meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/&gt;\n        &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/&gt;\n        &lt;link rel=\"icon\" href=\"\/assets\/favicon.jpeg\" \/&gt;\n        &lt;link\n            rel=\"stylesheet\"\n            href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.2.1\/css\/all.min.css\"\n            integrity=\"sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf\/nwasF0nqhPay5w\/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==\"\n            crossorigin=\"anonymous\"\n            referrerpolicy=\"no-referrer\"\n        \/&gt;\n        &lt;link rel=\"stylesheet\" href=\"\/css\/global.css\" \/&gt;\n        &lt;title&gt;J.'s Portfolio&lt;\/title&gt;\n    &lt;\/head&gt;\n    &lt;body&gt;\n        &lt;div&gt;\n            {% include \"components\/navbar.njk\" %}\n                {% block content %} \n                    {{ content | safe }}\n                {% endblock %}\n            {% include \"components\/footer.njk\" %}\n        &lt;\/div&gt;\n    &lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n<p>Al bloque se le da un nombre contenido porque puedes tener muchos bloques dentro de tus plantillas. Ahora puedes ampliar esto a tu maqueta <strong>project<\/strong>.<strong>njk<\/strong>, de modo que s\u00f3lo tengas que especificar el bloque content:<\/p>\n<pre><code class=\"language-html\">{% extends \"layouts\/base.njk\" %}\n\n{% block content %}\n    &lt;div class=\"project-layout\"&gt;\n        &lt;h2&gt;{{title}}&lt;\/h2&gt;\n        &lt;img src=\"{{image}}\" alt=\"image\" class=\"banner-img\" \/&gt;\n        &lt;a href=\"{{gitHubURL}}\" class=\"cta-btn pt-btn\"&gt;\n            &lt;div class=\"small-icons\"&gt;\n                GitHub &lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;\n            &lt;\/div&gt;\n        &lt;\/a&gt;\n        {{ content | safe }}\n    &lt;\/div&gt;\n{% endblock %}<\/code><\/pre>\n<p>En el c\u00f3digo anterior, est\u00e1s especificando c\u00f3mo se mostrar\u00e1 cada proyecto. Obtendr\u00e1 el <strong>t\u00edtulo<\/strong>, la <strong>imagen<\/strong> y el<strong> gitHubURL<\/strong> del frontmatter y luego a\u00f1adir\u00e1 otro contenido utilizando la variable de contenido (<code>{{ content | safe }}<\/code>).<\/p>\n<p>El siguiente paso ser\u00eda a\u00f1adir una clave y un valor de dise\u00f1o al frontmatter de cada proyecto:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/project.njk\ntitle: Quotes Generator\ndescription: \"Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards.\"\ngitHubURL: \"https:\/\/github.com\/olawanlejoel\/random-quote-generator\"\nimage: \"\/assets\/quotes-banner.jpeg\"\n---\n\n\u2026<\/code><\/pre>\n<p>Cuando vuelvas a cargar la URL de cada proyecto, por ejemplo <strong>\/projects\/quotes-generator<\/strong>, ver\u00e1s que ahora utiliza el dise\u00f1o creado:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/quote-project-page-with-layout.jpg\" alt=\"Aspecto del proyecto con dise\u00f1o\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">Aspecto del proyecto con dise\u00f1o<\/figcaption><\/figure>\n<h4>C\u00f3mo utilizar las colecciones en las plantillas<\/h4>\n<p>Cada uno de tus proyectos se muestra ahora con el dise\u00f1o especificado, pero \u00bfc\u00f3mo puede la gente acceder a estos proyectos? Necesitas crear una lista en la que la gente pueda hacer clic para acceder a cada proyecto. Aqu\u00ed es donde entran en juego las colecciones.<\/p>\n<p>Para utilizar la colecci\u00f3n, debes definirla en el archivo de configuraci\u00f3n <strong>.eleventy.js<\/strong> utilizando el m\u00e9todo <code>addCollection()<\/code>.<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    \/\/ \u2026\n\n    eleventyConfig.addCollection('projects', (collection) =&gt; {\n        return collection.getFilteredByGlob('src\/projects\/*.md');\n    });\n\n    return {\n        \/\/ ...\n    };\n};<\/code><\/pre>\n<p>En el c\u00f3digo anterior, el m\u00e9todo <code>addCollection()<\/code> se utiliza para definir una colecci\u00f3n llamada proyectos. La funci\u00f3n de devoluci\u00f3n de llamada pasada a <code>addCollection()<\/code> devuelve todos los archivos markdown del directorio de proyectos utilizando el m\u00e9todo <code>getFilteredByGlob()<\/code>.<\/p>\n<p>Una vez definida una colecci\u00f3n, puedes utilizarla en una plantilla para generar p\u00e1ginas basadas en ese contenido. Vamos a crear una plantilla de p\u00e1gina <strong>proyectos<\/strong>.<strong>njk<\/strong>, que utilizar\u00eda el dise\u00f1o <strong>base.njk<\/strong>, pero su contenido ser\u00e1n los proyectos de la colecci\u00f3n proyectos:<\/p>\n<pre><code class=\"language-html\">---\nlayout: layouts\/base.njk\ntitle: Projects\n---\n&lt;div class=\"projects-container\"&gt;\n    &lt;h2&gt;Projects&lt;\/h2&gt;\n    &lt;div class=\"projects-grid\"&gt;\n        {% for project in collections.projects %}\n            &lt;div class=\"project-card\"&gt;\n                &lt;div class=\"project-header\"&gt;\n                    &lt;i class=\"fa-regular fa-folder-open folder-icon\"&gt;&lt;\/i&gt;\n                    &lt;div class=\"small-icons\"&gt;\n                        &lt;a href={{project.data.gitHubURL}}&gt;&lt;i class=\"fa-brands fa-github\"&gt;&lt;\/i&gt;&lt;\/a&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n                &lt;h3&gt;{{project.data.title}}&lt;\/h3&gt;\n                &lt;p&gt;{{project.data.description}}&lt;\/p&gt;\n                &lt;a href=\"{{project.url}}\" class=\"cta-btn\"&gt;Read more&lt;\/a&gt;\n            &lt;\/div&gt;\n        {% endfor %}\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>En el c\u00f3digo anterior, la sentencia <code>{% for %}<\/code> se utiliza para recorrer todos los proyectos de la colecci\u00f3n de proyectos y generar una ficha de proyecto para cada uno de ellos.<\/p>\n<p>Tendr\u00e1s acceso a todas las variables utilizando <code>project.data.[key]<\/code>. Por ejemplo, el c\u00f3digo anterior mostrar\u00e1 el t\u00edtulo, la descripci\u00f3n y la URL de GitHub del proyecto. Tambi\u00e9n puedes acceder a la URL del proyecto utilizando <code>project.url<\/code>.<\/p>\n<p>Cuando ejecutes el comando start y navegues a la p\u00e1gina de proyectos, este es el aspecto que tendr\u00e1 tu p\u00e1gina cuando a\u00f1adas muchos proyectos:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/projects-page-with-content.jpg\" alt=\"P\u00e1gina de plantilla de proyectos\" width=\"1600\" height=\"877\"><figcaption class=\"wp-caption-text\">P\u00e1gina de plantilla de proyectos<\/figcaption><\/figure>\n<h3>C\u00f3mo utilizar los c\u00f3digos cortos<\/h3>\n<p>Los c\u00f3digos cortos son una forma de definir etiquetas HTML personalizadas o valores din\u00e1micos JavaScript que puedes reutilizar en tus plantillas. Por ejemplo, puedes definir un shortcode para generar el a\u00f1o en curso y a\u00f1adirlo a tu p\u00e1gina web.<\/p>\n<p>En el archivo de configuraci\u00f3n <strong>.eleventy.js<\/strong>, puedes definir un shortcode utilizando el m\u00e9todo <code>addShortcode()<\/code>. Por ejemplo, el siguiente c\u00f3digo define un shortcode llamado a\u00f1o:<\/p>\n<pre><code class=\"language-js\">module.exports = function (eleventyConfig) {\n    \/\/ ...\n    eleventyConfig.addShortcode('year', () =&gt; {\n        return `${new Date().getFullYear()}`;\n    });\n    return {\n        \/\/ ...\n    };\n};<\/code><\/pre>\n<p>El shortcode a\u00f1o devolver\u00e1 el a\u00f1o actual, que puedes a\u00f1adir a cualquier plantilla de tu proyecto. Por ejemplo, en lugar de codificar el a\u00f1o en el pie de p\u00e1gina de este sitio web, puedes a\u00f1adirlo din\u00e1micamente utilizando <code>{% year %}<\/code>, para que se actualice cada a\u00f1o:<\/p>\n<pre><code class=\"language-html\">&lt;hr \/&gt;\n&lt;div class=\"footer-container\"&gt;\n    &lt;p&gt;\u00a9 {% year %} Joel's Portfolio&lt;\/p&gt;\n    &lt;div class=\"social_icons\"&gt;\n        \/\/ ...\n    &lt;\/div&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<p>Cuando se muestre la p\u00e1gina, la salida incluir\u00e1 el a\u00f1o actual dentro de la etiqueta HTML <code>p<\/code>.<\/p>\n<h2>C\u00f3mo A\u00f1adir un Tema a un Sitio Eleventy<\/h2>\n<p>A\u00f1adir un tema a un sitio Eleventy puede ser una forma estupenda de personalizar el aspecto de tu sitio r\u00e1pidamente. Oficialmente, Eleventy se refiere a los temas como iniciadores, pero entiende que significan lo mismo. Muchos sitios web proporcionan temas Eleventy gratuitos, como los starters <a href=\"https:\/\/www.11ty.dev\/docs\/starter\/\" target=\"_blank\" rel=\"noopener noreferrer\">oficiales de Eleventy<\/a> y <a href=\"https:\/\/jamstackthemes.dev\/ssg\/eleventy\/\" target=\"_blank\" rel=\"noopener noreferrer\">los temas Jamstack<\/a>.<\/p>\n<p>Todo lo que tienes que hacer es seleccionar tu tema o starter favorito, y luego acceder a su repositorio de GitHub para clonarlo en tu m\u00e1quina local. Aseg\u00farate de leer su documentaci\u00f3n para conocer los pasos para configurar y personalizar los proyectos.<\/p>\n<p>Ejecuta <code>npm install<\/code> para instalar todos los paquetes utilizados, y luego ejecuta <code>npm start<\/code> para servir tu aplicaci\u00f3n localmente a <strong>http:\/\/localhost:8080\/.<\/strong><\/p>\n<h2>C\u00f3mo Desplegar un Sitio Eleventy<\/h2>\n<p>Ya has conseguido crear un elegante sitio web est\u00e1tico de portafolio con Eleventy. Tener este tipo de sitio web en tu m\u00e1quina local no es suficiente. Querr\u00e1s alojarlo online para compartirlo con quien quieras.<\/p>\n<p>Kinsta es una plataforma en la nube que te permite alojar <a href=\"https:\/\/docs.sevalla.com\/static-sites\/overview\">sitios web est\u00e1ticos<\/a>, incluido Eleventy. Esto se puede hacer empujando tus c\u00f3digos a GitHub, y finalmente despleg\u00e1ndolos en Kinsta.<\/p>\n<h3>Env\u00eda tu sitio Eleventy a GitHub<\/h3>\n<p>Primero, crea un repositorio en GitHub; esto te dar\u00e1 acceso a la <a href=\"https:\/\/kinsta.com\/es\/blog\/que-es-una-url\/\">URL<\/a> del repositorio. A continuaci\u00f3n, puedes utilizar comandos git para enviar tus c\u00f3digos.<\/p>\n<p>Antes de enviar tus archivos a GitHub, es mejor que crees un archivo <strong>.gitignore<\/strong> para especificar algunos archivos y carpetas que git deber\u00eda ignorar al enviar tus c\u00f3digos. Crea un archivo . <strong>gitignore<\/strong> en tu carpeta ra\u00edz y a\u00f1ade lo siguiente:<\/p>\n<pre><code class=\"language-git\"># dependencies\n\/node_modules\n\n# run\n\/public<\/code><\/pre>\n<p>Ahora puedes inicializar tu repositorio Git local abriendo tu terminal, navegando hasta el directorio que contiene tu proyecto y ejecutando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">git init<\/code><\/pre>\n<p>Ahora a\u00f1ade tu c\u00f3digo al repositorio Git local utilizando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">git add<\/code><\/pre>\n<p>Ahora puedes confirmar tus cambios utilizando el siguiente comando:<\/p>\n<pre><code class=\"language-bash\">git commit -m \"my first commit\"<\/code><\/pre>\n<p><strong>Nota:<\/strong> Puedes sustituir \u00abmy first commit\u00bb por un breve mensaje que describa tus cambios.<\/p>\n<p>Por \u00faltimo, env\u00eda tu c\u00f3digo a GitHub utilizando los siguientes comandos:<\/p>\n<pre><code class=\"language-bash\">git remote add origin [repository URL]\ngit push -u origin master<\/code><\/pre>\n<p><strong>Nota: <\/strong>Aseg\u00farate de sustituir \u00ab[URL del repositorio]\u00bb por la URL de tu propio repositorio de GitHub.<\/p>\n<p>Una vez que hayas completado estos pasos, tu c\u00f3digo ser\u00e1 enviado a GitHub y accesible a trav\u00e9s de la URL de tu repositorio.<\/p>\n<p>\u00a1Ya puedes desplegarlo en Kinsta!<\/p>\n<h3>Desplegar tu sitio Eleventy en Kinsta<\/h3>\n<p>El despliegue en Kinsta se realiza en cuesti\u00f3n de minutos. Comienza en el panel de control <a href=\"https:\/\/my.kinsta.com\/?lang=es\">MyKinsta<\/a> para iniciar sesi\u00f3n o crear tu cuenta. A continuaci\u00f3n, <a href=\"https:\/\/docs.sevalla.com\/applications\/git\/github#authenticate-and-authorize\">autorizar\u00e1s a Kinsta en GitHub<\/a>.<\/p>\n<p>A continuaci\u00f3n, haz clic en <strong>Aplicaciones<\/strong> en la barra lateral izquierda, luego en <strong>A\u00f1adir servicio y, por \u00faltimo<\/strong>, en <strong>Aplicaci\u00f3n<\/strong> en las opciones desplegables:<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/Untitled-1.jpg\" alt=\"Despliegue en el alojamiento de aplicaciones de Kinsta\" width=\"1600\" height=\"503\"><figcaption class=\"wp-caption-text\">Despliegue en el alojamiento de aplicaciones de Kinsta<\/figcaption><\/figure>\n<p>Aparecer\u00e1 un modal a trav\u00e9s del cual podr\u00e1s seleccionar el repositorio que deseas desplegar. Selecciona la rama que deseas desplegar si tienes varias ramas en tu repositorio.<\/p>\n<p>A continuaci\u00f3n, puedes asignar un nombre a esta aplicaci\u00f3n. Selecciona una <a href=\"https:\/\/kinsta.com\/es\/docs\/servicio-de-informacion\/ubicaciones-de-los-centros-de-datos\/#application-and-database-hosting-data-centers\">ubicaci\u00f3n de centro de datos<\/a> entre las disponibles en 24 y, a continuaci\u00f3n, Kinsta detectar\u00e1 autom\u00e1ticamente el comando de inicio.<\/p>\n<figure style=\"width: 1600px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/deploy-11ty-website.jpg\" alt=\"Despliegue con \u00e9xito del sitio est\u00e1tico Eleventy\" width=\"1600\" height=\"815\"><figcaption class=\"wp-caption-text\">Despliegue con \u00e9xito del sitio est\u00e1tico Eleventy<\/figcaption><\/figure>\n<p>Tu aplicaci\u00f3n comenzar\u00e1 a desplegarse. En unos minutos, se proporcionar\u00e1 un enlace para acceder a la versi\u00f3n desplegada de tu sitio web. En este caso, es <strong>https:\/\/ty-portfolio-lvjy7.kinsta.app\/<\/strong><\/p>\n\n<h2>Resumen<\/h2>\n<p>En este art\u00edculo, has aprendido c\u00f3mo crear un sitio web con estilo con Eleventy, c\u00f3mo personalizar un sitio est\u00e1tico Eleventy desde cero y c\u00f3mo construir un bonito sitio web de portafolio.<\/p>\n<p>Tanto si est\u00e1s creando un blog personal, un sitio de portafolio o una tienda online, Eleventy puede ayudarte a conseguir tus objetivos con el m\u00ednimo esfuerzo y el m\u00e1ximo impacto.<\/p>\n<p>As\u00ed que, \u00bfpor qu\u00e9 no lo pruebas hoy y <a href=\"https:\/\/sevalla.com\/application-hosting\/\">lo despliegas en Kinsta gratis<\/a>? Tenemos una <a href=\"https:\/\/docs.sevalla.com\/templates\/overview\">plantilla Eleventy \u00abHello World<\/a> \u00bb que puedes utilizar para ayudarte a empezar a crear a\u00fan m\u00e1s r\u00e1pidamente.<\/p>\n<p><em>Ahora es tu turno: \u00bfqu\u00e9 opinas de Eleventy? \u00bfHas utilizado Eleventy para construir algo? No dudes en compartir tus proyectos y experiencias con nosotros en la secci\u00f3n de comentarios.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Con el auge de los generadores de sitios est\u00e1ticos (SSG &#8211; Static Site Generators) como Eleventy, crear un sitio web est\u00e1tico con estilo y eficaz nunca &#8230;<\/p>\n","protected":false},"author":287,"featured_media":65226,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1328,1290],"class_list":["post-65225","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-generadores-sitios-estaticos","topic-headless-cms"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty) - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)\" \/>\n<meta property=\"og:description\" content=\"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinsta.es\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-27T10:34:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-08-23T15:31:59+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png\" \/>\n\t<meta property=\"og:image:width\" content=\"6084\" \/>\n\t<meta property=\"og:image:height\" content=\"3042\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_ES\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"25 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)\",\"datePublished\":\"2023-04-27T10:34:09+00:00\",\"dateModified\":\"2023-08-23T15:31:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\"},\"wordCount\":4158,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png\",\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\",\"name\":\"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty) - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/es\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png\",\"datePublished\":\"2023-04-27T10:34:09+00:00\",\"dateModified\":\"2023-08-23T15:31:59+00:00\",\"description\":\"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/es\/blog\/eleventy\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png\",\"width\":6084,\"height\":3042},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/es\/blog\/eleventy\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/es\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Headless CMS\",\"item\":\"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/es\/#website\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluciones de alojamiento premium, r\u00e1pidas y seguras\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/es\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/es\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/es\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinsta.es\/\",\"https:\/\/x.com\/Kinsta_ES\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty) - Kinsta\u00ae","description":"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/es\/blog\/eleventy\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)","og_description":"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.","og_url":"https:\/\/kinsta.com\/es\/blog\/eleventy\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinsta.es\/","article_published_time":"2023-04-27T10:34:09+00:00","article_modified_time":"2023-08-23T15:31:59+00:00","og_image":[{"width":6084,"height":3042,"url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png","type":"image\/png"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.","twitter_image":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png","twitter_creator":"@olawanle_joel","twitter_site":"@Kinsta_ES","twitter_misc":{"Escrito por":"Joel Olawanle","Tiempo de lectura":"25 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)","datePublished":"2023-04-27T10:34:09+00:00","dateModified":"2023-08-23T15:31:59+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/"},"wordCount":4158,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png","inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/es\/blog\/eleventy\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/","url":"https:\/\/kinsta.com\/es\/blog\/eleventy\/","name":"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty) - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png","datePublished":"2023-04-27T10:34:09+00:00","dateModified":"2023-08-23T15:31:59+00:00","description":"Aprende a utilizar Eleventy para crear un sitio web de portafolio est\u00e1tico impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.","breadcrumb":{"@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/es\/blog\/eleventy\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#primaryimage","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/04\/11ty-static-site-generator-01.png","width":6084,"height":3042},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/es\/blog\/eleventy\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/es\/"},{"@type":"ListItem","position":2,"name":"Headless CMS","item":"https:\/\/kinsta.com\/es\/secciones\/headless-cms\/"},{"@type":"ListItem","position":3,"name":"C\u00f3mo Crear un Sitio Web Est\u00e1tico con Estilo con Eleventy (11ty)"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/es\/#website","url":"https:\/\/kinsta.com\/es\/","name":"Kinsta\u00ae","description":"Soluciones de alojamiento premium, r\u00e1pidas y seguras","publisher":{"@id":"https:\/\/kinsta.com\/es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/es\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/es\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/es\/wp-content\/uploads\/sites\/8\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinsta.es\/","https:\/\/x.com\/Kinsta_ES","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/kinsta.com\/es\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/es\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/65225","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/comments?post=65225"}],"version-history":[{"count":14,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/65225\/revisions"}],"predecessor-version":[{"id":67008,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/posts\/65225\/revisions\/67008"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/translations\/es"},{"href":"https:\/\/kinsta.com\/es\/wp-json\/kinsta\/v1\/posts\/65225\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media\/65226"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/media?parent=65225"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/tags?post=65225"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/es\/wp-json\/wp\/v2\/topic?post=65225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}