Con el auge de los generadores de sitios estáticos (SSG – Static Site Generators) como Eleventy, crear un sitio web estático con estilo y eficaz nunca ha sido tan fácil.
En este artículo, exploraremos cómo utilizar Eleventy para crear un sitio web de portafolio estático impresionante y funcional sin necesidad de un lenguaje del lado del servidor o una base de datos.
También aprenderás a desplegar tu sitio web estático directamente desde tu repositorio de GitHub a la plataforma de Alojamiento de Aplicaciones de Kinsta, consiguiendo que tu sitio web funcione rápidamente en un dominio .kinsta.app gratuito.
Aquí tienes una demostración en vivo del sitio web estático que construirás con Eleventy.
Puedes acceder al repositorio GitHub de este proyecto si quieres echarle un vistazo más de cerca.
¿Qué es Eleventy?
Eleventy, también conocido como 11ty, es un generador de sitios estáticos que crea sitios web basados en HTML, CSS y JavaScript sin necesidad de bases de datos ni lenguajes de programación backend.
Eleventy es conocido por su sencillez y flexibilidad, ya que no te obliga a utilizar un único lenguaje de plantillas o framework. Es compatible con más de 10 lenguajes de plantillas e incluso te permite utilizar tantos como desees en un mismo proyecto:
Eleventy, como la mayoría de los SSG, te permite construir el contenido de tu sitio estático utilizando componentes reutilizables en lugar de crear documentos HTML completos para cada página.
Cómo Instalar Eleventy
Es fácil instalar Eleventy. Aquí tienes cómo:
- Asegúrate de que tienes Node.js instalado en tu ordenador. Puedes comprobarlo ejecutando el comando
node -ven tu terminal. ¿No lo tienes? Aquí tienes cómo instalar Node.js en tu ordenador. - Crea un nuevo directorio para tu proyecto.
- Abre tu terminal y ejecuta el comando
npm init -yen el directorio de tu proyecto para inicializar un nuevo proyecto Node.js, creando un archivo package.json con la configuración predeterminada. - Ejecuta el comando
npm install @11ty/eleventy --save-devpara instalar el paquete como dependencia de desarrollo en tu proyecto. - ¡Ya está! Ahora puedes ejecutar Eleventy ejecutando el comando
npx @11ty/eleventyen el directorio de tu proyecto. Esto generará los archivos de tu sitio y los mostrará en un directorio _site (o el directorio que hayas configurado) en la carpeta de tu proyecto.
Nota: Cuando ejecutes el comando npx @11ty/eleventy. Obtendrás este resultado:
[11ty] Wrote 0 files in 0.01 seconds (v2.0.0)Aquí se escriben 0 archivos porque no hay plantillas en la carpeta de tu proyecto.
Comandos y Configuración de Eleventy
Ya tienes tu proyecto Eleventy creado, pero eso no es todo. Necesitas crear algunas configuraciones y conocer algunos comandos básicos para que tu sitio estático pueda ser servido al navegador.
Comandos Eleventy
Éstos son algunos de los comandos clave de Eleventy que debes conocer:
npx eleventy: Este comando se utiliza para construir tu sitio y mostrar el resultado en la carpeta _site (o en la carpeta que hayas configurado como directorio de salida).npx @11ty/eleventy --serve: Este comando iniciará un servidor local para que puedas previsualizar tu sitio en tu navegador. Cuando realices cualquier cambio en tu sitio, tu proyecto se reconstruirá automáticamente y se actualizará en tu navegador.npx @11ty/eleventy --serve --port=8081: Este comando inicia el servidor Eleventy y especifica un puerto personalizado en el que escuchará el servidor.npx @11ty/eleventy --watch: Este comando vigilará los archivos de tu proyecto en busca de cambios y reconstruirá automáticamente tu sitio cuando sea necesario.
No tienes que memorizar estos comandos porque puedes añadirlos a los comandos generales en el objeto scripts de tu archivo package.json:
"scripts": {
"start": "npx @11ty/eleventy --serve",
"watch": "npx @11ty/eleventy --watch",
"build": "npx eleventy"
},Ahora puedes utilizar npm start para servir tu aplicación en lugar de npx @11ty/eleventy --serve, y también puedes ejecutar npm run build en lugar de npx eleventy.
Cómo configurar tu sitio estático con Eleventy
Eleventy es «zero-config» por defecto y tiene opciones de configuración flexibles. Aquí tienes algunas opciones de configuración clave que debes conocer:
- input: Esta opción te permite especificar el directorio de los archivos de tu proyecto. La mejor práctica es utilizar src.
- output: Esta opción te permite especificar el directorio de salida de tu sitio construido. Por defecto, Eleventy da salida a la carpeta _site. (Muchos desarrolladores utilizan public).
- templateFormats: Esta opción te permite especificar qué extensiones de archivo deben procesarse como plantillas. Por defecto, Eleventy procesa los archivos .html, .njk y .md como plantillas.
Estos son sólo algunos comandos y opciones de configuración disponibles en Eleventy. Para configurar tu proyecto Eleventy, crea un archivo .eleventy.js en la raíz de tu proyecto. A continuación, pega este código en el archivo para dar a tu proyecto una estructura que incluya directorios de entrada y salida:
module.exports = function (eleventyConfig) {
return {
dir: {
input: 'src',
output: 'public',
},
};
};Nota: eleventyConfig se pasa como argumento, proporcionando más opciones de configuración que se utilizarán más adelante en este proyecto.
Cómo Previsualizar un Sitio Eleventy
Ahora conoces algunos comandos clave que pueden utilizarse para previsualizar tu sitio web estático Eleventy, pero cuando ejecutas el comando, como npx @11ty/eleventy, no se sirve nada. Esto se debe a que no tienes ningún archivo de plantilla.
Puedes crear una carpeta src en la carpeta raíz de tu proyecto, y luego crear algunos archivos de plantilla como index.html o utilizar tu lenguaje de plantillas preferido para representar la página de inicio:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Eleventy Static Site</title>
</head>
<body>
Hello World!
</body>
</html>Si ahora ejecutas el comando npx @11ty/eleventy, se creará una carpeta pública con el archivo estático generado. Seguramente querrás que esto se sirva a tu navegador y habilitar algunas funciones de recarga en caliente. Esto es posible ejecutando el siguiente comando:
npx @11ty/eleventy --serveEsto servirá tu sitio en http://localhost:8080/.
Estos comandos son bastante difíciles de memorizar y utilizar siempre. Ya los has añadido a la sintaxis familiar en tu archivo package.json, así que puedes utilizar npm start para servir tu aplicación en http://localhost:8080/.
Cómo Crear un Sitio Web Estático de Portafolio con Eleventy
Ahora ya sabes cómo crear un sitio estático con Eleventy. Vamos a crear el proyecto del portafolio.
Puedes crear un nuevo proyecto Eleventy desde cero, o querrás imágenes, CSS y contenido real para tu proyecto, así que hemos creado una plantilla de repositorio GitHub para ayudarte a acelerar las cosas. En GitHub, selecciona Usar esta plantilla > Crear un nuevo repositorio para copiar estos activos y los archivos de configuración inicial en un nuevo repositorio propio, y luego descárgalos a tu máquina local.
Tu proyecto tendrá la siguiente estructura:
├── node_modules/
├── public/
├── src/
| ├── _includes
| ├── layouts
│ ├── assets
│ ├── css
│ ├── projects
│ └── index.njk
├── .eleventy.js
├── .gitignore
├── package.lock.json
└── package.jsonCómo utilizar plantillas en Eleventy
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ógica que puede utilizarse para generar el contenido de la página de forma dinámica.
- Plantillas de página: Definen la estructura y el contenido de las páginas individuales de tu sitio web.
- Plantillas de diseño: Definen la estructura general y el diseño de las páginas de tu sitio web. Suelen incluir elementos comunes como encabezados, pies de página, menús de navegación y barras laterales, que se comparten en varias páginas.
- Plantillas parciales: Definen secciones pequeñas y reutilizables del marcado HTML de tu sitio web. Suelen utilizarse para definir elementos comunes como encabezados, pies de página, menús de navegación y barras laterales, que pueden incluirse en plantillas de diseño y de página.
Ahora que entiendes cada uno de estos tipos de plantillas. Vamos a crear plantillas para el sitio web de portafolio estático.
Cómo crear diseños en Eleventy
Dentro del directorio src, crea un directorio _includes. Este contendrá todos nuestros diseños y parciales.
A continuación, puedes crear una carpeta layouts (para una correcta organización) que contenga todos tus diseños. Estos diseños son plantillas y pueden utilizar tu lenguaje de plantillas preferido, como Nunjucks, que es el que utilizamos aquí.
Vamos a crear un archivo base.njk para guardar el diseño general de todas tus páginas.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{{ content | safe }}
</div>
</body>
</html>En el código anterior, se crea un marcado HTML general y se incluye Font Awesome desde una CDN para que puedas acceder a sus iconos. Además, se pasa la variable content para que se incluya todo el contenido de cualquier página que utilice este diseño.
Pero esa no es toda la historia de la maquetación. Tu maqueta tendrá algunas secciones que aparecerán en todas las páginas, como la barra de navegación y el pie de página. Vamos a crear parciales para cada una de estas secciones.
Cómo utilizar parciales en Eleventy
Todos los parciales se almacenan en el directorio _includes. Para organizarlos adecuadamente, puedes almacenarlos en una carpeta. En este caso, crea una carpeta components dentro del directorio _includes y crea las plantillas navbar y footer.
Aquí tienes los parciales de la barra de navegación en navbar.njk:
<div class="nav-container">
<div class="logo">
<a href="/">
J.
</a>
</div>
<div class="nav">
<a href="/projects" class="link">
Projects
</a>
<a href="https://docs.google.com/document/d/10ZosQ38Z3804KYPcb_aZp9bceoXK-q3GrkHjYshqIRE/edit?usp=sharing" class="cta-btn">Resume</a>
</div>
</div>Aquí están los parciales del pie de página en footer.njk:
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
<a
href="https://twitter.com/olawanle_joel"
aria-label="Twitter"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-twitter"></i>
</a>
<a
href="https://github.com/olawanlejoel"
aria-label="GitHub"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-github"></i>
</a>
<a
href="https://www.linkedin.com/in/olawanlejoel/"
aria-label="LinkedIn"
target="_blank"
rel="noopener noreferrer"
>
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>Añade estos parciales a tu página o plantilla de diseño. Puedes hacerlo utilizando la declaración {% include %}. Este es el aspecto que tendrá la plantilla layouts/base.njk cuando incluyas las plantillas navbar y footer:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{{ content | safe }}
{% include "components/footer.njk" %}
</div>
</body>
</html>Cuando ejecutes el comando npm start, este diseño no aparecerá porque no se ha añadido a una plantilla de página. Crea una plantilla de página y añade este diseño.
Cómo crear plantillas de página en Eleventy
En tu carpeta src, crea un archivo index.njk para que sirva como página de inicio de tu sitio web de portafolio. Esta página utilizará el diseño base:
---
layout: layouts/base.njk
title: Home
---
<h1> This is the {{title}} Page. </h1>Cuando ejecutes ahora el comando npm start, tu sitio estático se cargará en http://localhost:8080/. Éste es el aspecto que tendrá la salida:
Cómo utilizar CSS e imágenes en Eleventy
Ahora ya conoces las distintas plantillas que existen, cómo funcionan y cómo se pueden utilizar juntas. Pero te darás cuenta de que en el archivo layouts/base.njk, se enlaza un archivo CSS para dar estilo a la página de la cartera, pero cuando se carga el sitio, los estilos CSS no se ven afectados porque el archivo CSS no se añade a la carpeta public.
Para solucionar esto, tienes que configurarlo en tu archivo.eleventy.js utilizando el parámetro eleventyConfig. Esto hace posible que Eleventy sepa que existe(n) el(los) archivo(s) CSS y también que esté(n) atento(s) a posibles cambios en el archivo CSS.
En la carpeta src, puedes crear una carpeta css para almacenar todos los archivos CSS que vayas a utilizar en tu proyecto, pero para este artículo, puedes utilizar un único archivo CSS: global.css. A continuación, puedes configurar la carpeta css, para que configure todos los archivos dentro de la carpeta:
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');Lo mismo con las imágenes. Si añades alguna imagen a tu página, te darás cuenta de que no se muestra. Para que se muestre, necesitas configurar la carpeta en la que se almacenan tus imágenes. Creemos una carpeta de activos para almacenar todas nuestras imágenes y configuremos la carpeta de activos.
eleventyConfig.addPassthroughCopy('src/assets');Este es el aspecto que tendrá ahora tu archivo de configuración:
module.exports = function (eleventyConfig) {
eleventyConfig.addPassthroughCopy('src/assets');
eleventyConfig.addPassthroughCopy('src/css');
eleventyConfig.addWatchTarget('src/css');
return {
dir: {
input: 'src',
output: 'public',
},
};
};Cuando ejecutes npm start, el estilo CSS funcionará, y tu página de inicio tendrá este aspecto:
Crear Parciales y Añadirlos a la Página de Inicio
Ya has conseguido crear un diseño y añadirlo a tu página de inicio (index.njk). Vamos a personalizar la página de inicio para que contenga alguna información sobre ti, como más información sobre ti, tus habilidades e información de contacto.
Puedes decidir añadir tus códigos y marcas directamente a la plantilla index.njk, pero vamos a crear Parciales individuales para la información de Inicio, acerca de, competencias y contacto.
Los parciales del Héroe
Esta es la primera sección debajo de la Navbar, cuyo objetivo principal es dar a los usuarios una idea de lo que trata el sitio web.
<div class="hero-container">
<img src='assets/profile.jpeg' class="profile-img" alt="Joe's personal headshot" />
<div class="hero-text">
<h1>Hey, I'm Joe 👋</h1>
<p>
I'm a software developer based in Lagos, Nigeria. I specialize in building (and occasionally designing) exceptional websites, applications, and everything in between.
</p>
<div class="social-icons">
<a href="https://twitter.com/olawanle_joel">
<i class="fa-brands fa-twitter"></i>
</a>
<a href="https://github.com/olawanlejoel">
<i class="fa-brands fa-github"></i>
</a>
<a href="https://www.linkedin.com/in/olawanlejoel/">
<i class="fa-brands fa-linkedin"></i>
</a>
</div>
</div>
</div>En el código anterior se incluyen algunos detalles sobre ti, junto con algunos iconos sociales para conectar enlaces a tus perfiles en las redes sociales.
Los parciales del Héroe deberían tener este aspecto:
Puedes añadir más contenido a la sección Héroe, cambiar los estilos en el archivo css/globals.css, o incluso crear tu propia versión de esta sección.
Los parciales Acerca de
La sección Acerca de ofrece a las personas que visitan tu portafolio más información sobre ti en tantos párrafos como desees. Puede ser una página aparte si tienes más información que contar.
<div class="about-container">
<h2>About Me</h2>
<div class="flex-about">
<div class="about-text">
<p>
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.
</p>
<p>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.</p>
</div>
<div class="about-img">
<Image src='/assets/about.jpeg' class="profile-img" alt="Joe and animal relaxing and having fun" />
</div>
</div>
</div>El código contiene información sobre ti (una imagen y algo de texto). Este es el aspecto que debe tener la sección «Acerca de»:
Los parciales de Competencias
Esta sección se utiliza para mostrar las tecnologías que utilizas o que te gusta utilizar.
<div class="skills-container">
<h2>Skills</h2>
<div class="grid-skills">
<div class="skill-card html">
<i class="fa-brands fa-html5 html-icon"></i>
<p>HTML</p>
</div>
<div class="skill-card css">
<i class="fa-brands fa-css3-alt css-icon"></i>
<p>CSS</p>
</div>
<div class="skill-card js">
<i class="fa-brands fa-js-square js-icon"></i>
<p>JavaScript</p>
</div>
<div class="skill-card react">
<i class="fa-brands fa-react react-icon"></i>
<p>React</p>
</div>
<div class="skill-card node">
<i class="fa-brands fa-node-js node-icon"></i>
<p>Node</p>
</div>
<div class="skill-card python">
<i class="fa-brands fa-python python-icon"></i>
<p>Python</p>
</div>
</div>
</div>El código anterior crea una tarjeta que contiene el icono de la tecnología y el nombre de cada habilidad. También puedes añadir más estilos y modificar el código para hacerlo más atractivo y distinto. Este es el aspecto que debe tener la sección de habilidades:
Los parciales de Contacto
Puesto que se trata de un portafolio, deberías añadir un medio para que los clientes potenciales se pongan en contacto contigo. Una forma sería que te enviaran un correo electrónico.
<div class="contact-container">
<h2>Get In Touch</h2>
<p>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!</p>
<a href="mailto:[email protected]" class='cta-btn'>Say Hello</a>
</div>Sustituye la dirección de correo electrónico de la etiqueta a por la tuya propia para que el botón lance una aplicación de correo electrónico para que la gente te envíe un mensaje.
Ya has creado con éxito todos los Parciales para tu página de inicio. A continuación, debes incluirlos en tu archivo index.njk para que se muestren en la página de inicio:
---
layout: layouts/base.njk
title: Home
---
{% include "components/hero.njk" %}
{% include "components/about.njk" %}
{% include "components/skills.njk" %}
{% include "components/contact.njk" %}Cuando ejecutes el comando start, tu página de inicio mostrará todos los Parciales añadidos en consecuencia.
Cómo utilizar las colecciones en Eleventy
En Eleventy, las colecciones son una forma de agrupar contenido relacionado para que puedas generar páginas 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ás, puedes crear un diseño para gestionar cómo se muestran estos contenidos.
Las colecciones se definen en el archivo de configuración .eleventy.js y pueden incluir datos de diversas fuentes, como archivos markdown o JSON.
Para este sitio web de portafolio, vamos a crear un directorio de proyectos en el directorio src, para almacenar el contenido markdown de cada proyecto. Este contenido incluirá detalles sobre el proyecto, el problema resuelto, las tecnologías utilizadas, los retos encontrados y las lecciones aprendidas.
Puedes crear un archivo markdown con el nombre del proyecto (quotes-generator.md) y pegar el código que aparece a continuación:
---
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
The 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.
### Technologies Used
The 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.
### Challenges and Lessons Learned
One 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.
Another 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.
Throughout 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.
Overall, 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.Nota: Si has utilizado la plantilla de inicio, ya deberías tenerlos, si no, puedes copiarlos del directorio de proyectos de nuestra plantilla de inicio en GitHub.
El frontmatter de la parte superior de estos archivos, al igual que las plantillas, hace que los valores estén disponibles para inyectarlos en tus plantillas.
Como estos archivos Markdown están en el directorio src, Eleventy los tratará como plantillas y generará una página HTML para cada una. Su URL será algo así como /projects/quotes-generator.
Eleventy, sin embargo, no sabrá qué diseño utilizar para estas páginas porque aún no tienen un valor de diseño en su frontmatter.
Creemos primero un diseño para este contenido antes de crear una colección y añadirlos como lista a una página de proyectos dedicada.
Como antes, crea un archivo de diseño (project.njk) en la carpeta de layouts. Para evitar repeticiones, ya que este archivo utilizará el marcado HTML por defecto, ajusta la maquetación base.njk creando un bloque que indique la sección de tu maquetación que va a cambiar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="icon" href="/assets/favicon.jpeg" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="/css/global.css" />
<title>J.'s Portfolio</title>
</head>
<body>
<div>
{% include "components/navbar.njk" %}
{% block content %}
{{ content | safe }}
{% endblock %}
{% include "components/footer.njk" %}
</div>
</body>
</html>Al bloque se le da un nombre contenido porque puedes tener muchos bloques dentro de tus plantillas. Ahora puedes ampliar esto a tu maqueta project.njk, de modo que sólo tengas que especificar el bloque content:
{% extends "layouts/base.njk" %}
{% block content %}
<div class="project-layout">
<h2>{{title}}</h2>
<img src="{{image}}" alt="image" class="banner-img" />
<a href="{{gitHubURL}}" class="cta-btn pt-btn">
<div class="small-icons">
GitHub <i class="fa-brands fa-github"></i>
</div>
</a>
{{ content | safe }}
</div>
{% endblock %}En el código anterior, estás especificando cómo se mostrará cada proyecto. Obtendrá el título, la imagen y el gitHubURL del frontmatter y luego añadirá otro contenido utilizando la variable de contenido ({{ content | safe }}).
El siguiente paso sería añadir una clave y un valor de diseño al frontmatter de cada proyecto:
---
layout: layouts/project.njk
title: Quotes Generator
description: "Helps you generates quotes from about 1600 quotes written by different authors . Quotes are automatically copied to your clipboards."
gitHubURL: "https://github.com/olawanlejoel/random-quote-generator"
image: "/assets/quotes-banner.jpeg"
---
…Cuando vuelvas a cargar la URL de cada proyecto, por ejemplo /projects/quotes-generator, verás que ahora utiliza el diseño creado:
Cómo utilizar las colecciones en las plantillas
Cada uno de tus proyectos se muestra ahora con el diseño especificado, pero ¿cómo 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í es donde entran en juego las colecciones.
Para utilizar la colección, debes definirla en el archivo de configuración .eleventy.js utilizando el método addCollection().
module.exports = function (eleventyConfig) {
// …
eleventyConfig.addCollection('projects', (collection) => {
return collection.getFilteredByGlob('src/projects/*.md');
});
return {
// ...
};
};En el código anterior, el método addCollection() se utiliza para definir una colección llamada proyectos. La función de devolución de llamada pasada a addCollection() devuelve todos los archivos markdown del directorio de proyectos utilizando el método getFilteredByGlob().
Una vez definida una colección, puedes utilizarla en una plantilla para generar páginas basadas en ese contenido. Vamos a crear una plantilla de página proyectos.njk, que utilizaría el diseño base.njk, pero su contenido serán los proyectos de la colección proyectos:
---
layout: layouts/base.njk
title: Projects
---
<div class="projects-container">
<h2>Projects</h2>
<div class="projects-grid">
{% for project in collections.projects %}
<div class="project-card">
<div class="project-header">
<i class="fa-regular fa-folder-open folder-icon"></i>
<div class="small-icons">
<a href={{project.data.gitHubURL}}><i class="fa-brands fa-github"></i></a>
</div>
</div>
<h3>{{project.data.title}}</h3>
<p>{{project.data.description}}</p>
<a href="{{project.url}}" class="cta-btn">Read more</a>
</div>
{% endfor %}
</div>
</div>En el código anterior, la sentencia {% for %} se utiliza para recorrer todos los proyectos de la colección de proyectos y generar una ficha de proyecto para cada uno de ellos.
Tendrás acceso a todas las variables utilizando project.data.[key]. Por ejemplo, el código anterior mostrará el título, la descripción y la URL de GitHub del proyecto. También puedes acceder a la URL del proyecto utilizando project.url.
Cuando ejecutes el comando start y navegues a la página de proyectos, este es el aspecto que tendrá tu página cuando añadas muchos proyectos:
Cómo utilizar los códigos cortos
Los códigos cortos son una forma de definir etiquetas HTML personalizadas o valores dinámicos JavaScript que puedes reutilizar en tus plantillas. Por ejemplo, puedes definir un shortcode para generar el año en curso y añadirlo a tu página web.
En el archivo de configuración .eleventy.js, puedes definir un shortcode utilizando el método addShortcode(). Por ejemplo, el siguiente código define un shortcode llamado año:
module.exports = function (eleventyConfig) {
// ...
eleventyConfig.addShortcode('year', () => {
return `${new Date().getFullYear()}`;
});
return {
// ...
};
};El shortcode año devolverá el año actual, que puedes añadir a cualquier plantilla de tu proyecto. Por ejemplo, en lugar de codificar el año en el pie de página de este sitio web, puedes añadirlo dinámicamente utilizando {% year %}, para que se actualice cada año:
<hr />
<div class="footer-container">
<p>© {% year %} Joel's Portfolio</p>
<div class="social_icons">
// ...
</div>
</div>Cuando se muestre la página, la salida incluirá el año actual dentro de la etiqueta HTML p.
Cómo Añadir un Tema a un Sitio Eleventy
Añadir un tema a un sitio Eleventy puede ser una forma estupenda de personalizar el aspecto de tu sitio rápidamente. 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 oficiales de Eleventy y los temas Jamstack.
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áquina local. Asegúrate de leer su documentación para conocer los pasos para configurar y personalizar los proyectos.
Ejecuta npm install para instalar todos los paquetes utilizados, y luego ejecuta npm start para servir tu aplicación localmente a http://localhost:8080/.
Cómo Desplegar un Sitio Eleventy
Ya has conseguido crear un elegante sitio web estático de portafolio con Eleventy. Tener este tipo de sitio web en tu máquina local no es suficiente. Querrás alojarlo online para compartirlo con quien quieras.
Kinsta es una plataforma en la nube que te permite alojar sitios web estáticos, incluido Eleventy. Esto se puede hacer empujando tus códigos a GitHub, y finalmente desplegándolos en Kinsta.
Envía tu sitio Eleventy a GitHub
Primero, crea un repositorio en GitHub; esto te dará acceso a la URL del repositorio. A continuación, puedes utilizar comandos git para enviar tus códigos.
Antes de enviar tus archivos a GitHub, es mejor que crees un archivo .gitignore para especificar algunos archivos y carpetas que git debería ignorar al enviar tus códigos. Crea un archivo . gitignore en tu carpeta raíz y añade lo siguiente:
# dependencies
/node_modules
# run
/publicAhora puedes inicializar tu repositorio Git local abriendo tu terminal, navegando hasta el directorio que contiene tu proyecto y ejecutando el siguiente comando:
git initAhora añade tu código al repositorio Git local utilizando el siguiente comando:
git addAhora puedes confirmar tus cambios utilizando el siguiente comando:
git commit -m "my first commit"Nota: Puedes sustituir «my first commit» por un breve mensaje que describa tus cambios.
Por último, envía tu código a GitHub utilizando los siguientes comandos:
git remote add origin [repository URL]
git push -u origin masterNota: Asegúrate de sustituir «[URL del repositorio]» por la URL de tu propio repositorio de GitHub.
Una vez que hayas completado estos pasos, tu código será enviado a GitHub y accesible a través de la URL de tu repositorio.
¡Ya puedes desplegarlo en Kinsta!
Desplegar tu sitio Eleventy en Kinsta
El despliegue en Kinsta se realiza en cuestión de minutos. Comienza en el panel de control MyKinsta para iniciar sesión o crear tu cuenta. A continuación, autorizarás a Kinsta en GitHub.
A continuación, haz clic en Aplicaciones en la barra lateral izquierda, luego en Añadir servicio y, por último, en Aplicación en las opciones desplegables:
Aparecerá un modal a través del cual podrás seleccionar el repositorio que deseas desplegar. Selecciona la rama que deseas desplegar si tienes varias ramas en tu repositorio.
A continuación, puedes asignar un nombre a esta aplicación. Selecciona una ubicación de centro de datos entre las disponibles en 25 y, a continuación, Kinsta detectará automáticamente el comando de inicio.
Tu aplicación comenzará a desplegarse. En unos minutos, se proporcionará un enlace para acceder a la versión desplegada de tu sitio web. En este caso, es https://ty-portfolio-lvjy7.kinsta.app/
Resumen
En este artículo, has aprendido cómo crear un sitio web con estilo con Eleventy, cómo personalizar un sitio estático Eleventy desde cero y cómo construir un bonito sitio web de portafolio.
Tanto si estás creando un blog personal, un sitio de portafolio o una tienda online, Eleventy puede ayudarte a conseguir tus objetivos con el mínimo esfuerzo y el máximo impacto.
Así que, ¿por qué no lo pruebas hoy y lo despliegas en Kinsta gratis? Tenemos una plantilla Eleventy «Hello World » que puedes utilizar para ayudarte a empezar a crear aún más rápidamente.
Ahora es tu turno: ¿qué opinas de Eleventy? ¿Has utilizado Eleventy para construir algo? No dudes en compartir tus proyectos y experiencias con nosotros en la sección de comentarios.
Deja una respuesta