Cómo crear e implementar su primer sitio web de Eleventy

El autor seleccionó Internet Archive para recibir una donación como parte del programa Write for DOnations.

Eleventy (también conocido como 11ty) es un generador de sitios estáticos (SSG) para crear sitios web. Fue lanzado en 2017 por Zach Leatherman como una alternativa basada en JavaScript a Jekyll, uno de los primeros SSG populares, que está escrito en Ruby. Eleventy se ha ganado la reputación de ser una de las opciones más flexibles y de mayor rendimiento para crear sitios web estáticos, lo que ha llevado a tasas de adopción en constante aumento en el ecosistema Jamstack.

Es importante tener en cuenta que Eleventy no es un marco de JavaScript y no incluye ningún código JavaScript del lado del cliente. Toma archivos de plantilla especificados en HTML, Markdown o el lenguaje de plantillas que elijas y genera un sitio web estático completo listo para implementarse en un servidor web de tu elección.

Mientras que la mayoría de los demás SSG se limitan a un solo lenguaje de plantillas, Eleventy admite varios lenguajes de plantillas, como HTML, Liquid, Markdown, Nunjucks, Handlebars, moustache, EJS, Haml, Pug, etc., e incluso puedes combinarlos en el mismo proyecto. Esta flexibilidad es una de las cosas que hace que Eleventy se destaque de su competencia.

En este tutorial, desarrollará un sitio web estático desde cero con Eleventy y lo implementará en la plataforma de aplicaciones de DigitalOcean de forma gratuita.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Una cuenta de DigitalOcean.
• Una cuenta de GitHub.
• Node.js instalado y configurado en su máquina, junto con npm, el administrador de paquetes de Node.js. Para obtener instrucciones de instalación, siga Cómo instalar Node.js y crear un entorno de desarrollo local. Tenga en cuenta que la última versión de Eleventy al momento de escribir este artículo (v0.12.1) requiere Node.js v10 o posterior.
• Git se ha inicializado y configurado en tu máquina local. Para comenzar a usar Git, sigue el artículo Cómo contribuir al código abierto: Introducción a Git.
• Un conocimiento básico de HTML, CSS y JavaScript, que puede encontrar en nuestras series Cómo crear un sitio web con HTML, Cómo crear un sitio web con CSS y en Cómo codificar en JavaScript.

Paso 1: Configuración del proyecto

A diferencia de competidores como Jekyll y Hugo, Eleventy no proporciona una forma de crear un nuevo proyecto, por lo que necesitará crear un proyecto Node.js normal y luego agregar Eleventy como dependencia.

El primer paso es iniciar la terminal en su computadora, crear un nuevo directorio en algún lugar de su sistema de archivos y cambiarlo como se muestra a continuación.

mkdir eleventy-blog
cd eleventy-blog

En la raíz del eleventy-blogdirectorio, inicialice el proyecto con un package.jsonarchivo con npm init -y, e instale Eleventy como una dependencia de desarrollo pasando el -Dindicador al installsubcomando.

npm init -y
npm install -D @11ty/eleventy

Una vez instalado el paquete Eleventy, inspeccione el contenido del directorio de su proyecto con ls. Contendrá un package.jsonarchivo, un package-lock.jsonarchivo y un node_modulesdirectorio.

El resultado debería ser similar a esto:

Outputnode_modules  package-lock.json  package.json

Abra el package.jsonarchivo en su editor de texto favorito, luego reemplace la scriptspropiedad existente con las líneas resaltadas a continuación.

once-blog/paquete.json

{  "name": "eleventy-blog",  "version": "1.0.0",  "description": "",  "main": "index.js",  "scripts": {    "build": "eleventy",    "start": "eleventy --serve"  },  "keywords": [],  "author": "",  "license": "ISC",  "devDependencies": {    "@11ty/eleventy": "^0.12.1"  }}

Aquí hay dos scripts: buildpara crear los archivos del sitio web y startpara ejecutar el servidor web Eleventy en http://localhost:8080.

Guarde el archivo y luego ejecute el siguiente comando para crear el sitio web:

npm run build

El resultado debería ser similar a esto:

Output eleventy-blog@1.0.0 build eleventyWrote 0 files in 0.04 seconds (v0.12.1)

El resultado indica que aún no ha creado ningún archivo, por lo que no hay nada que crear. En el siguiente paso, comenzará a agregar los archivos necesarios para el sitio web.

A continuación se muestra la estructura final del directorio del proyecto en el que trabajará. Comenzará desde un directorio vacío y agregará nuevas funciones de manera incremental hasta llegar a esta estructura.

.├── about│ └── index.md├── css│ └── style.css├── _data│ └── site.json├── _includes│ ├── layouts│ │ ├── base.njk│ │ ├── page.njk│ │ └── post.njk│ └── nav.njk├── index.njk├── node_modules├── package.json├── package-lock.json├── posts│ ├── first-post.md│ ├── second-post.md│ └── third-post.md└── _site    ├── about    │ └── index.html    ├── css    │ └── style.css    ├── index.html    └── posts        ├── first-post        │ └── index.html        ├── second-post        │ └── index.html        └── third-post            └── index.html

En este paso, creaste un proyecto Node.js y agregaste Eleventy como dependencia. En el siguiente paso, elegirás un lenguaje de plantillas.

Paso 2: Elegir un lenguaje de plantillas

Para este tutorial, utilizaremos la plantilla Nunjucks, una opción habitual en muchos proyectos de Eleventy. (Según tus preferencias, también puedes elegir un lenguaje de plantillas diferente).

En la raíz del directorio de tu proyecto, crea un index.njkarchivo y ábrelo en tu editor de texto. Agrega un mensaje de “Hola mundo” al archivo como se muestra a continuación y luego guarda el archivo.

once-blog/index.njk

h1Hello, world!/h1

Una vez guardado, vuelva a ejecutar el comando de compilación. Esto convertirá el index.njkarchivo en un index.htmlarchivo y lo enviará a un nuevo _sitedirectorio en la raíz del proyecto.

npm run build

El resultado debería ser similar a esto:

Output eleventy-blog@1.0.0 build eleventyWriting _site/index.html from ./index.njk.Wrote 1 file in 0.08 seconds (v0.12.1)

En este punto, puede ver el sitio web en el navegador iniciando un servidor de desarrollo como se muestra a continuación.http://localhost:8080

npm start

El resultado debería ser similar a esto:

Output eleventy-blog@1.0.0 start eleventy --serveWriting _site/index.html from ./index.njk.Wrote 1 file in 0.08 seconds (v0.12.1)Watching..[Browsersync] Access URLs: -----------------------------------       Local: http://localhost:8080    External: http://172.29.217.37:8080 -----------------------------------          UI: http://localhost:3001 UI External: http://localhost:3001 -----------------------------------[Browsersync] Serving files from: _site

Si desea utilizar un puerto diferente, puede especificarlo a través de la --portopción, como se muestra aquí:

npm start -- --port 4040 to set a different port

El --separador del comando anterior se utiliza para distinguir los parámetros que se pasan al npmcomando en sí de los que se pasan al script. Después de iniciar el servidor de desarrollo, ábralo en su navegador web para ver el sitio en acción. Puede salir del servidor en cualquier momento presionando en su teclado.http://localhost:8080Ctrl + C

En este paso, utilizó Nunjucks como lenguaje de plantillas y comenzó a crear un sitio web. En la siguiente sección, aprenderá sobre los diseños en Eleventy y creará una página de inicio para el sitio web.

Paso 3: creación de la página de inicio

Para que tu proyecto sea más flexible y escalable desde el principio, tendrás que crear una plantilla base que se aplicará a todas las páginas del sitio. Tradicionalmente, esto se denomina basediseño y debe ir en un layoutsdirectorio anidado dentro de otro _includesdirectorio. Crea el _includes/layoutsdirectorio con el siguiente comando:

mkdir -p _includes/layouts

En el _includes/layoutsdirectorio, crea un base.njkarchivo y ábrelo en tu editor de texto. Copia y pega el siguiente código en el archivo. Este es el código HTML5 básico que servirá como base para todas las páginas del sitio web.

_incluye/diseños/base.njk

!DOCTYPE htmlhtmlhead  meta charset="UTF-8"  meta name="viewport" content="width=device-width, initial-scale=1.0"  title{{ title }}/title/headbody  header    h1{{ title }}/h1  /header  main    {{ content | safe }}  /main/body/html

Los contenidos entre llaves dobles son variables Nunjucks que se reemplazarán en consecuencia cuando se construya una página derivada. La {{ title }}variable se proporcionará a través del bloque de contenido preliminar de la página, mientras que {{ content }}se reemplazará con todo el contenido de la página entrante que no forme parte del contenido preliminar. Este último se envía a través del safefiltro para evitar que se escape.

Regrese al index.njkarchivo en la raíz de su proyecto y modifíquelo como se muestra a continuación:

once-blog/index.njk

---title: Homepagelayout: layouts/base.njk---h1Welcome to this brand new Eleventy website!/h1

El contenido a cada lado de los guiones triples constituye el contenido preliminar del archivo, mientras que el resto del archivo es lo que se pasará a sus diseños como su content. En el contenido preliminar, los titley layoutdel archivo se especifican en consecuencia.

Si su servidor de desarrollo aún está en funcionamiento, diríjase a la URL del host local de su sitio para ver los cambios o inicie el servidor primero npm startantes de intentar verlo en un navegador web.

Como puede ver en la captura de pantalla anterior, la base.njkplantilla ha tenido efecto en la página de inicio.

En este paso, agregaste una plantilla base para las páginas de tu sitio y creaste una página de inicio. Sin embargo, aún no tiene ningún estilo más allá de los valores predeterminados del navegador. En la siguiente sección, mejorarás el diseño del sitio web agregando un menú de navegación.

Paso 4: Agregar un menú de navegación

El _includesdirectorio es donde colocarás los diferentes componentes del sitio web. El contenido de este directorio son archivos parciales que se pueden colocar en los archivos de diseño para facilitar su reutilización. En esta sección, crearás el menú de navegación como parte del diseño y lo incluirás en el basediseño.

En el _includesdirectorio, crea un nuevo archivo llamado nav.njk. Ábrelo en tu editor y complétalo con el código que aparece a continuación. Es el código para la barra de navegación superior e incluye el título del sitio, así como enlaces a la página de inicio y una página “Acerca de” que aún no se ha creado.

once-blog/_incluye/nav.njk

nav role="navigation" aria-label="main navigation"  div    div      My Eleventy Blog    /div  /div  div    a href="/"      Home    /a    a href="/about"      About Me    /a  /div/nav

Guarde y cierre el nav.njkarchivo y abra el archivo de plantilla base ( _includes/layouts/base.njk) en su editor. Continúe e incluya el nuevo fragmento de navegación en este archivo mediante la includesintaxis que se muestra a continuación:

once-blog/_includes/diseños/base.njk

!DOCTYPE htmlhtml  head    meta charset="UTF-8" /    meta name="viewport" content="width=device-width, initial-scale=1.0" /    title{{ title }}/title  /head  body    header{% include "nav.njk" %}/header    main      {{ content | safe }}    /main  /body/html

En el navegador, el sitio debería verse así:

Cuando vuelvas a consultar la página de inicio, el menú de navegación debería aparecer tal como se muestra en la captura de pantalla anterior. El título del sitio “My Eleventy Blog” está codificado en el navparcial, pero esto no es óptimo porque es probable que repitas el título en otras partes del sitio y cambiarlo más tarde se vuelve tedioso, ya que tendrás que buscar cada lugar donde se utilizó.

Un mejor enfoque es proporcionar este valor a través de un archivo de datos global. Estos son archivos JSON ubicados en un _datadirectorio en la raíz del proyecto que proporcionan datos globales accesibles para todos los archivos de plantilla. En la raíz del proyecto, crea un _datadirectorio, seguido de un site.jsonarchivo dentro de él. Ábrelo site.jsonen tu editor de texto y especifica el título del sitio usando el código a continuación.

once-blog/_data/sitio.json

{  "title": "My Eleventy Blog",  "url": "https://example.com/",  "language": "en-US",  "description": "A simple blog with awesome content"}

En este punto, puede guardar y cerrar el archivo, luego regresar al nav.njkarchivo en el _includesdirectorio y reemplazar el título del sitio codificado con la variable adecuada.

once-blog/_incluye/nav.njk

. . .div  {{ site.title }}/div. . .

El sitio debería verse exactamente igual que antes, pero este pequeño cambio hace que la configuración y actualización de datos globales sea mucho más fácil. Una cosa a tener en cuenta sobre las variables globales es que tienen como ámbito el nombre del archivo JSON, por eso usamos {{ site.title }}arriba. Puedes crear otros archivos de datos según sea necesario y usarlos en tus plantillas. Por ejemplo, puedes tener un author.jsonarchivo que contenga tus datos personales, como tu nombre, biografía y enlaces a tus perfiles de redes sociales. Luego, se puede acceder a dichos datos a través de variables (como {{ author.bio }}) en cualquier página del sitio web.

Regrese a su index.njkarchivo en la raíz del proyecto y actualice su contenido como se muestra a continuación para que utilice el título y la descripción del sitio:

once-blog/index.njk

---title: Homepagelayout: layouts/base.njk---section  div    div      h1{{ site.title }}/h1      h2{{ site.description }}/h2    /div  /div/section

En el navegador, el sitio debería verse así:

En este paso, agregó un menú de navegación al sitio web. Sin embargo, el sitio usa el estilo predeterminado. En la siguiente sección, diseñará el sitio web usando el marco Bulma CSS, que proporciona componentes de interfaz basados ​​en flexbox para crear sitios web responsivos.

Paso 5: Agregar una hoja de estilos

Por el momento, Eleventy no reconoce los archivos CSS para su inclusión automática en el directorio de compilación, por lo que se necesitan algunos pasos adicionales para que esto funcione. En concreto, deberá crear un directorio de hojas de estilo y asegurarse de que se copie en la salida de compilación ( _site) cuando se construya el sitio. También deberá asegurarse de que la modificación de una hoja de estilo active una reconstrucción y una actualización automática en el navegador web. Puede lograr esto creando un archivo de configuración para Eleventy.

En la raíz del proyecto, crea una csscarpeta seguida de un style.cssarchivo dentro de ella. Abre style.csse importa el marco CSS de Bulma usando el código que se muestra a continuación:

once-blog/css/estilo.css

@import "https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css";

Guarde el archivo.

A continuación, crea un .eleventy.jsarchivo en la raíz de tu proyecto. Este es el archivo de configuración de Eleventy, similar a _config.ymllos archivos de los proyectos de Jekyll. Ten en cuenta que este archivo estará oculto en tu sistema de archivos, ya que tiene un punto como prefijo. Deberás usar ls -apara que aparezca cuando enumeres el contenido del directorio.

Abra .eleventy.jssu editor de texto y pegue lo siguiente para incluir el cssdirectorio en la compilación y también para ver si hay cambios en la carpeta:

eleventy-blog/.eleventy.js

module.exports = function (eleventyConfig) {  // Copy the `css` directory to the output  eleventyConfig.addPassthroughCopy('css');  // Watch the `css` directory for changes  eleventyConfig.addWatchTarget('css');};

En este punto, debes detener el servidor con Ctrl+Cy volver a iniciarlo con npm startantes de que los cambios surtan efecto. Deberás hacer esto cada vez que modifiques el archivo de configuración.

Si revisas el sitio en tu navegador ahora mismo, no notarás ningún cambio. Esto se debe a que la hoja de estilos aún no se ha vinculado a ninguna plantilla. Continúa y agrégala a la base.njkplantilla como se muestra a continuación.

once-blog/_includes/diseños/base.njk

!DOCTYPE htmlhtml  head    meta charset="UTF-8" /    meta name="viewport" content="width=device-width, initial-scale=1.0" /    link rel="stylesheet" href="/css/style.css" /    title{{ title }}/title  /head  body    header{% include "nav.njk" %}/header    main      {{ content | safe }}    /main  /body/html

Después de guardar el archivo, los estilos deberían activarse inmediatamente.

En este paso, agregaste estilo al sitio web usando el marco CSS de Bulma. En el siguiente paso, ampliarás el sitio creando una página "Acerca de".

Paso 6: Crear una página Acerca de

En este momento, hay un enlace a una página “Acerca de” inexistente en el menú de navegación. Para cambiarlo, crea un diseño único para todas las páginas estáticas y, luego, para la página “Acerca de”. En la _includes/layoutscarpeta, crea un page.njkarchivo. Este será el diseño para todas las páginas estáticas del sitio.

Abra el nuevo archivo en su editor y complételo con el código que aparece a continuación. La layoutpropiedad front matter se utiliza para indicar que el pagediseño debe heredar de la plantilla creada anteriormente base.njk. Esto se conoce como encadenamiento de diseño y nos permite reutilizar una plantilla mientras agregamos elementos únicos que son específicos de la nueva plantilla, lo que ayuda a evitar la repetición innecesaria de estructuras básicas del sitio.

once-blog/_incluye/diseños/pagina.njk

---layout: layouts/base.njk---article  div    div      div        div          h1{{ title }}/h1          {{ content | safe }}        /div      /div    /div  /div/article

Ahora que tienes un diseño de página, puedes crear la página “Acerca de”. Para ello, crea un directorio en la raíz del proyecto llamado about, y agrega un nuevo index.mdarchivo Markdown dentro de él.

Añade el siguiente código al archivo:

once-blog/sobre/index.md

---title: About Melayout: layouts/page.njk---I am a person that writes stuff.

Después de guardar el archivo, vaya a . La página debería cargarse correctamente con el diseño especificado.https://localhost:8080/about

La creación de otras páginas, como una página de contacto o una página de newsletter, se puede realizar de la misma manera: cree un directorio con el nombre de la página y, a continuación, agregue un index.mdarchivo en la raíz del nuevo directorio. También puede utilizar un archivo HTML o Nunjucks en lugar de Markdown si lo prefiere.

En este paso, creaste un diseño único para páginas estáticas y agregaste una página "Acerca de" al sitio. En la siguiente sección, crearás y procesarás publicaciones de blog en un sitio web de Eleventy.

Paso 7: creación de publicaciones

Crear una entrada de blog es muy similar a crear una página. Para empezar, deberá crear un directorio llamado postsen la raíz del proyecto para guardar todas las entradas.

Sin embargo, crearás un diseño diferente para las publicaciones. Será similar al diseño de pages, pero incluirás una fecha para diferenciarlo. En un proyecto del mundo real, es probable que quieras diseños diferentes para las publicaciones y las páginas, por lo que es una buena práctica crear un diseño nuevo para cada una.

En el _includes/layoutsdirectorio, crea un nuevo post.njkarchivo y ábrelo en tu editor de texto. Pega el código que aparece a continuación en tu post.njkarchivo de diseño.

once-blog/_incluye/diseños/post.njk

---layout: layouts/base.njk---section  div    div      div        article          h1{{ title }}/h1          p            Published on: time datetime="{{ page.date }}"{{ page.date }}/time          /p          {{ content | safe }}        /article      /div    /div  /div/section

De manera similar a la page.njkplantilla, la plantilla de publicación extiende la plantilla base con adiciones que tienen sentido para las publicaciones (como la fecha de publicación).

Para utilizar esta plantilla, cree un nuevo archivo en su postsdirectorio llamado first-post.mdy ábralo en su editor de texto.

Pegue el siguiente contenido en el first-post.mdarchivo:

once-blog/publicaciones/primera-publicacion.md

---title: My First Blog Postdescription: This is the first post on my blogtags: postdate: 2021-06-19layout: layouts/post.njk---You’ll find this post in your `posts` directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run `eleventy --serve`, which launches a web server and auto-regenerates your site when a file is updated.

Guarde el archivo y luego diríjase a su navegador. Observe cómo la URL corresponde a la ubicación del archivo en el proyecto (excluyendo la extensión). Así es como se manejan las URL de manera predeterminada, pero se pueden cambiar a otro formato mediante la clave de enlace permanente.http://localhost:8080/posts/first-post

La publicación se muestra correctamente, pero observe cómo está formateada actualmente la fecha. Este formato de fecha es difícil de leer para los usuarios, pero Eleventy no ofrece opciones de formato integradas para las fechas, a diferencia de la mayoría de los demás SSG. Esto significa que debe usar un paquete externo para obtener un formato más legible para humanos en Eleventy.

En este paso, creaste un diseño único para las publicaciones del blog y agregaste una publicación al sitio. En la siguiente sección, crearás un filtro personalizado que te ayudará con el formato de fecha.

Paso 8: Uso de filtros en Eleventy

Eleventy admite filtros para transformar contenido de varias maneras. Por ejemplo, el safefiltro utilizado anteriormente evita el escape de contenido HTML y hay otros filtros integrados, como sluglos que transforman texto en cadenas compatibles con URL. También puede agregar sus propios filtros personalizados que se pueden usar en cualquier plantilla. Estas personalizaciones se pueden realizar a través del archivo de configuración.

Continúe y agregue un filtro universal para formatear fechas de modo que se pueda usar en la plantilla de publicación. Comience instalando Luxon, una biblioteca JavaScript liviana para formatear fechas:

npm install --save luxon

Luego, abra el .eleventy.jsarchivo de configuración y actualice su contenido de la siguiente manera:

eleventy-blog/.eleventy.js

const { DateTime } = require('luxon');module.exports = function (eleventyConfig) {  // Copy the `css` directory to the output  eleventyConfig.addPassthroughCopy('css');  // Watch the `css` directory for changes  eleventyConfig.addWatchTarget('css');  eleventyConfig.addFilter('readableDate', (dateObj) = {    return DateTime.fromJSDate(dateObj, { zone: 'utc' }).toFormat(      'dd LLL yyyy'    );  });};

Las líneas resaltadas describen cómo agregar un filtro personalizado a Eleventy. Primero, debe importar los objetos que necesite desde cualquier biblioteca externa. El DateTimetipo de Luxon proporciona varios métodos para fines de formato.

Para agregar un filtro, se debe llamar al addFilter()método proporcionado por el eleventyConfigargumento. Este método toma el nombre del filtro como su primer argumento y la función de devolución de llamada es lo que se ejecutará cuando se use el filtro. En el fragmento anterior, se llama al filtro readableDatey la función de devolución de llamada se usa para dar formato a un objeto de fecha utilizando los tokens de fecha proporcionados. Esto generará una fecha con el siguiente formato: 19 Jul 2021 .

Guarde el archivo de configuración y reinicie el servidor para que los cambios surtan efecto. Luego, utilice el readableDatefiltro en la plantilla de publicación como se muestra a continuación para formatear la fecha de publicación según el diseño especificado.

once-blog/_incluye/diseños/post.njk

. . .p  Published on: time datetime="{{ page.date }}"{{ page.date | readableDate }}/time/p. . .

Una vez que abra la publicación en su navegador, notará que se ha actualizado el formato de la fecha.

En este paso, agregaste un filtro para cambiar el formato de fecha en las publicaciones del blog. En la siguiente sección, mostrarás una lista de publicaciones en la página de inicio, como es habitual en la mayoría de los blogs personales.

Paso 9: Visualización de publicaciones en la página de inicio

Para que los visitantes de su sitio puedan descubrir las publicaciones del blog con mayor facilidad, es una buena idea incluirlas en la página de inicio. Para implementar esta función, utilizará la función de colecciones de Eleventy.

Antes de continuar con la actualización del index.njkarchivo, deberá crear al menos tres publicaciones adicionales para mostrar en la página de inicio. Puede copiar la primera publicación en archivos nuevos y cambiar el título y la descripción de cada una de ellas. Una vez que haya terminado con eso, actualice su index.njkarchivo como se muestra a continuación:

once-blog/index.njk

---title: Homepagelayout: layouts/base.njk---section  div    div      h1{{ site.title }}/h1      h2{{ site.description }}/h2    /div  /div/sectionsection  div    h2Recent posts/h2    div      {% for post in collections.post | reverse %}        {% if loop.index0  3 %}          div            div              header                p                  {{ post.data.title }}                /p              /header              div                div                  {{ post.data.description }}                /div              /div              footer                a href="{{ post.url }}"Read article/a              /footer            /div          /div          {% endif %}      {% endfor %}    /div  /div/section

La forconstrucción de bucle del fragmento anterior proviene del lenguaje de plantillas Nunjucks y es una de las formas de iterar sobre una colección en Eleventy. Comienza con {% for post in collection.post | reverse %}y termina con {% endfor %}. La postcolección es creada por Eleventy y consta de cualquier página que tenga su tagspropiedad front matter establecida en post.

El reversefiltro se utiliza aquí para que la iteración comience desde la publicación más reciente en lugar del orden predeterminado, que coloca las publicaciones más antiguas primero. Dentro del bucle, la salida de la colección se limita a tres elementos y la postvariable local se utiliza para acceder al título, la descripción y la URL de cada publicación de la colección.

Después de guardar el archivo, vaya a la página de inicio en el navegador para ver los resultados. Debería verse similar a la captura de pantalla que aparece a continuación.

En este paso, creaste publicaciones de blog adicionales y usaste la función de colecciones de Eleventy para incluirlas en la página de inicio del sitio web. Ahora tienes un sitio web con estilo, una página de inicio, una página "Acerca de" y algunas publicaciones. A continuación, lo implementarás en producción a través de GitHub y la plataforma de aplicaciones de DigitalOcean.

Paso 10: Enviar el sitio web a GitHub

Antes de poder implementar su código en la plataforma de aplicaciones de DigitalOcean, debe colocar su sitio en un repositorio de Git y enviar ese repositorio a GitHub. Lo primero que debe hacer es inicializar un repositorio de Git en el directorio de su proyecto:

git init

A continuación, crea un .gitignorearchivo en la raíz del proyecto para poder excluir el contenido de los directorios node_modulesy _sitedel seguimiento en el repositorio de Git.

.gitignore

node_modules_site

Después de guardar el archivo, ejecute los siguientes comandos para agregar todos los archivos del proyecto al área de preparación y luego realice su confirmación inicial:

git add -A
git commit -m "Initial version of the site"

El resultado debería ser similar a esto:

Output[master (root-commit) e4e2063] Initial version of the site 15 files changed, 6914 insertions(+) create mode 100644 .eleventy.js create mode 100644 .gitignore create mode 100644 _data/site.json create mode 100644 _includes/layouts/base.njk create mode 100644 _includes/layouts/page.njk create mode 100644 _includes/layouts/post.njk create mode 100644 _includes/nav.njk create mode 100644 about/index.md create mode 100644 css/style.css create mode 100644 index.njk create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 posts/first-post.md create mode 100644 posts/second-post.md create mode 100644 posts/third-post.md

Vaya a GitHub, inicie sesión con su perfil y cree un nuevo repositorio vacío para su proyecto llamado eleventy-blog(puede ser público o privado). Una vez creado el repositorio de GitHub, copie el enlace al repositorio y agréguelo como una ubicación remota para su proyecto en la terminal:

git remote add origin https://github.com/username/eleventy-blog.git

Antes de enviar los cambios a la ubicación remota, cambie el nombre