En este art\u00edculo, conocer\u00e1s uno de los SSG m\u00e1s populares: Jekyll, aprender\u00e1s c\u00f3mo funciona y c\u00f3mo puedes crear un sitio web est\u00e1tico con \u00e9l.<\/p>\n
Aqu\u00ed tienes una la demostraci\u00f3n en vivo del blog<\/a> que construir\u00e1s con Jekyll.<\/p>\n Puedes acceder al repositorio GitHub del proyecto<\/a> si quieres echarle un vistazo m\u00e1s de cerca.<\/p>\n Jekyll es un SSG gratuito de c\u00f3digo abierto que se construye y ejecuta sobre el lenguaje de programaci\u00f3n Ruby<\/a>. No necesitas entender c\u00f3mo funciona Ruby para utilizar Jekyll; s\u00f3lo necesitas tener Ruby instalado en tu m\u00e1quina.<\/p>\n Jekyll puede utilizarse para crear varios tipos de sitios est\u00e1ticos, como un blog personal, un sitio web de portafolio y un sitio web de documentaci\u00f3n, sin necesidad de una base de datos ni de utilizar un sistema de gesti\u00f3n de contenidos como WordPress<\/a>.<\/p>\n Esto es lo que hace que Jekyll destaque entre los SSG:<\/p>\n Primero tienes que instalar Ruby en tu m\u00e1quina antes de proceder a instalar Jekyll, como se indica en la documentaci\u00f3n de Jekyll<\/a>.<\/p>\n Por defecto, Ruby viene preinstalado con macOS, pero no es recomendable que utilices esa versi\u00f3n de Ruby para instalar Jekyll porque es antigua. Por ejemplo, en Ventura, el \u00faltimo sistema operativo de Apple, la versi\u00f3n de Ruby que viene preinstalada es la 2.6.10, de la que la \u00faltima versi\u00f3n es la 3.1.3 (en el momento de escribir este art\u00edculo).<\/p>\n Para solucionar esto, tendr\u00edas que instalar Ruby correctamente utilizando un gestor de versiones como chruby<\/a>. Primero tendr\u00edas que instalar Homebrew<\/a> en tu Mac utilizando el siguiente comando en tu terminal:<\/p>\n Una vez que la instalaci\u00f3n se haya realizado correctamente, sal y reinicia Terminal, y comprueba si Homebrew est\u00e1 listo para funcionar ejecutando este comando:<\/p>\n Si obtienes \u00abYour system is ready to brew<\/strong>\u00bb, ahora puedes pasar a instalar Ahora puedes instalar la \u00faltima versi\u00f3n de ruby, que es la 3.1.3, utilizando el paquete Esto tardar\u00e1 unos minutos. Una vez que se haya realizado correctamente, configura tu shell para que utilice autom\u00e1ticamente Ahora puedes salir y volver a iniciar tu terminal, y comprobar que todo funciona ejecutando este comando:<\/p>\n Deber\u00eda decir ruby 3.1.3<\/strong>.<\/p>\n Ahora tienes la \u00faltima versi\u00f3n de Ruby instalada en tu m\u00e1quina. Ahora puedes proceder a instalar la \u00faltima gema de Jekyll y bundler:<\/p>\n Para instalar Ruby y Jekyll en una m\u00e1quina Windows, debes utilizar el RubyInstaller<\/a>. Para ello, descarga e instala una versi\u00f3n de Ruby+Devkit<\/strong> desde Descargas de RubyInstaller<\/a> y utiliza las opciones predeterminadas para la instalaci\u00f3n.<\/p>\n En la \u00faltima etapa del asistente de instalaci\u00f3n, ejecuta el paso En las opciones, elige MSYS2 y la cadena de herramientas de desarrollo MINGW. Abre una nueva ventana de s\u00edmbolo del sistema e instala Jekyll y Bundler utilizando el siguiente comando:<\/p>\n Para verificar que Jekyll est\u00e1 instalado correctamente en tu m\u00e1quina, abre tu terminal y ejecuta el siguiente comando:<\/p>\n Si ves el n\u00famero de versi\u00f3n, significa que Jekyll est\u00e1 instalado y funciona correctamente en tu sistema. \u00a1Ya est\u00e1s listo para utilizar Jekyll!<\/p>\n Antes de empezar a crear y personalizar un sitio est\u00e1tico con Jekyll, conviene familiarizarse con sus diversos comandos CLI y par\u00e1metros del archivo de configuraci\u00f3n.<\/p>\n \u00c9stos son algunos de los comandos CLI de Jekyll m\u00e1s populares. No es necesario que los memorices, pero basta con que sepas que existen, y no dudes en comprobar lo que hace cualquiera de ellos cuando veas su uso m\u00e1s adelante en este art\u00edculo.<\/p>\n Tambi\u00e9n puedes a\u00f1adir algunas opciones a estos comandos. Consulta la lista completa de comandos y opciones de Jekyll en la documentaci\u00f3n de Jekyll<\/a>.<\/p>\n El archivo de configuraci\u00f3n de Jekyll es un archivo YAML llamado _config.yml<\/strong> que contiene ajustes y opciones para tu sitio Jekyll. Se utiliza para configurar varios aspectos de tu sitio, como el t\u00edtulo del sitio, la descripci\u00f3n, la URL y otras configuraciones.<\/p>\n Estas son algunas de las opciones de configuraci\u00f3n m\u00e1s utilizadas:<\/p>\n Tambi\u00e9n puedes crear variables personalizadas en tu archivo de configuraci\u00f3n y utilizarlas en las plantillas, dise\u00f1os e includes de tu sitio. Por ejemplo, puedes crear una variable llamada Para modificar tu archivo de configuraci\u00f3n de Jekyll, abre el archivo _config.yml<\/strong> del directorio de tu proyecto Jekyll en un editor de texto y realiza los cambios.<\/p>\n Nota:<\/strong> Cualquier cambio que hagas en el archivo de configuraci\u00f3n tendr\u00e1 efecto la pr\u00f3xima vez que generes tu sitio con Ahora que tienes Jekyll instalado en tu m\u00e1quina, es posible crear un sitio web est\u00e1tico en Jekyll con un solo comando y en pocos segundos. Abre tu terminal y ejecuta este comando<\/p>\n Aseg\u00farate de sustituir \u00abjoels-blog\u00bb por el nombre del sitio que prefieras.<\/p>\n A continuaci\u00f3n, navega hasta la carpeta del sitio web. Ver\u00e1s una estructura b\u00e1sica de sitio Jekyll que incluye directorios y archivos como \u00e9stos:<\/p>\n He aqu\u00ed para qu\u00e9 sirve cada uno de estos directorios y archivos:<\/p>\n Pero hay m\u00e1s archivos\/carpetas que pueden utilizarse para personalizar tu sitio web Jekyll. Estas carpetas incluyen:<\/p>\n Esta estructura de archivos proporciona una base s\u00f3lida para un proyecto Jekyll, pero puedes modificarla seg\u00fan sea necesario para adaptarla a las necesidades espec\u00edficas de tu proyecto.<\/p>\n Como alternativa a iniciar tu proyecto utilizando la CLI de Jekyll, puedes crear un repositorio Git utilizando la plantilla Jekyll \u00abHello World\u00bb<\/a> de Kinsta en GitHub. Selecciona Usar esta plantilla<\/strong> > Crear un nuevo repositorio<\/strong>\u00a0para copiar el c\u00f3digo de inicio en un nuevo repositorio dentro de tu propia cuenta de GitHub.<\/p>\n Ya tienes un sitio Jekyll, pero \u00bfc\u00f3mo puedes previsualizar el sitio web para ver qu\u00e9 aspecto tiene antes de empezar a personalizarlo para adaptarlo a tus necesidades? Abre tu terminal y entra en el directorio de tu proyecto, luego ejecuta el siguiente comando:<\/p>\n Esto generar\u00e1 una carpeta _site<\/strong> que incluir\u00e1 todos los archivos est\u00e1ticos generados a partir de tu proyecto. Tambi\u00e9n iniciar\u00e1 el servidor Jekyll, y podr\u00e1s previsualizar tu sitio a trav\u00e9s de http:\/\/localhost:4000<\/strong>.<\/p>\n Si visitas la URL en tu navegador web, deber\u00edas ver tu sitio Jekyll con el tema minima:<\/p>\n Cuando creas un sitio con Jekyll y utilizas un tema, puedes personalizar el sitio para adaptarlo a tus necesidades. Por ejemplo, puede que quieras a\u00f1adir nuevas p\u00e1ginas, cambiar el dise\u00f1o de una p\u00e1gina o ajustar c\u00f3mo se muestran algunos elementos. Todo esto es posible con Jekyll.<\/p>\n Cuando abras cada p\u00e1gina o entrada de blog de tu carpeta de proyecto, ver\u00e1s un bloque de informaci\u00f3n dentro de tres guiones (—) en la parte superior de la p\u00e1gina. Es lo que se denomina front matter<\/strong>.<\/p>\n Es un formato de metadatos utilizado en Jekyll, para almacenar informaci\u00f3n sobre una p\u00e1gina o entrada – puede escribirse en YAML o JSON.<\/p>\n En el ejemplo anterior, el front matter incluye variables como el t\u00edtulo, la descripci\u00f3n y la fecha de la entrada. Estas variables pueden utilizarse en el dise\u00f1o o contenido de la p\u00e1gina o entrada.<\/p>\n Jekyll analiza el front matter y lo utiliza para generar el HTML de salida de tu sitio. Puedes utilizar el front matter para especificar varias opciones, como el dise\u00f1o, el permalink, el estado de publicaci\u00f3n, etc.<\/p>\n Tambi\u00e9n puedes configurar el front matter defecto, para no tener que definir el mismo front matter para archivos similares. Por ejemplo, si cada entrada del blog utiliza el mismo nombre de autor y el mismo dise\u00f1o. Puedes definir un front matter personalizado en tu archivo _config.yml<\/strong> para servir a todas las entradas de tu blog.<\/p>\n La forma en que est\u00e1 estructurado es un poco compleja, pero aqu\u00ed tienes el aspecto que tendr\u00e1. P\u00e9galo debajo de la \u00faltima configuraci\u00f3n de tu archivo _config.yml<\/strong>:<\/p>\n Cuando ahora ejecutes el comando Nota:<\/strong> Cuando no definas una ruta, todos los archivos utilizar\u00e1n los valores de front matter definidos.<\/p>\n Cuando creas un archivo en el directorio ra\u00edz de tu proyecto, se considera una p\u00e1gina. El nombre que des al archivo se utilizar\u00e1 la mayor\u00eda de las veces en la URL, por lo que dar\u00e1s a cada archivo de p\u00e1gina un nombre que resuene bien.<\/p>\n Por ejemplo, si quieres crear una p\u00e1gina con la URL https:\/\/example.com\/about,<\/strong> crea un archivo llamado about.html <\/strong>o about.md<\/strong>. La extensi\u00f3n del archivo determina el lenguaje de marcado que se utilizar\u00e1 para el contenido de la p\u00e1gina (HTML o Markdown).<\/p>\n Una vez que hayas creado el archivo, a\u00f1ade la portada y el contenido adecuados. Guarda el archivo y actualiza tu sitio Jekyll en el navegador. La nueva p\u00e1gina deber\u00eda estar ahora accesible en la URL correspondiente al nombre del archivo.<\/p>\n Puedes utilizar Layouts para definir la estructura y el dise\u00f1o de las p\u00e1ginas y entradas de tu sitio. Esto suele hacerse principalmente con c\u00f3digo HTML. Puedes incluir un encabezado, un pie de p\u00e1gina, informaci\u00f3n meta con los metadatos de la p\u00e1gina.<\/p>\n El primer paso ser\u00eda crear una carpeta _layouts<\/strong> en el directorio ra\u00edz de tu proyecto. A continuaci\u00f3n, crea un archivo para cada maqueta: el archivo debe tener un nombre descriptivo que refleje la finalidad de la maqueta. Por ejemplo, podr\u00edas crear un archivo llamado page.html<\/strong> para definir el dise\u00f1o de todas las p\u00e1ginas de tu sitio.<\/p>\n Lo mejor es definir la estructura general de tus dise\u00f1os con HTML u otro lenguaje de marcado.<\/p>\n Puedes incluir marcadores de posici\u00f3n para cualquier contenido din\u00e1mico que se inserte en el dise\u00f1o, como el t\u00edtulo de la p\u00e1gina, el contenido y los metadatos. Por ejemplo, puedes crear una maquetaci\u00f3n b\u00e1sica que incluya un encabezado, un pie de p\u00e1gina y un \u00e1rea de contenido como \u00e9sta:<\/p>\n En este ejemplo, los marcadores de posici\u00f3n En este punto, cualquier p\u00e1gina o entrada que utilice page como valor de dise\u00f1o en su portada tendr\u00e1 este dise\u00f1o. Puedes crear varios dise\u00f1os dentro de la carpeta _layouts<\/strong> y darles el estilo que quieras. Tambi\u00e9n puedes anular el dise\u00f1o de un tema definiendo un dise\u00f1o con un nombre similar.<\/p>\n La carpeta _includes<\/strong> contiene fragmentos de c\u00f3digo reutilizables que puedes incluir en distintas partes de tu sitio web. Por ejemplo, puedes crear un archivo navbar.html<\/strong> en tu carpeta includes y a\u00f1adirlo a tu archivo de dise\u00f1o page.html<\/strong> utilizando la etiqueta En el momento de la compilaci\u00f3n, Jekyll sustituir\u00e1 la etiqueta por el contenido de navbar.html<\/strong>.<\/p>\n La carpeta _includes<\/strong> puede contener cualquier tipo de archivo, como archivos HTML, Markdown o Liquid. El objetivo principal es mantener tu c\u00f3digo DRY (Don’t Repeat Yourself) permiti\u00e9ndote reutilizar c\u00f3digo en todo tu sitio.<\/p>\n Es posible que quieras crear una p\u00e1gina dedicada a tu blog que contenga todas las entradas de tu blog, lo que significa que querr\u00e1s obtener todas las entradas de tu sitio y hacer un bucle a trav\u00e9s de ellas. Con Jekyll es f\u00e1cil hacerlo utilizando la etiqueta Todas las entradas de cualquier sitio web Jekyll se almacenan en la variable Tambi\u00e9n puedes utilizar variables Liquid adicionales para obtener otra informaci\u00f3n sobre cada entrada, como la fecha o el autor:<\/p>\n Observa que en el ejemplo anterior, el filtro Liquid de fecha formatea la fecha de cada entrada en un formato m\u00e1s legible.<\/p>\n Ahora ya tienes una idea de algunos formatos b\u00e1sicos que puedes aplicar a tu sitio Jekyll. Pero puede que no necesites utilizar todo esto para construir un sitio Jekyll desde cero, porque siempre puedes buscar un tema que satisfaga tus necesidades y a\u00f1adirlo a tu sitio Jekyll.<\/p>\n Existen varios temas f\u00e1ciles de a\u00f1adir, pero lo bueno es que para cada tema siempre hay informaci\u00f3n clara sobre c\u00f3mo instalarlo en el archivo ReadMe de GitHub. Puedes decidir clonar el tema, o si se trata de un tema basado en gemas<\/a>, el proceso es m\u00e1s sencillo.<\/p>\n Para este art\u00edculo, instalar\u00e1s un tema de blog<\/a> y lo personalizar\u00e1s para tener un sitio de blog desplegado en Kinsta<\/a>. Este es un tema basado en gemas y puedes acceder a su c\u00f3digo fuente<\/a> e instrucciones en GitHub<\/a>.<\/p>\n Para a\u00f1adir un tema basado en gemas, abre el Gemfile de tu sitio y a\u00f1ade la gema del tema que quieras utilizar. El tema que utilizaremos es el jekyll-theme-clean-blog<\/strong>. Puedes sustituir el tema por defecto minima<\/strong> en el Gemfile:<\/p>\n Ejecuta el comando En el archivo _config.yml<\/strong> de tu sitio, a\u00f1ade la siguiente l\u00ednea para especificar el tema que deseas utilizar:<\/p>\n En este punto, tu tema est\u00e1 listo para ser utilizado.<\/p>\n Deber\u00e1s eliminar todos los dise\u00f1os del directorio _layouts<\/strong> para evitar que anulen el dise\u00f1o del tema.<\/p>\n Puedes encontrar los nombres de los dise\u00f1os de tus archivos en la documentaci\u00f3n del tema<\/a>. Por ejemplo, si utilizas el tema jekyll-theme-clean-blog<\/strong>, los nombres de dise\u00f1o para el archivo index.<\/strong> html es home<\/strong>, para otras p\u00e1ginas es page<\/strong>, y para todos los mensajes es post<\/strong>.<\/p>\n Por \u00faltimo, ejecuta Ya est\u00e1 tu sitio Jekyll deber\u00eda utilizar ahora el nuevo tema basado en gemas que has a\u00f1adido. Puedes personalizar a\u00fan m\u00e1s el tema modificando su dise\u00f1o en los directorios _layouts<\/strong> de tu sitio.<\/p>\n Ahora que ya tienes tu tema a\u00f1adido a tu sitio, la siguiente acci\u00f3n ser\u00eda personalizar el sitio para que satisfaga tus necesidades y funcione como est\u00e1 previsto que funcione. Por ejemplo, las im\u00e1genes de cada p\u00e1gina y entrada no se muestran, sino que muestra un fondo gris.<\/p>\n Puedes arreglar esto a\u00f1adiendo una opci\u00f3n de materia frontal a cada p\u00e1gina y post especificando la ruta a una imagen que desees utilizar. En Jekyll, los activos como las im\u00e1genes se almacenan en la carpeta de assets<\/strong>. En esta carpeta, puedes decidir crear subcarpetas para organizar tus im\u00e1genes.<\/p>\n Ahora puedes a\u00f1adir una opci\u00f3n de fondo al bloque front matter y una ruta a su imagen. Por ejemplo, en la p\u00e1gina Acerca de, este es el asunto principal:<\/p>\n Haz esto para todas las p\u00e1ginas y entradas y tu p\u00e1gina tendr\u00e1 este aspecto:<\/p>\n Otra personalizaci\u00f3n que puedes hacer es ajustar las opciones de la barra de navegaci\u00f3n. Por ejemplo, puede que no necesites una p\u00e1gina de contacto, lo que significa que deber\u00edas eliminar su enlace de las opciones de la barra de navegaci\u00f3n. Puedes hacerlo estudiando el c\u00f3digo fuente del tema<\/a>, fij\u00e1ndote en el archivo responsable de los enlaces de la navbar, y replicando el archivo exactamente en tu proyecto, eliminando la opci\u00f3n que no necesites.<\/p>\n![\"Blog](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/joels-blog-jekyll-site.jpg\")
\u00bfQu\u00e9 es Jekyll?<\/h2>\n
\n
C\u00f3mo Instalar Jekyll<\/h2>\n
C\u00f3mo instalar Jekyll en macOS<\/h3>\n
\/bin\/bash -c \"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/HEAD\/install.sh)\"<\/code><\/pre>\nbrew doctor<\/code><\/pre>\nchruby<\/code> y ruby-install<\/strong> con el comando que aparece a continuaci\u00f3n:<\/p>\nbrew install chruby ruby-install<\/code><\/pre>\nruby-install<\/code> que acabas de instalar:<\/p>\nruby-install 3.1.3<\/code><\/pre>\nchruby<\/code> con el comando que aparece a continuaci\u00f3n:<\/p>\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/chruby.sh\" >> ~\/.zshrc\necho \"source $(brew --prefix)\/opt\/chruby\/share\/chruby\/auto.sh\" >> ~\/.zshrc\necho \"chruby ruby-3.1.3\" >> ~\/.zshrc<\/code><\/pre>\nruby -v<\/code><\/pre>\ngem install jekyll bundler<\/code><\/pre>\nC\u00f3mo instalar Jekyll en Windows<\/h3>\n
ridk install<\/code>, que se utiliza para instalar gemas. M\u00e1s informaci\u00f3n en la Documentaci\u00f3n de RubyInstaller<\/a>.<\/p>\ngem install jekyll bundler<\/code><\/pre>\nC\u00f3mo verificar que Jekyll est\u00e1 instalado correctamente<\/h3>\n
jekyll -v<\/code><\/pre>\nComandos y configuraci\u00f3n de Jekyll<\/h2>\n
Comandos CLI de Jekyll<\/h3>\n
\n
jekyll build<\/code>: Genera el sitio est\u00e1tico en el directorio _site<\/strong>.<\/li>\njekyll serve<\/code>: Construye el sitio e inicia un servidor web en tu m\u00e1quina local, permiti\u00e9ndote previsualizar el sitio en tu navegador en http:\/\/localhost:4000.<\/li>\njekyll new [site name]<\/code>: Crea un nuevo sitio Jekyll en un nuevo directorio con el nombre de sitio especificado.<\/li>\njekyll doctor<\/code>: Muestra cualquier problema de configuraci\u00f3n o dependencia que pueda haber.<\/li>\njekyll clean<\/code>: Elimina el directorio _site<\/strong>, que es donde se almacenan los archivos del sitio generado.<\/li>\njekyll help<\/code>: Muestra la documentaci\u00f3n de ayuda de Jekyll.<\/li>\njekyll serve --draft<\/code>: Genera y sirve tu sitio Jekyll, incluidas las entradas que est\u00e9n en el directorio _drafts<\/strong>.<\/li>\n<\/ul>\nArchivo de configuraci\u00f3n de Jekyll<\/h3>\n
\n
minima<\/code>. Puedes utilizar cualquier otro tema<\/a> configurando su nombre e implementando otros ajustes que veremos m\u00e1s adelante en este art\u00edculo.<\/li>\n<\/ul>\nauthor_name<\/code> y utilizarla en tus plantillas as\u00ed: {{ site.author_name }}<\/code>.<\/p>\njekyll build<\/code> o jekyll serve<\/code>.<\/p>\n\u00bfC\u00f3mo Crear un Sitio Web Est\u00e1tico en Jekyll?<\/h2>\n
jekyll new joels-blog<\/code><\/pre>\n![\"Create](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-jekyll-site.jpg\")
\u251c\u2500\u2500 _config.yml\n\u251c\u2500\u2500 _posts\n\u251c\u2500\u2500 Gemfile\n\u251c\u2500\u2500 Gemfile.lock\n\u251c\u2500\u2500 index.md\n\u2514\u2500\u2500 README.md<\/code><\/pre>\n\n
\n
Opci\u00f3n de inicio r\u00e1pido: Utiliza nuestra plantilla de GitHub<\/h3>\n
C\u00f3mo Previsualizar un Sitio Jekyll<\/h2>\n
jekyll serve<\/code><\/pre>\n![\"Jekyll](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/minima-jekyll-theme.jpg\")
C\u00f3mo Personalizar un Sitio Jekyll<\/h2>\n
C\u00f3mo funciona el Front Matter en Jekyll<\/h3>\n
---\ntitle: \"Welcome to Jekyll!\"\ndescription: \"Introduction to what Jekyll is about and how it works\"\ndate: 2023-03-07 16:54:37 +0100\n---<\/code><\/pre>\nC\u00f3mo configurar el front matter defecto<\/h4>\n
defaults:\n -\n scope:\n path: \"posts\" # empty string means all files\n values:\n layout: \"post\"\n author: \"John Doe\"<\/code><\/pre>\njekyll serve<\/code>, te dar\u00e1s cuenta de que aunque no definas el dise\u00f1o y el autor en cada entrada, sigues teniendo acceso a ellos dentro de tus archivos.<\/p>\nCrear p\u00e1ginas en Jekyll<\/h3>\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/create-new-page.jpg\")
Crear dise\u00f1os en Jekyll<\/h3>\n
<!DOCTYPE html>\n<html>\n <head>\n <title>{{ page.title }}<\/title>\n <\/head>\n <body>\n <header>\n \n <\/header>\n <main>{{ content }}<\/main>\n <footer>\n \n <\/footer>\n <\/body>\n<\/html><\/code><\/pre>\n{{ page.title }}<\/code> y {{ content }}<\/code> se sustituir\u00e1n por el t\u00edtulo y el contenido reales de la p\u00e1gina que se est\u00e1 mostrando.<\/p>\nC\u00f3mo funciona la carpeta _includes en Jekyll<\/h3>\n
{% include %}<\/code>.<\/p>\n<!DOCTYPE html>\n <html>\n <head>\n <title>{{ page.title }} <\/title>\n <\/head>\n <body>\n <header>{% include navbar.html %} <\/header>\n <main>{{ content }} <\/main>\n <footer>\n \n <\/footer>\n <\/body>\n <\/html><\/code><\/pre>\nRecorrer entradas en Jekyll<\/h3>\n
{% for %}<\/code>.<\/p>\nsite.posts<\/code>. Puedes hacer un bucle y utilizar la variable {{ post.title }}<\/code> Liquid para mostrar el t\u00edtulo de cada entrada:<\/p>\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n{% endfor %}<\/code><\/pre>\n\n{% for post in site.posts %}\n <h2>{{ post.title }}<\/h2>\n <p>Published on {{ post.date | date: \"%B %-d, %Y\" }} by {{ post.author }}<\/p>\n{% endfor %}<\/code><\/pre>\nC\u00f3mo A\u00f1adir un Tema a un Sitio Jekyll<\/h2>\n
gem \"jekyll-theme-clean-blog\"<\/code><\/pre>\nbundle install<\/code> en el directorio de tu sitio para instalar la gema del tema y sus dependencias.<\/p>\ntheme: jekyll-theme-clean-blog<\/code><\/pre>\njekyll serve<\/code> para crear y servir tu sitio con el nuevo tema.<\/p>\n![\"Jekyll](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-blog-theme.jpg\")
Personalizar un tema Jekyll<\/h3>\n
![\"Organizing](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/jekyll-assets.jpg\")
---\nlayout: page\ntitle: About\ndescription: This is the page description. \npermalink: \/about\/\nbackground: '\/assets\/images\/about-page.jpeg'\n---<\/code><\/pre>\n![\"Background](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/about-page-customized.jpg\")
![\"Customizing](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/03\/customizing-navbar.jpg\")