En este artículo vamos a hablar de lo que sería el equivalente a las plantillas o temas (themes) en otros sistemas de CMS o generadores estáticos. En Eleventy este concepto, que te permite iniciar un proyecto de una manera ágil, en lugar de empezar desde cero, se conoce como "starter project". Vamos a ver qué son y cómo instalarlos para aumentar tu productividad.

En los artículos anteriores del Manual de Eleventy hemos visto cómo empezar desde cero un proyecto para trabajar con este generador de sitios estáticos. Comenzar desde un proyecto completamente vacío tiene sus ventajas, como la posibilidad de personalizar completamente nuestro stack de tecnologías, los layouts y la estructura general del sitio. Sin embargo, existe otra posibilidad que puede aumentar la productividad sensiblemente y que vamos a abordar ahora.

Qué es un starter project

La comunidad de usuarios de Eleventy ha publicado numerosos proyectos de inicio para la creación de sitios, con diversas características. Mediante estos proyectos obtenemos una instalación de un sitio basado en Eleventy ya configurado de antemano, lo que nos ofrece la posibilidad de comenzar más rápido un proyecto.

Los starter projects te pueden ofrecer:

• Un layout ya configurado con un diseño en particular
• Una base de código CSS personalizable
• La integración con diversos frameworks CSS populares
• Integración con librerías JavaScript como Alpine o React
• La integración con herramientas de compilado de assets como WebPack o Vite
• La configuración de sistemas de despliegue

Estos proyectos se encuentran listados en la página de documentación de Eleventy en la sección Starter Projects.

Ventajas y desventajas de los starter projects

Podemos destacar tanto cosas buenas como malas a la hora de utilizar un kit de inicio para el desarrollo de nuevos proyectos.

Porque usar un starter project

Como hemos dicho la ventaja principal de un starter Project es la posibilidad de comenzar de una manera ágil un proyecto en el que vamos a trabajar con el generador de sitios estáticos Eleventy.

Gracias a los starter projects podemos evitar algunas horas de configuración y a la vez podemos beneficiarnos de un diseño ya preparado. A muchos desarrolladores les encanta esta posibilidad porque pueden ocupar mucho menos tiempo en realizar un proyecto y centrarse directamente en asuntos como la personalización del contenido.

Sobre todo es ideal cuando el conjunto de herramientas que el starter proyect implementa encajan bien con las costumbres y habilidades del desarrollador. En estos casos la curva de aprendizaje es mínima y la experiencia de desarrollo será excelente.

Por qué no usar un starter project

Los starter project tienen la desventaja de marcarte una línea de desarrollo determinada, que no siempre tiene que ser la que tú esperas o la que te gustaría implementar.

Si las herramientas que te ofrece el starter project encajan con tus gustos o necesidades, seguramente sea una buena decisión empezar por ahí. Sin embargo, si desconoces las herramientas o los frameworks que este starter project integra dentro del proyecto puede ser un poco frustrante mantener los sitios y hacerlos evolucionar a nuestro gusto.

Hay que tener en cuenta que el trabajo para mantener un sitio web es inmensamente superior al trabajo que nos llevará a desarrollarlo inicialmente, por ello tener una base de código que no entiendes y que usa herramientas que no conoces puede ser negativo a largo plazo. En cambio, si el código del proyecto es completamente nuestro será ventajoso, ya que nos permitirá evolucionar de una manera más amistosa el proyecto.

Punto de inicio para el aprendizaje

No obstante, uses o no los starter projects para comenzar tus desarrollos basados en 11ty, es innegable la posibilidad que nos ofrecen para el aprendizaje.

Sólo con que tengas una ligera idea de cómo se desarrollan los proyectos para la web y cómo funciona Eleventy puedes estudiar el código propuesto por los starter kits y aprender muchas cosas gracias a ellos, ya sea en la configuración del proyecto, en la creación de layouts, a la hora de organizar las carpetas o a la hora de integrar assets como CSS, Javascript o imágenes.

Starter Project oficial de Eleventy

Dentro de todos los starter projects que encontramos en la página de documentación de Eleventy hay uno que es el oficial. Utilizarlo es una buena oportunidad para aprender cómo montar tu propio sitio web basado en este SSG.

El proyecto lo puedes encontrar en GitHub. https://github.com/11ty/eleventy-base-blog

Vamos a explicar aquí brevemente y en español cuáles son los pasos para implementar este proyecto en tu ordenador, de modo que puedas crear un blog rápidamente gracias a esta base de código.

Paso 1: Preparación del entorno

Para poder utilizar este proyecto necesitarás tener NodeJS instalado en tu ordenador, aunque esto ya se mencionó en el manual de Eleventy. pues es una de las dependencias esenciales del SSG.

Luego, necesitarás crear un directorio para tu blog y navegar a él usando la terminal. Puedes hacerlo con los siguientes comandos:

mkdir nombre-de-tu-blog
cd nombre-de-tu-blog

Por supuesto tendrás que reemplazar nombre-de-tu-blog con el nombre que desees para tu proyecto.

Incluso aunque tu proyecto no sea un blog, más adelante podrás transformarlo para adaptar esta base de código a tus necesidades. En cualquier caso como hemos dicho antes, el mayor valor que encontramos a estos proyectos es la posibilidad de aprender gracias a ellos

Paso 2: Clonar el repositorio

Una vez que estés en el directorio de tu proyecto, el siguiente paso es clonar el repositorio "eleventy-base-blog". Este repositorio contiene una estructura básica y configuraciones predeterminadas que te ayudarán a empezar rápidamente.

El clonado de repositorios se hace con Git, otra herramienta que tendrás que tener instalada en tu ordenador. Si tienes Git lo puedes hacer con el siguiente comando:

git clone https://github.com/11ty/eleventy-base-blog.git .

El punto al final del comando asegura que los archivos se clonen directamente en el directorio actual (la carpeta que acabas de crear) sin generar un subdirectorio adicional.

En el Manual de Git Puedes aprender mucho más sobre cómo clonar repositorios Git.

Paso 3: Configuración opcional

Si lo deseas, tienes la opción de revisar y personalizar la configuración del sitio mediante el archivo eleventy.config.js y _data/metadata.js. Ambos archivos contienen opciones y datos configurables que puedes ajustar según tus preferencias.

Si desconoces el funcionamiento de estos archivos no te preocupes demasiado, pero aún así leerlos te puede dar algunas pistas sobre los distintos usos que puedes hacer con ellos.

Paso 4: Instalar dependencias

El proyecto requiere ciertas dependencias para funcionar correctamente. Para instalarlas puedes ejecutar el siguiente comando npm en tu terminal:

npm install

Como debes de saber, este comando instalará todas las dependencias necesarias definidas en el archivo package.json del proyecto.

Paso 5: Generar y visualizar tu blog

Finalmente, es hora de hacer el build de tu blog, para generar todos los archivos ya listos para el despliegue.

Puedes generar el sitio estático listo para producción con el siguiente comando:

npx @11ty/eleventy

Esto creará una carpeta _site con todos los archivos estáticos de tu blog.

Para ver tu blog en el navegador y tenerlo siempre actualizado durante la fase de desarrollo puedes iniciar un servidor de desarrollo local con:

npx @11ty/eleventy --serve

Este comando no solo construirá tu sitio, sino que también iniciará un servidor local y mantendrá actualizados los cambios en tus archivos automáticamente, refrescando el navegador sobre la marcha mientras trabajas en tu proyecto.

Paso 6: Modo de depuración (opcional)

Si encuentras problemas o simplemente estás interesado en ver más detalles sobre cómo Eleventy está procesando tu sitio, puedes ejecutar Eleventy en modo de depuración con:

npx @11ty/eleventy --serve --debug

Este comando te proporcionará información detallada sobre el proceso de construcción, lo que puede ser útil para la solución de problemas o simplemente para entender mejor cómo funciona Eleventy.

Conclusión sobre los starter projects de Eleventy

A partir de aquí puedes perfectamente estudiar cuáles son los archivos del proyecto, la estructura de carpetas, la sintaxis para generar los layouts, etc. Todo esto te podrá dar un conocimiento un poco más detallado sobre este generador de sitios estáticos. De todos modos, puedes seguir con nosotros aprendiendo a utilizar 11ty en tus proyectos, ya que iremos repasando todas esas cosas en este manual.

Nosotros siempre preferimos usar nuestra propia base de código, ya que nos permite personalizar todo desde el inicio y es como te vamos a enseñar. Sin embargo, siempre puedes volver a los starter projects para ver como otros desarrolladores han configurado determinadas cuestiones sobre las que tengas dudas.