Cómo crear un sitio web estático con estilo con Eleventy

Crear un sitio web estático puede parecer una tarea complicada, pero con Eleventy, el proceso se vuelve mucho más fácil y accesible. Este generador de sitios estáticos permite a los desarrolladores crear proyectos elegantes y altamente personalizables sin la necesidad de un backend. En este artículo, revisaremos los pasos necesarios para construir un sitio web de portafolio utilizando Eleventy, desde la instalación hasta el despliegue.

A lo largo de esta guía, también afrontaremos cómo añadir estilos CSS y crear layouts que mejoren la presentación de tu contenido. Al final, no solo tendrás un sitio funcional, sino también uno que se destaque por su diseño y usabilidad.

Primeros pasos con Eleventy

Eleventy es un generador de sitios estáticos que permite crear páginas web rápidamente utilizando plantillas. Su flexibilidad y simplicidad lo convierten en una excelente opción para quienes desean crear un sitio web sin complicaciones. Antes de comenzar, asegúrate de tener instalado Node.js en tu máquina, ya que Eleventy requiere de este entorno para funcionar.

El primer paso es configurar un nuevo proyecto. Abre tu terminal y crea un nuevo directorio para tu proyecto. Luego, inicializa el proyecto ejecutando npm init, lo que creará un archivo package.json donde se gestionarán las dependencias.

• Ejecuta npm install --save-dev @11ty/eleventy para instalar Eleventy.
• Una vez instalado, puedes ejecutar el comando npx eleventy para generar tu sitio.
• Eleventy también incluye un servidor de desarrollo que puedes iniciar con npx eleventy --serve.

¿Qué es Eleventy?

Eleventy es un generador de sitios estáticos que permite a los desarrolladores crear contenido de manera rápida y sencilla. A diferencia de otros generadores, Eleventy no impone una estructura rígida, lo que brinda una mayor libertad al momento de construir proyectos. Puedes utilizar diferentes lenguajes de plantillas, lo que significa que puedes adaptar tu trabajo a tus preferencias y necesidades.

Su enfoque en la simplicidad y la flexibilidad hace que Eleventy sea perfecto tanto para principiantes como para desarrolladores experimentados. Además, como es un generador de sitios estáticos, no necesitas preocuparte por la configuración de una base de datos o un servidor complicado.

¿Cómo instalar Eleventy en tu proyecto?

La instalación de Eleventy es un proceso sencillo que puedes completar en pocos pasos. A continuación, te mostramos cómo hacerlo:

1. Abre tu terminal y crea un nuevo directorio para tu proyecto.
2. Ejecuta npm init -y para crear un package.json básico.
3. Instala Eleventy ejecutando npm install --save-dev @11ty/eleventy.
4. Crea una estructura de carpetas básica, como src para tus archivos fuente.
5. Ejecuta npx eleventy para construir tu sitio y npx eleventy --serve para iniciar el servidor de desarrollo.

Con estos pasos, tendrás Eleventy instalado y listo para empezar a crear contenido. Es importante familiarizarse con la estructura de archivos generados, ya que esto facilitará la personalización de tu sitio.

¿Cómo crear un layout en Eleventy SSG?

Los layouts son esenciales para mantener una estructura y diseño coherente en todo el sitio. Crear un layout en Eleventy es bastante sencillo. Aquí hay un paso a paso:

• Crea un archivo de layout, por ejemplo, base.njk si usas Nunjucks.
• Define las secciones del layout que necesitarás, como header, content y footer.
• Utiliza la sintaxis adecuada para incluir contenido dentro de tu layout.

Una vez que hayas creado tu layout, puedes aplicarlo a tus páginas individuales mediante la inclusión de la referencia al layout en la parte superior de cada archivo de contenido. Por ejemplo, si usas Nunjucks, podrías agregar:

{% extends "base.njk" %}

Esto asegura que cada página de tu sitio mantenga una apariencia uniforme, mejorando la experiencia del usuario.

¿Cómo crear un sitio web estático de portafolio con Eleventy?

Crear un sitio web de portafolio es una excelente manera de mostrar tu trabajo y habilidades. Aquí están los pasos clave para lograrlo con Eleventy:

1. Define la estructura de tu portafolio, incluyendo secciones como proyectos, sobre mí y contacto.
2. Utiliza archivos Markdown para agregar contenido a cada sección, lo que facilita la escritura y edición.
3. Crea páginas individuales para cada proyecto, utilizando layouts para mantener la coherencia visual.
4. Configura enlaces de navegación para que los visitantes puedan revisar fácilmente tu portafolio.

Al seguir estos pasos, podrás construir un sitio web de portafolio con estilo utilizando Eleventy, lo que te permitirá destacar tu trabajo de manera profesional.

¿Cómo desplegar un sitio Eleventy en Kinsta?

Desplegar tu sitio en Kinsta es un proceso fácil que puede realizarse en pocos pasos. Kinsta ofrece un excelente rendimiento y soporte, lo que lo convierte en una opción ideal para alojar tu sitio de Eleventy.

Primero, asegúrate de tener un repositorio en GitHub donde esté tu proyecto de Eleventy. Luego, sigue estos pasos:

• Inicia sesión en tu cuenta de Kinsta y ve a la sección de proyectos.
• Selecciona la opción para crear un nuevo proyecto y conecta tu repositorio de GitHub.
• Configura las opciones de despliegue, como la rama de Git que deseas utilizar.
• Activa la opción de despliegue automático para que Kinsta se actualice cada vez que realices cambios en tu repositorio.

Una vez completado, tu sitio estará disponible en línea. Asegúrate de revisar la configuración de dominio si deseas vincular un dominio personalizado a tu proyecto.

¿Cómo añadir CSS a tu sitio Eleventy?

El CSS es esencial para darle estilo a tu sitio. Eleventy permite la inclusión de archivos CSS de manera sencilla. Aquí te mostramos cómo hacerlo:

1. Crea una carpeta llamada css dentro de tu directorio de proyecto.
2. Agrega tus archivos CSS dentro de esta carpeta.
3. En tu archivo de layout, incluye un enlace a tu archivo CSS en la sección head del HTML.

Por ejemplo:

<link rel="stylesheet" href="/css/estilos.css">

Esto asegurará que tus estilos se apliquen a todas las páginas que utilicen el layout. Recuerda también probar tu sitio para asegurarte de que los estilos se vean como esperas.

Preguntas frecuentes sobre la creación de sitios web estáticos con Eleventy

¿Qué es Eleventy y para qué se utiliza?

Eleventy es un generador de sitios estáticos que permite a los desarrolladores crear sitios web sin necesidad de un backend. Se utiliza para generar contenido a partir de archivos de entrada como Markdown y plantillas, facilitando así la construcción de sitios web rápidos y sencillos.

Este generador es ideal para quienes buscan crear sitios de portafolio, blogs o páginas de aterrizaje, ya que proporciona la flexibilidad de usar múltiples lenguajes de plantillas y una estructura de proyecto personalizable.

¿Cómo se instala Eleventy en un proyecto?

La instalación de Eleventy se realiza mediante npm, el gestor de paquetes de Node.js. Comienza creando un nuevo directorio y ejecuta npm init -y para inicializar tu proyecto. Luego, utiliza npm install --save-dev @11ty/eleventy para instalar Eleventy como dependencia de desarrollo.

Una vez instalado, puedes comenzar a crear tu contenido y ejecutar el servidor de desarrollo para ver los cambios en tiempo real.

¿Cuáles son los pasos para crear un layout en Eleventy?

Para crear un layout en Eleventy, necesitas definir un archivo de layout que contenga las secciones clave de tu sitio. Usa etiquetas de plantilla para organizar el contenido, como header, main y footer. Luego, aplica este layout a tus páginas individuales para mantener una estructura coherente en tu sitio.

Esto no solo mejora la experiencia del usuario, sino que también facilita futuras actualizaciones en el diseño.

¿Cómo se puede personalizar un sitio web estático creado con Eleventy?

La personalización de un sitio web estático en Eleventy se puede lograr a través de estilos CSS, la elección de plantillas y la organización del contenido. Puedes crear diferentes layouts y utilizar múltiples lenguajes de plantillas, como Nunjucks o Liquid, para adaptar el contenido a tus necesidades.

Además, la inclusión de scripts o funciones personalizadas también puede ayudar a mejorar la funcionalidad de tu sitio.

¿Qué lenguajes de plantillas se pueden usar con Eleventy?

Eleventy es altamente flexible y permite el uso de varios lenguajes de plantillas, tales como:

• Markdown
• Nunjucks
• Liquid
• HTML
• JavaScript

Esta variedad de opciones permite a los desarrolladores trabajar en el lenguaje que les resulte más cómodo, lo que a su vez mejora la productividad y la creatividad en el diseño del sitio.

Si quieres conocer otros artículos parecidos a Cómo crear un sitio web estático con estilo con Eleventy puedes visitar la categoría Desarrollo Web.