Hugo es un generador de sitios estáticos (SSG) escrito en Go (también conocido como Golang), un lenguaje de programación compilado de alto rendimiento que se utiliza a menudo para desarrollar aplicaciones y servicios de backend.
En la actualidad, Hugo es capaz de crear la mayoría de los sitios web en pocos segundos (<1 ms por página). Esto explica porqué Hugo se anuncia como «el framework más rápido del mundo para construir sitios web».
En este artículo, veremos la historia de Hugo, lo que lo hace tan rápido y cómo puedes empezar a construir tu propio sitio estático con Hugo.
¿Qué es Hugo? ¿Y por qué es tan popular?
Steve Francia desarrolló inicialmente el generador de sitios estáticos Hugo en 2013, y Bjørn Erik Pedersen tomó el relevo como desarrollador principal del proyecto en 2015. Hugo es un proyecto de código abierto, lo que significa que su código puede ser visto y mejorado por cualquiera.
Como generador de sitios estáticos, Hugo toma archivos de contenido Markdown, los ejecuta a través de las plantillas del tema, y devuelve archivos HTML que puedes desplegar online fácilmente – y hace todo esto extremadamente rápido.
En 2021, hay docenas, si no cientos, de generadores estáticos. Cada generador de sitios estáticos tiene su atractivo. Jekyll es popular entre los desarrolladores de Ruby, y aunque no es tan rápido como otras opciones, fue uno de los primeros generadores de sitios estáticos en conseguir una adopción generalizada. Gatsby es otro SSG popular adecuado para desarrollar sitios desplegables estáticamente que son dinámicos en la funcionalidad.
Así que, con tantas SSG por ahí, ¿qué hace que Hugo destaque?
Hugo es rápido
En términos de rendimiento bruto, Hugo es el mejor generador de sitios estáticos del mundo. Comparado con Jekyll, Hugo ha demostrado ser 35 veces más rápido por Forestry. Además, Hugo puede renderizar un sitio de 10.000 páginas en 10 segundos, una tarea que a Gatsby tardaría en completar más de media hora. Hugo no sólo es el SSG más rápido en términos de tiempos de construcción, sino que también es muy rápido de instalar.
Hugo se envía como un ejecutable autónomo, a diferencia de Jekyll, Gatsby y otros SSG que requieren la instalación de dependencias con un gestor de paquetes. Esto significa que puedes descargar y utilizar Hugo inmediatamente sin tener que preocuparte por las dependencias de software.
La creación de plantillas es fácil en Hugo
En la jerga de SSG, «templating» se refiere al proceso de añadir marcadores de posición para la inserción del contenido dinámico dentro de una página HTML. Para acceder al título de una página, se puede utilizar la variable {{ .Title }}. Por lo que, dentro de una plantilla HTML de Hugo, es común ver el {{ .Title }} envuelto en etiquetas H1 de esta manera:
<h1>{{ .Title }}</h1>En el momento de la construcción, Hugo tomará automáticamente el título dentro de un archivo de contenido e insertará el título entre las dos etiquetas <h1>. Hugo tiene una gran cantidad de variables de plantillas incorporadas, e incluso puedes escribir funciones personalizadas para procesar los datos en tiempo de construcción. Para la creación de plantillas, Hugo utiliza las bibliotecas integradas html/template y text/template de Go. Esto ayuda a reducir el exceso de aplicaciones ya que Hugo no necesita instalar librerías de terceros para las plantillas.
Cómo instalar Hugo
Hugo se envía como un ejecutable compilado, lo que significa que no tendrás que descargar y gestionar muchas dependencias para empezar. Está disponible para macOS, Windows y Linux.
Cómo instalar Hugo en macOS y Linux
El método de instalación recomendado para macOS y Linux requiere Homebrew, un gestor de paquetes para la instalación y actualización de aplicaciones. Si aún no tienes Homebrew instalado, puedes instalarlo ejecutando el siguiente comando en Terminal:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"Una vez instalado Homebrew, ejecuta el siguiente comando para instalar Hugo:
brew install hugoCómo instalar Hugo en Windows
Para los usuarios de Windows, Hugo puede instalarse utilizando los gestores de paquetes Chocolatey o Scoop. Como las instrucciones para instalar Chocolatey y Scoop son un poco más complejas que las de Homebrew, recomendamos consultar sus páginas de documentación oficial aquí y aquí.
Después de instalar Chocolatey o Scoop, puedes instalar Hugo utilizando uno de los siguientes comandos (dependiendo de tu gestor de paquetes):
choco install hugo-extended -confirmscoop install hugo-extendedCómo verificar que Hugo está instalado correctamente
Para comprobar que Hugo se ha instalado correctamente, debes ejecutar el siguiente comando:
hugo versionAl ejecutar este comando en la Terminal debería mostrar información sobre la versión instalada de Hugo de la siguiente manera:
hugo v0.85.0+extended darwin/arm64 BuildDate=unknownComandos y configuración de Hugo
Antes de sumergirnos en la creación de un sitio estático con Hugo, vamos a familiarizarnos con sus diversos comandos CLI y los parámetros del archivo de configuración.
Comandos CLI de Hugo
hugo check– ejecuta varias comprobaciones de verificaciónhugo config– muestra la configuración de un sitio Hugohugo convert– convierte contenidos a diferentes formatoshugo deploy– despliega tu sitio en un proveedor de la nubehugo env– muestra la versión de Hugo y la información del entornohugo gen– proporciona acceso a varios generadoreshugo help– muestra información sobre un comandohugo import– permite importar un sitio desde otro lugarhugo list– muestra una lista de varios tipos de contenidohugo mod– proporciona acceso a varios ayudantes de móduloshugo new– te permite crear nuevos contenidos para tu sitiohugo server– inicia un servidor de desarrollo localhugo version– muestra la versión actual de Hugo
El Hugo CLI también tiene una variedad de flags para especificar opciones adicionales para algunos comandos. Para ver una lista completa de flags de Hugo (hay muchas), recomendamos usar el comando hugo help para mostrar una lista de todas los flags disponibles.
El archivo de configuración de Hugo
El archivo de configuración de Hugo admite tres formatos: YAML, TOML, y JSON. Asimismo, el archivo de configuración de Hugo es config.yml, config.toml, o config.json, y puedes encontrarlo en el directorio raíz de un proyecto Hugo.
Este es el aspecto de un archivo típico de configuración de Hugo en formato YAML:
DefaultContentLanguage: en
theme:
- kinsta-static-site
contentdir: content
layoutdir: layouts
publishdir: public
paginate: 5
title: Kinsta Static Site
description: "This is a static site generated with Hugo!"
permalinks:
post: :slug/
page: :slug/
tags: "tag/:slug/"
author: "author/:slug/"Si has usado antes WordPress u otro CMS, algunas de las opciones de configuración pueden parecerte familiares. Por ejemplo, kinsta-static-site es el nombre del tema del sitio, Kinsta Static Site es el meta título de SEO, y paginate (el número de posts por página) es 5.
Hugo tiene docenas de opciones de configuración, puedes explorarlas todas en la documentación oficial de Hugo. Si necesitas hacer algún cambio de configuración global mientras desarrollas un sitio en Hugo, lo más probable es que tengas que editar este archivo de configuración.
Cómo crear un sitio con Hugo
Ahora que hemos visto cómo instalar y utilizar la CLI de Hugo y los fundamentos del archivo de configuración de Hugo, vamos a crear un nuevo sitio utilizando Hugo.
Para crear un sitio de Hugo, utiliza el siguiente comando (siéntete libre de cambiar my-hugo-site por otra cosa si lo deseas):
hugo new site my-hugo-site
A continuación, navega hasta la carpeta del sitio, y deberías ver los siguientes archivos y carpetas: archivo config.toml, carpeta archetypes, carpeta content, carpeta layouts, carpeta themes, carpeta data y carpeta static. Vamos a repasar rápidamente lo que es cada uno de estos archivos y carpetas.
Archivo config.toml de Hugo
Como hemos destacado anteriormente, el archivo de configuración principal de Hugo contiene la configuración global de su sitio.
Carpeta de arquetipos de Hugo
La carpeta archetypes es donde se almacenan las plantillas de contenido formateadas en Markdown. Los arquetipos son especialmente útiles si tu sitio tiene múltiples formatos de contenido. Con los arquetipos de Hugo, puedes crear una plantilla para cada tipo de contenido de tu sitio. Esto te permite completar los archivos Markdown generados con todos los ajustes de configuración necesarios.
Por ejemplo, si tienes un tipo de contenido de podcast para mostrar tus episodios del podcast, puedes crear un nuevo arquetipo en archetypes/podcast.md con el contenido que se indica a continuación:
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
description: ""
season:
episode:
draft: true
---Con este arquetipo de podcast, puedes utilizar el siguiente comando para crear una nueva entrada:
hugo new podcast/s1e6_interview-with-kinsta-ceo.mdAhora, si abres el post recién creado, deberías ver esto:
---
title: "Interview with Kinsta CEO"
date: 2021-05-20T13:00:00+09:00
description: ""
Season: 1
episode: 6
draft: true
---Sin los arquetipos, tendrías que especificar manualmente los parámetros del front matter para cada nueva entrada que creas. Aunque los arquetipos pueden parecer complejos e innecesarios al principio, a la larga pueden ahorrarte mucho tiempo.
Carpeta de contenidos de Hugo
La carpeta content es donde va el contenido real de tu publicación. Hugo soporta los formatos Markdown y HTML, siendo Markdown la opción más popular debido a su facilidad de uso. Además de ser el espacio de almacenamiento general para las publicaciones, puedes utilizar la carpeta content para organizar el contenido de las publicaciones.
Hugo trata cada directorio de nivel superior dentro de la carpeta content como una sección de contenido. Las secciones de contenido en Hugo son similares a los tipos de entradas personalizadas en WordPress. Por ejemplo, si tu sitio tiene entradas, páginas y podcasts, tu carpeta de contenido tendría directorios de entradas, páginas y podcasts donde vivirían los archivos de contenido para estos diferentes tipos de entradas.
Carpeta de diseños de Hugo
La carpeta layouts contiene archivos HTML que definen la estructura de tu sitio. En algunos casos, puedes ver un sitio de Hugo sin una carpeta de diseños porque no tiene porqué estar en el directorio raíz del proyecto y puede residir dentro de una carpeta del tema en su lugar.
Al igual que los temas de WordPress, que utilizan PHP para la creación de plantillas, las plantillas de Hugo consisten en un HTML base con plantillas dinámicas adicionales que se alimentan de las bibliotecas html/template y text/template incorporadas de Golang. Los distintos archivos de plantillas HTML necesarios para generar el marcado HTML de tu sitio se encuentran en la carpeta layouts.
Carpeta de temas de Hugo
Para los sitios que prefieren una forma más autónoma de almacenar archivos de plantillas y activos, Hugo admite una carpeta de temas (themes). Los temas de Hugo son similares a los de WordPress en el sentido de que se almacenan en un directorio de temas y contienen todas las plantillas necesarias para que un tema funcione.
Aunque algunos usuarios de Hugo prefieren mantener los archivos relacionados con los temas en el directorio raíz del proyecto, almacenar estos archivos dentro de la carpeta themes permite una gestión y un intercambio más fácil.
Carpeta de datos Hugo
La carpeta data de Hugo es donde puedes almacenar datos suplementarios (en formato JSON, YAML o TOML) que se necesitan para generar las páginas de tu sitio. Los archivos de datos son beneficiosos para conjuntos de datos más grandes que pueden ser engorrosos de almacenar directamente en un archivo de contenido o plantilla.
Por ejemplo, si quieres crear una lista de tasas de inflación en dólares estadounidenses desde 1960 hasta 2020, se necesitarías unas 80 líneas para representar los datos (una línea por cada año). En lugar de poner estos datos directamente en un archivo de contenido o de plantilla, puedes crearlos en la carpeta data y rellenarlos con la información necesaria.
Carpeta estática de Hugo
La carpeta static de Hugo es donde se almacenan los recursos estáticos que no requieren ningún procesamiento adicional. La carpeta static es normalmente el lugar donde los usuarios de Hugo almacenan imágenes, fuentes, archivos de verificación de DNS y más. Cuando se genera un sitio en Hugo y se guarda en una carpeta para facilitar su despliegue, todos los archivos de la carpeta static se copian tal cual.
Si te preguntas por qué no hemos mencionado los archivos JavaScript o CSS, es porque a menudo se procesan dinámicamente transportándose durante el desarrollo del sitio. En Hugo, los archivos JavaScript y CSS suelen almacenarse en la carpeta del tema porque requieren un procesamiento adicional.
Cómo añadir un tema a un sitio Hugo
Descargar e instalar un tema prediseñado es una buena manera de empezar a utilizar Hugo. Los temas de Hugo vienen en todas las formas y tamaños, y muchos de ellos están disponibles de forma gratuita en el repositorio oficial de temas de Hugo. Vamos a instalar el popular tema Hyde en nuestro sitio creado con Hugo.
En primer lugar, navega hasta la carpeta de temas de tu proyecto en el Terminal:
cd <hugo-project-directory>/themes/A continuación, utiliza Git para clonar el tema Hyde en el directorio de temas de tu proyecto.
git clone https://github.com/spf13/hyde.gitA continuación, añade la siguiente línea al archivo config.toml para activar el tema Hyde:
theme = "hyde"En este punto, el tema Hyde está instalado y configurado. El siguiente paso es iniciar el servidor web de desarrollo incorporado en Hugo para ver el sitio en el navegador web.
Cómo previsualizar un sitio de Hugo
Hugo viene con un servidor web integrado para fines de desarrollo, lo que significa que no necesitas instalar un servidor web de terceros como Nginx o Apache sólo para ver tu sitio localmente.
Para iniciar el servidor web de Hugo, ejecuta el siguiente comando en el directorio raíz de tu proyecto:
hugo server -DHugo construirá entonces las páginas de su sitio y las pondrá a disposición en http://localhost:1313/:
Si visitas la URL en tu navegador web, deberías ver tu sitio Hugo con el tema Hyde:
Por defecto, el servidor de desarrollo local de Hugo vigilará los cambios y reconstruirá el sitio automáticamente. Dado que la velocidad de construcción de Hugo es tan rápida, las actualizaciones de tu sitio pueden verse casi en tiempo real – algo que es raro de ver en el mundo de los generadores de sitios estáticos. Para demostrarlo, vamos a crear nuestra primera entrada en Hugo.
Cómo añadir contenido a un sitio de Hugo
Añadir contenido a un sitio creado con Hugo es muy diferente de como lo haríamos en un CMS completo como WordPress o Ghost. Con Hugo, no hay una capa de CMS incorporada para gestionar tu contenido. En su lugar, se espera que gestiones y organices las cosas como mejor te parezca.
En otras palabras, no hay una forma explícitamente «correcta» de hacer la gestión de contenidos en Hugo. Compartiremos un método para añadir y gestionar contenido en esta sección, pero siéntete libre de cambiar las cosas a medida que te familiarices con Hugo.
Secciones de contenido en Hugo
En Hugo, la primera herramienta de organización de contenidos que tienes a tu disposición es la sección de contenidos. Una sección de contenido en Hugo es similar a un tipo de entrada en WordPress: no sólo puedes usarla como un filtro de contenido, sino que también puedes usarla como un identificador al crear temas personalizados.
Por ejemplo, si tienes una carpeta de sección de contenido del blog, puedes utilizarla para almacenar todas tus publicaciones del blog y generar una plantilla de página específica que sólo se aplique a las publicaciones del blog.
Cómo añadir una entrada en Hugo
Con esto en mente, vamos a crear una sección de contenido para las entradas del blog y añadir algunas piezas de contenido. Crea una nueva carpeta llamada posts en la carpeta de content de tu proyecto – esta es la sección de contenido.
Vamos a crear otra capa de organización dentro de la carpeta de posts creando una carpeta 2021. En este punto, tu directorio de contenido debería tener este aspecto:
Ahora, vamos a crear nuestro primer post. Como hemos comentado antes, Hugo admite para el contenido tanto archivos Markdown como HTML. En general, es mejor seguir con los archivos Markdown porque son más fáciles de escribir, formatear y leer.
En la carpeta content/posts/2021, crea un nuevo archivo que termine en .md (la extensión de archivo Markdown). Puedes nombrar el archivo como quieras, pero la sintaxis recomendada para nombrar un archivo de contenido Hugo es YYYY-MM-DD-a-sample-post.md.
Además de crear manualmente un archivo de contenido, también puedes utilizar la CLI de Hugo para crear una nueva entrada con el siguiente comando (asegúrate de ejecutar el comando desde el directorio de tu proyecto):
hugo new posts/2021/2021-08-30-a-sample-post.mdFíjate en que la carpeta content no aparece en la ruta de arriba. Esto es porque Hugo asume que todos los archivos de contenido irán a la carpeta content por defecto.
Si abres el archivo de contenido recién creado, deberías ver unas cuantas líneas de metadatos en la parte superior del documento con el siguiente aspecto:
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---Estos metadatos, que se formatean en YAML, se denominan «front matter». La generación automática del front matter es un beneficio significativo del uso de la CLI de Hugo. El front matter es donde se almacenan los datos únicos de una entrada (nombre de la entrada, datos, estado del borrador, etiquetas, categorías, etc.). El formato por defecto del front matter puede configurarse para cada sección utilizando los arquetipos.
Ahora vamos a añadir algo de texto al post. Cuando escribas un post, asegúrate siempre de que tu contenido está debajo del front matter, así:
Una vez que guardes el archivo de contenido, deberías ver que Hugo reconstruye tu sitio en el Terminal. En la captura de pantalla siguiente, puedes ver que Hugo reconstruyó todo el sitio en 22 ms.
Si visitas tu sitio Hugo en tu navegador web, deberías ver la nueva entrada.
Cómo añadir una página en Hugo
Ahora que hemos añadido una entrada a nuestro sitio de Hugo, vamos a añadir una página. La mayoría de los sistemas de gestión de contenidos, incluido WordPress, distinguen entre entradas y páginas. Normalmente, una entrada es un contenido fechado, mientras que una página consiste en un contenido permanente o estático.
Para crear una página, primero necesitamos una sección de contenido de página. Para ello, crea una carpeta llamada pages en la carpeta content de Hugo. Después, utiliza el siguiente comando para añadir una nueva página «Acerca de» a tu sitio:
hugo new pages/about.mdFíjate en que la convención de nomenclatura de las páginas difiere de la de las entradas. A diferencia de las entradas, las páginas no están vinculadas a una fecha específica, por lo que no es necesario incluir la fecha de creación en el nombre del archivo.
Ahora, vamos a añadir algo de texto a la página «Acerca de»:
En este punto, deberías ver la página Acerca de en su navegador web:
Ahora que tenemos dos secciones de contenido -entradas y páginas- vamos a ver cómo hacer algunas personalizaciones en el sitio, como editar el título y la descripción, añadir la página «Acerca de» al menú de la barra lateral, cambiar el formato de los enlaces permanentes y eliminar páginas del feed de entradas.
Cómo cambiar el título y la descripción del sitio
El método exacto para cambiar el título y la descripción del sitio depende de la configuración del sitio y/o del tema activo. En el caso del tema Hyde, el título y la descripción del sitio pueden cambiarse en el archivo de configuración de Hugo (config.toml).
Lo sabemos por el siguiente código del tema que genera la barra lateral:
<aside class="sidebar">
<div class="container sidebar-sticky">
<div class="sidebar-about">
<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>
<p class="lead">
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}
</p>
</div>
<nav>
<ul class="sidebar-nav">
<li><a href="{{ .Site.BaseURL }}">Home</a> </li>
{{ range .Site.Menus.main -}}
<li><a href="{{.URL}}"> {{ .Name }} </a></li>
{{- end }}
</ul>
</nav>
<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© {{ now.Format "2006"}}. All rights reserved. {{end}}</p>
</div>
</aside>Las dos partes en las que hay que centrarse son:
{{ .Site.Title }}Y…
{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}Las llaves {{ }} son parte del motor de plantillas de Hugo y permiten generar datos dinámicamente en las páginas renderizadas. Por ejemplo, {{ .Site.Title }} indica a Hugo que compruebe el archivo config.toml y obtenga el valor asignado a la clave Title.
Dado que la configuración por defecto de Hugo utiliza My New Hugo Site como título del sitio, eso es lo que muestra la barra lateral. Si cambiamos el título del sitio en config.toml por otro, el cambio también se reflejará en el frontend.
Sigamos adelante y cambiemos el parámetro del título en el config.toml de My New Hugo Site a Kinsta’s Hugo Site.
Pasando a la descripción del sitio, puedes ver que el motor de plantillas de Hugo soporta la lógica condicional. Dicho de forma más sencilla, el código de abajo indica a Hugo que compruebe si un valor Params está asignado a la clave de descripción en el archivo config.toml. Si no es así, le dice que utilice una cadena por defecto para usar en su lugar.
{{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}Dado que no tenemos una descripción configurada en el archivo config.toml, Hugo por defecto muestra «Un elegante tema de código abierto y móvil para Hugo hecho por @mdo. Originalmente hecho para Jekyll».
Ahora vamos a actualizar nuestro archivo config.toml de:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kinsta's Hugo Site"
theme = "hyde"Para:
baseURL = "http://example.org/"
languageCode = "en-us"
title = "Kinsta's Hugo Site"
theme = "hyde"
[params]
description = "Kinsta is a premium managed WordPress hosting company."Como era de esperar, los cambios son ahora visibles también en el frontend:
Cómo eliminar páginas del feed de publicaciones
En la mayoría de los blogs, es habitual que el feed de entradas de la página de inicio sólo muestre las entradas. Por defecto, el tema de Hyde incluye todos los archivos de contenido en el feed de entradas. Para cambiar este comportamiento, tendrás que editar la función range en la plantilla index.html, que genera la página de inicio.
La función de range de Hugo itera sobre un conjunto definido de elementos y luego hace algo con los datos. Por defecto, la plantilla index.html del tema Hyde recorre .Site.RegularPages y filtra datos como el permalink, el título de la entrada y el resumen de la misma antes de mostrar el HTML.
Dado que .Site.RegularPages incluye todas las páginas regulares en Hugo, incluyendo tanto las entradas como las páginas, la página «Acerca de» se renderiza. Cambiando los elementos del range a .Site.RegularPages "Section" "posts", podemos ordenar a Hugo que sólo filtre las páginas regulares de la sección posts – los archivos de contenido en la carpeta posts que creamos anteriormente.
Vamos a hacer ese cambio ahora editando la plantilla. Pasamos de esto:
{{ define "main" -}}
<div class="posts">
{{- range .Site.RegularPages -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}A esto:
{{ define "main" -}}
<div class="posts">
{{- range where .Site.RegularPages "Section" "posts" -}}
<article class="post">
<h1 class="post-title">
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h1>
<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>
{{ .Summary }}
{{ if .Truncated }}
<div class="read-more-link">
<a href="{{ .RelPermalink }}">Read More…</a>
</div>
{{ end }}
</article>
{{- end }}
</div>
{{- end }}Después de hacer este cambio, la página de inicio sólo mostrará las entradas:
Cómo utilizar los parciales en Hugo
Una de las características más potentes de Hugo en cuanto a la creación de plantillas son los parciales, es decir, las plantillas HTML incrustadas en otra plantilla HTML. Los parciales permiten reutilizar el código en diferentes archivos de plantillas sin tener que gestionar el código de cada archivo.
Por ejemplo, es común ver diferentes secciones de la página (cabecera, pie de página, etc.) en sus archivos parciales separados, que luego son llamados dentro de un archivo de plantilla baseof.html del tema.
Dentro del archivo baseof.html en el tema Ananke, se puede ver un ejemplo de un parcial en la línea 18 – {{ partial "site-style.html" . }}.
En este caso, {{ partial "site-style.html" . }} indica a Hugo que sustituya el contenido de la línea 18 por el site-style.html de la carpeta /layouts/partials. Si navegamos a la carpeta /partials/site-style.html, vemos el siguiente código:
{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}
<link rel="stylesheet" href="{{ .RelPermalink }}" >
{{ end }}
{{ range site.Params.custom_css }}
{{ with partialCached "func/style/GetResource" . . }}{{ else }}
<link rel="stylesheet" href="{{ relURL (.) }}">
{{ end }}
{{ end }}Al descargar este código a un archivo separado, el archivo de plantilla baseof.html puede permanecer organizado y fácil de leer. Aunque los parciales no son necesarios, especialmente para proyectos básicos, son útiles para proyectos más grandes con funcionalidades más complejas.
Cómo utilizar los códigos cortos en Hugo
Los códigos cortos(shortcodes) de Hugo son similares a los parciales en el sentido de que permiten reutilizar el código en varias páginas. Los códigos cortos son archivos HTML que residen en la carpeta /layouts/shortcodes. La principal diferencia es que los parciales se aplican a las plantillas HTML, mientras que los shortcodes se aplican a las páginas de contenido Markdown.
En Hugo, los shortcodes te permiten desarrollar módulos de funcionalidad que puedes utilizar en páginas de todo tu sitio sin tener que gestionar cambios de código para cada página.
Si tienes un blog, lo más probable es que tengas que revisar el contenido de tus entradas para actualizar las referencias al año actual. Dependiendo del número de entradas que tengas en tu sitio, esta tarea puede llevar mucho tiempo.
Utilizando un shortcode de Hugo en tus archivos de contenido, no tendrás que preocuparte de actualizar las referencias del año nunca más.
Empecemos por crear un shortcode en /layouts/shortcodes/current_year.html con el contenido que aparece a continuación:
{{ now.Format "2006" }}Los códigos cortos se pueden incrustar en los mensajes con esta sintaxis – {{< shortcode_name >}}. En nuestro caso, podemos llamar al shortcode current_year.html con {{< shortcode_name >}} así:
---
title: "2021 08 30 a Sample Post"
date: 2021-08-30T13:44:28+09:00
draft: true
---
This post was created in the year {{< current_year >}}.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu.
Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.Si ves la entrada en el navegador web, deberías ver el año actual en la primera línea de la entrada así:
Cómo añadir imágenes a una publicación en Hugo
A diferencia de WordPress y otros sistemas de gestión de contenidos más completos, Hugo no incluye un sistema de arrastrar y soltar para gestionar las imágenes. Por lo tanto, el diseño de un sistema de gestión de imágenes se descarga al usuario final.
Aunque Hugo no tiene una forma estandarizada de gestionar las imágenes, un método popular se basa en almacenar las imágenes en la carpeta /static y referenciarlas en las entradas y páginas utilizando un shortcode. Vamos a ver cómo puedes hacer una organización básica de imágenes en Hugo.
Lo primero que tenemos que hacer es crear una estructura organizativa para nuestra biblioteca de imágenes. Aunque esto parece complejo, todo lo que se requiere es la creación de algunos directorios adicionales dentro de la carpeta /static.
Empecemos por crear la carpeta uploads en /static. Dentro de la carpeta uploads, crea una carpeta llamada 2021 para guardar todas las imágenes subidas en 2021.
A continuación, vamos a añadir dos imágenes (blue1.jpg y blue2.jpg) en la carpeta 2021.
En HTML, las imágenes se muestran utilizando la etiqueta <img>. Por ejemplo, para mostrar blue1.jpg, podemos utilizar el siguiente HTML:
<img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">Aunque es posible añadir este HTML directamente al archivo de contenido Markdown, es mejor crear un shortcode que puedas utilizar para mostrar cualquier imagen de la carpeta uploads. De esta manera, si alguna vez necesitas actualizar la etiqueta img, puedes editar la plantilla del shortcode sin tener que editar cada instancia de la etiqueta img.
Para crear la plantilla del shortcode, crea un nuevo archivo en /layouts/shortcodes/img.html con el contenido que se indica a continuación:
<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}A continuación, añade el shortcode siguiente a una entrada del blog:
{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}En la plantilla del shortcode, {{ .Get "src" }} y {{ .Get "alt" }} se indica a Hugo que obtenga el contenido de los parámetros src< y alt< cuando llame a un shortcode.
Ahora, si vuelves a cargar la entrada del blog, deberías ver la imagen así:
Cómo desplegar un sitio de Hugo
Hasta esta entrada, has aprendido a instalar Hugo, crear un sitio, añadir un tema, hacer ediciones básicas en los archivos de configuración y ampliar la funcionalidad de tu sitio con parciales y shortcodes. En este punto, deberías tener un sitio funcional que está listo para ser desplegado en línea.
Como Hugo es un generador de sitios estáticos, puedes desplegar el HTML, CSS y JS que genera en cualquier lugar con un servidor web. Dado que los requisitos técnicos para servir sitios estáticos son tan bajos, puedes alojarlos gratuitamente en una amplia gama de proveedores como Netlify, Vercel, Cloudflare Pages y otros.
Anteriormente, utilizamos el hugo server -D para hacer funcionar un servidor de desarrollo local para previsualizar los cambios en nuestro sitio en tiempo real. Para generar el sitio en su totalidad, podemos utilizar el comando hugo en el directorio raíz de nuestro proyecto. Una vez que la generación del sitio se haya completado, deberías ver una nueva carpeta public en el directorio de tu proyecto. Dentro de esta carpeta, encontrarás todos los archivos que tienen que ser subidos a un servidor o servicio de almacenamiento en la nube como Amazon S3.
Crear su sitio localmente y subirlo manualmente a Amazon S3 o a un servidor que ejecute Nginx es una forma de desplegar un sitio generado estáticamente. Sin embargo, no es la más eficiente porque requiere que subas manualmente nuevos archivos cada vez que hagas un cambio.
En vez de esto, una mejor opción es vincular tu carpeta de proyecto Hugo a un repositorio de GitHub y vincular el repositorio de GitHub a un servicio de despliegue automático como Netlify. Con esta configuración, puedes editar tu sitio, enviar los cambios a GitHub, y desencadenar una nueva construcción y despliegue en Netlify sin ninguna intervención manual. Ahora, ¡vamos a ver cómo hacer todo esto!
Cómo subir tu proyecto de Hugo a GitHub
En primer lugar, tendrás que crear un repositorio de GitHub para tu proyecto. Para ello, crea una cuenta de GitHub (si aún no tienes una) y descarga la aplicación oficial de escritorio de GitHub. Después de instalar la aplicación de GitHub, haz clic en Archivo en la barra de menú y selecciona Nuevo Repositorio. Dale al repositorio el nombre que elijas, deja las otras opciones que vienen por por defecto por ahora, y haz clic en Crear Repositorio.
Por defecto (en macOS), la aplicación GitHub crea los nuevos repositorios en /Users/username/Documents/GitHub. Como hemos llamado a nuestro repositorio my-hugo-site, nuestro repositorio se puede encontrar en /Users/brianli/Documents/GitHub/my-hugo-site.
A continuación, mueve todos los archivos de la carpeta del proyecto original a la nueva carpeta del repositorio de GitHub. Asegúrate de eliminar la carpeta public porque no necesitamos subir esa carpeta a GitHub.
Si vuelves a navegar por la aplicación de GitHub, ahora deberías ver una lista de los archivos modificados. Para subir el repositorio a GitHub, añade un resumen, haz clic en Commit to main y haz clic en Publish Repository en la esquina superior derecha.
Por defecto, la opción «Mantener este código privado» está marcada. Si quieres que tu código sea de código abierto y accesible al público, no dudes en desmarcarla. Finalmente, haz clic en Publicar Repositorio una vez más.
Ahora, si vas a GitHub, deberías ver tu repositorio online de la siguiente forma:
Cómo vincular el repositorio de GitHub a Netlify
Si aún no tienes una cuenta en Netlify, regístrate aquí. Para vincular un repositorio de GitHub a Netlify, haz clic en Nuevo sitio desde Git en el panel de control de Netlify.
En Despliegue continuo, selecciona la opción GitHub.
A continuación, utiliza el cuadro de búsqueda para encontrar el repositorio de su proyecto Hugo.
A continuación, especifica la configuración para el despliegue continuo. Dado que Netlify puede detectar una configuración de Hugo, la configuración por defecto debería funcionar bien para un despliegue básico.
A medida que te familiarices con Hugo, podrás profundizar en las variables de entorno, los comandos de construcción personalizados y mucho más. Por el momento, establecer el comando de construcción a hugo y el directorio público a public te permitirá desplegar un sitio Hugo simple. Después de especificar el comando de construcción y el directorio public, haz clic en Desplegar Sitio.
Dado que Hugo es un generador de sitios estáticos tan rápido, el despliegue sólo debería tomar unos segundos para un sitio básico. Una vez que el despliegue termine, podrás ver una URL de staging en el panel de control de Netlify. Haz clic en la URL para ver el sitio desplegado.
Aquí está nuestro sitio de Hugo en Netlify. Como puedes ver, es idéntico al sitio en nuestro entorno local:
A partir de aquí, puedes configurar un dominio personalizado y un certificado SSL para tu sitio alojado en Netlify. Para ello, recomendamos consultar la documentación oficial de Netlify.
Como hemos vinculado Netlify a GitHub, un nuevo commit en el repositorio GitHub del proyecto Hugo activará automáticamente un nuevo despliegue en Netlify.
Resumen
Hugo es uno de los generadores de sitios estáticos más populares del mundo, y por una buena razón. No sólo tiene un procesamiento de construcción súper rápido, sino que además viene con potentes capacidades en sus plantillas que soportan parciales y shortcodes.
En este tutorial, has aprendido a configurar Hugo, a crear un nuevo proyecto, añadir archivos de contenido, editar archivos de tema, y desplegar un sitio estático terminado. Te recomendamos que consultes la documentación oficial de Hugo para aprender más sobre Hugo y sus características más avanzadas como las funciones personalizadas, el front matter y los buildpacks CSS/JS.
¿Qué opinas sobre Hugo y otros generadores de sitios estáticos? Háznoslo saber en los comentarios más abajo.
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Deja una respuesta