Cómo construir un sitio estático ultrarrápido con Hugo

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 a menudo se usa para desarrollar aplicaciones y servicios de back-end.

Hoy, Hugo es capaz de generar la mayoría de los sitios web en segundos (<1 ms por página). Eso explica por qué Hugo se anuncia a sí mismo como "el marco más rápido del mundo para crear sitios web".

En este artículo, veremos la historia de Hugo, qué lo hace tan rápido y cómo puede comenzar a crear su propio sitio estático de Hugo.

¿Qué es Hugo? ¿Y por qué es popular?

Steve Francia desarrolló originalmente el generador de sitios estáticos de Hugo en 2013, y Bjrn Erik Pedersen asumió el cargo de desarrollador principal del proyecto en 2015. Hugo es un proyecto de código abierto, lo que significa que cualquier persona puede ver y mejorar su código.

Como generador de sitios estáticos, Hugo toma archivos de contenido de Markdown, los ejecuta a través de plantillas de temas y escupe archivos HTML que puede implementar fácilmente en línea, 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 tener una adopción generalizada. Gatsby es otro SSG popular que es muy adecuado para desarrollar sitios desplegables estáticamente que tienen una funcionalidad dinámica.

Entonces, con tantos SSG por ahí, ¿qué hace que Hugo se destaque?

Hugo se anuncia a sí mismo como 'el marco más rápido del mundo para crear sitios web' ️ así que si está buscando una forma de crear un sitio estático rápidamente, comience aquí ️ Haga clic para twittear

Hugo es rápido

En términos de rendimiento bruto, Hugo es el mejor generador de sitios estáticos del mundo. En comparación con Jekyll, Forestry demostró que Hugo era 35 veces más rápido. Del mismo modo, Hugo puede renderizar un sitio de 10.000 páginas en 10 segundos, una tarea que a Gatsby le llevaría más de media hora completar. Hugo no solo es el SSG más rápido en términos de tiempos de construcción, sino que también es 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 administrador de paquetes. Esto significa que puede descargar y usar Hugo inmediatamente sin tener que preocuparse por las dependencias del software.

Crear plantillas es fácil en Hugo

En la jerga de SSG, "plantillas" se refiere al proceso de agregar marcadores de posición para la inserción de contenido dinámico dentro de una página HTML. Para acceder al título de una página, puede utilizar la variable {{ .Title }} . Por lo tanto, dentro de una plantilla HTML de Hugo, es común ver el {{ .Title }} envuelto en etiquetas H1 así:

 <h1>{{ .Title }}</h1>

En el momento de la compilació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 variedad de variables de plantillas integradas, e incluso puede escribir funciones personalizadas para procesar datos en el momento de la compilación. Para las plantillas, Hugo utiliza las bibliotecas html/template y text/template integradas de Go. Esto ayuda a reducir el exceso de aplicaciones porque Hugo no necesita instalar bibliotecas de terceros para las plantillas.

Este es un ejemplo de una plantilla de página de inicio index.html del popular tema Ananke. Como puede ver, se parece a un archivo HTML estándar con un código de plantilla adicional:

 TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Cómo instalar Hugo

Hugo se envía como un ejecutable compilado, lo que significa que no tendrá que descargar ni administrar muchas dependencias solo para comenzar. 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 administrador de paquetes para instalar y actualizar aplicaciones. Si aún no tiene Homebrew instalado, puede instalarlo ejecutando el siguiente comando en la Terminal:

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Después de instalar Homebrew, ejecute el siguiente comando para instalar Hugo:

 brew install hugo

Cómo instalar Hugo en Windows

Para los usuarios de Windows, Hugo se puede instalar utilizando los administradores de paquetes Chocolatey o Scoop. Dado que 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, puede instalar Hugo usando uno de los siguientes comandos (dependiendo de su administrador de paquetes):

 choco install hugo-extended -confirm

 scoop install hugo-extended

Cómo verificar que Hugo esté instalado correctamente

Para verificar que Hugo se haya instalado correctamente, ejecute el siguiente comando:

 hugo version

Este comando de Terminal debería generar información sobre la versión actualmente instalada de Hugo de la siguiente manera:

 hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Hugo Comandos y Configuración

Antes de sumergirnos en la creación de un sitio estático con Hugo, familiaricémonos con sus diversos comandos CLI y parámetros del archivo de configuración.

Comandos CLI de Hugo

• hugo check : ejecuta varias comprobaciones de verificación
• hugo config : muestra la configuración de un sitio de Hugo
• hugo convert – convierte contenido a diferentes formatos
• hugo deploy : implementa su sitio en un proveedor de la nube
• hugo env : muestra la versión de Hugo y la información del entorno
• hugo gen : proporciona acceso a varios generadores
• hugo help : muestra información sobre un comando
• hugo import : te permite importar un sitio desde otra ubicación
• hugo list : muestra una lista de varios tipos de contenido
• hugo mod : proporciona acceso a varios módulos de ayuda
• hugo new : te permite crear contenido nuevo para tu sitio
• hugo server : inicia un servidor de desarrollo local
• hugo version : muestra la versión actual de Hugo

Hugo CLI también tiene una variedad de banderas para especificar opciones adicionales para algunos comandos. Para ver una lista completa de las banderas de Hugo (hay muchas), recomendamos usar el comando de hugo help para mostrar una lista de todas las banderas disponibles.

El archivo de configuración de Hugo

El archivo de configuración de Hugo admite tres formatos: YAML, TOML y JSON. Del mismo modo, el archivo de configuración de Hugo es config.yml , config.toml o config.json , y puede encontrarlo en el directorio raíz de un proyecto de Hugo.

Así es como se ve un archivo de configuración típico 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 ha usado WordPress u otro CMS antes, algunas de las opciones de configuración pueden parecerle familiares. Por ejemplo, kinsta-static-site es el nombre del tema del sitio, Kinsta Static Site es el metatítulo de SEO y paginate (el número de publicaciones por página) es 5 .

Hugo tiene docenas de opciones de configuración, todas las cuales puede explorar en la documentación oficial de Hugo. Si necesita realizar algún cambio de configuración global mientras desarrolla un sitio de Hugo, es probable que deba editar este archivo de configuración.

Cómo crear un sitio de Hugo

Ahora que hemos explicado cómo instalar y usar Hugo CLI y los conceptos básicos del archivo de configuración de Hugo, creemos un nuevo sitio de Hugo.

Para crear un sitio de Hugo, use el siguiente comando (no dude en cambiar my-hugo-site por otro si lo desea):

 hugo new site my-hugo-site

A continuación, vaya a la carpeta del sitio y debería ver los siguientes archivos y carpetas: archivo config.toml , carpeta de arquetipos , carpeta de contenido , carpeta de diseños , carpeta de temas , carpeta de datos y carpeta estática . Repasemos rápidamente qué es cada uno de estos archivos y carpetas.

Archivo config.toml de Hugo

Como destacamos anteriormente, el archivo de configuración principal de Hugo contiene configuraciones globales para su sitio.

Carpeta de arquetipos de Hugo

La carpeta de arquetipos es donde almacena las plantillas de contenido formateadas en Markdown. Los arquetipos son especialmente útiles si su sitio tiene múltiples formatos de contenido. Con los arquetipos de Hugo, puede crear una plantilla para cada tipo de contenido en su sitio. Esto le permite completar previamente los archivos Markdown generados con todos los ajustes de configuración necesarios.

Por ejemplo, si tiene un tipo de contenido de podcast para mostrar sus episodios de podcast, puede crear un nuevo arquetipo en archetypes/podcast.md con los siguientes contenidos:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Con este arquetipo de podcast, puede usar el siguiente comando para crear una nueva publicación:

 hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Ahora, si abres la publicación recién creada, 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 arquetipos, tendría que especificar manualmente los parámetros de la materia prima para cada nueva publicación que cree. Si bien los arquetipos pueden parecer complejos e innecesarios al principio, pueden terminar ahorrándote mucho tiempo a largo plazo.

Carpeta de contenido de Hugo

La carpeta de contenido es donde va el contenido real de tu publicación. Hugo es compatible con 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, puede usar la carpeta de contenido para organizar aún más el contenido de las publicaciones.

Hugo trata cada directorio de nivel superior en la carpeta de contenido como una sección de contenido. Las secciones de contenido en Hugo son similares a los tipos de publicaciones personalizadas en WordPress. Por ejemplo, si su sitio tiene publicaciones, páginas y podcasts, su carpeta de contenido tendría directorios de publicaciones , páginas y podcasts donde vivirían los archivos de contenido para estos diferentes tipos de publicaciones.

Carpeta de diseños de Hugo

La carpeta de diseños contiene archivos HTML que definen la estructura de su sitio. En algunos casos, es posible que vea un sitio de Hugo sin una carpeta de diseños porque no tiene que estar en el directorio raíz del proyecto y puede residir dentro de una carpeta de temas.

Al igual que los temas de WordPress que usan PHP para las plantillas, las plantillas de Hugo consisten en HTML base con plantillas dinámicas adicionales impulsadas por las bibliotecas html/template y text/template integradas de Golang. Los diversos archivos de plantilla HTML necesarios para generar el marcado HTML de su sitio se encuentran en la carpeta de diseños .

Carpeta de temas de Hugo

Para los sitios que prefieren una forma más autónoma de almacenar archivos de plantilla y activos, Hugo admite una carpeta de temas . Los temas de Hugo son similares a los temas de WordPress en que se almacenan en un directorio de temas y contienen todas las plantillas necesarias para que un tema funcione.

Si bien algunos usuarios de Hugo prefieren mantener los archivos relacionados con temas en el directorio raíz del proyecto, almacenar estos archivos en la carpeta de temas permite administrarlos y compartirlos más fácilmente.

Carpeta de datos de Hugo

La carpeta de datos de Hugo es donde puede almacenar datos complementarios (en formato JSON, YAML o TOML) que se necesitan para generar las páginas de su 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 desea crear una lista de las tasas de inflación de USD desde 1960 hasta 2020, se necesitarían alrededor de 80 líneas para representar los datos (una línea para cada año). En lugar de colocar estos datos directamente en un archivo de contenido o plantilla, puede crearlos en la carpeta de datos y completarlos con la información necesaria.

Carpeta Estática Hugo

La carpeta estática de Hugo es donde almacena activos estáticos que no requieren ningún procesamiento adicional. La carpeta estática suele ser donde los usuarios de Hugo almacenan imágenes, fuentes, archivos de verificación de DNS y más. Cuando se genera un sitio de Hugo y se guarda en una carpeta para facilitar la implementación, todos los archivos de la carpeta estática se copian tal cual.

Si se pregunta por qué no mencionamos los archivos JavaScript o CSS, es porque a menudo se procesan dinámicamente a través de canalizaciones 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 agregar un tema a un sitio de Hugo

Descargar e instalar un tema prefabricado es una excelente manera de comenzar con 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. Avancemos e instalemos el popular tema Hyde en nuestro sitio de Hugo.

Primero, navegue a la carpeta del tema de su proyecto en Terminal:

 cd <hugo-project-directory>/themes/

Luego, use Git para clonar el tema Hyde en el directorio de temas de su proyecto.

 git clone https://github.com/spf13/hyde.git

A continuación, agregue la siguiente línea a su 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 de Hugo para ver el sitio en su navegador web.

Cómo obtener una vista previa de un sitio de Hugo

Hugo se envía con un servidor web integrado para fines de desarrollo, lo que significa que no necesita instalar un servidor web de terceros como Nginx o Apache solo para ver su sitio localmente.

Para iniciar el servidor web de Hugo, ejecute el siguiente comando en el directorio raíz de su proyecto:

 hugo server -D

Luego, Hugo creará las páginas de su sitio y las pondrá a disposición en http://localhost:1313/ :

Si visita la URL en su navegador web, debería ver su sitio Hugo con el tema Hyde:

De forma predeterminada, el servidor de desarrollo local de Hugo observará los cambios y reconstruirá el sitio automáticamente. Dado que la velocidad de construcción de Hugo es tan rápida, las actualizaciones de su sitio se pueden ver casi en tiempo real, algo que es raro de ver en el mundo de los generadores de sitios estáticos. Para demostrar esto, creemos nuestra primera publicación en Hugo.

Cómo agregar contenido a un sitio de Hugo

Agregar contenido a un sitio de Hugo es muy diferente de un CMS completo como WordPress o Ghost. Con Hugo, no hay una capa de CMS integrada para administrar su contenido. En cambio, se espera que administre y organice las cosas como mejor le parezca.

En otras palabras, no existe una forma explícitamente "correcta" de administrar contenido en Hugo. Compartiremos un método para agregar y administrar 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 publicación en WordPress: no solo puede usarla como un filtro de contenido, sino que también puede usarla como un identificador al crear temas personalizados.

Por ejemplo, si tiene una carpeta de sección de contenido de blog , puede usarla para almacenar todas sus publicaciones de blog y representar una plantilla de página específica que solo se aplica a las publicaciones de blog.

Cómo agregar publicaciones en Hugo

Con eso en mente, creemos una sección de contenido para publicaciones de blog y agreguemos algunas piezas de contenido. Cree una nueva carpeta llamada publicaciones en la carpeta de contenido de su proyecto: esta es la sección de contenido.

Creemos otra capa organizativa dentro de la carpeta de publicaciones creando una carpeta 2021 . En este punto, su directorio de contenido debería verse así:

Ahora, vamos a crear nuestra primera publicación. Como discutimos anteriormente, Hugo admite archivos Markdown y HTML para el contenido. En general, es mejor ceñirse a los archivos Markdown porque son más fáciles de escribir, formatear y leer.

En la carpeta content/posts/2021 , cree un nuevo archivo que termine en .md (la extensión de archivo Markdown). Puede nombrar el archivo como desee, pero la sintaxis recomendada para nombrar un archivo de contenido de Hugo es YYYY-MM-DD-a-sample-post.md .

Además de crear manualmente un archivo de contenido, también puede usar Hugo CLI para crear una nueva publicación con el siguiente comando (asegúrese de ejecutar el comando desde el directorio de su proyecto):

 hugo new posts/2021/2021-08-30-a-sample-post.md

Observe cómo falta la carpeta de contenido en la ruta anterior. Esto se debe a que Hugo asume que todos los archivos de contenido irán a la carpeta de contenido de manera predeterminada.

Si abre el archivo de contenido recién creado, debería ver algunas líneas de metadatos en la parte superior del documento que se parece a esto:

 --- title: "2021 08 30 a Sample Post" date: 2021-08-30T13:44:28+09:00 draft: true ---

Estos metadatos, que están formateados en YAML, se denominan "materia preliminar". El material inicial generado automáticamente es un beneficio significativo del uso de la CLI de Hugo. El tema principal es donde se almacenan los datos únicos de una publicación (nombre de la publicación, datos, estado del borrador, etiquetas, categorías, etc.). El formato predeterminado para el tema principal se puede configurar por sección utilizando arquetipos.

Ahora agreguemos algo de texto a la publicación. Al escribir una publicación, siempre asegúrese de que su contenido esté por debajo del tema principal de la siguiente manera:

Una vez que guarde el archivo de contenido, debería ver a Hugo reconstruir su sitio en la Terminal. ¡En la captura de pantalla a continuación, puedes ver a Hugo reconstruyendo todo el sitio en 22 ms!

Si visita su sitio de Hugo en su navegador web, debería ver la nueva publicación.

Cómo agregar una página en Hugo

Ahora que hemos agregado una publicación a nuestro sitio de Hugo, agreguemos una página. La mayoría de los sistemas de administración de contenido, incluido WordPress, distinguen entre publicaciones y páginas. Por lo general, una publicación es una pieza de contenido fechada, mientras que una página consta de contenido perenne o estático.

Para crear una página, primero necesitamos una sección de contenido de página . Para hacer esto, cree una carpeta llamada páginas en la carpeta de contenido de Hugo. Luego, use el siguiente comando para agregar una nueva página "Acerca de" a su sitio:

 hugo new pages/about.md

Observe cómo la convención de nomenclatura para las páginas difiere de las publicaciones. A diferencia de las publicaciones, 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, agreguemos algo de texto a la página "Acerca de":

En este punto, debería ver la página Acerca de en su navegador web:

Ahora que tenemos dos secciones de contenido (publicaciones y páginas), veamos cómo realizar algunas personalizaciones en el sitio, como editar el título y la descripción, agregar 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 publicaciones.

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 de su sitio y/o del tema activo. En el caso del tema Hyde, el título y la descripción del sitio se pueden cambiar en el archivo de configuración de Hugo ( config.toml ).

Sabemos esto por el siguiente código de tema que muestra 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 a enfocar 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}}

Los manillares {{ }} son parte del motor de plantillas de Hugo y permiten datos generados dinámicamente en páginas renderizadas. Como ejemplo, {{ .Site.Title }} le indica a Hugo que verifique el archivo config.toml y obtenga el valor asignado a la clave del título .

Dado que la configuración predeterminada de Hugo usa Mi nuevo sitio de Hugo como título del sitio, eso es lo que muestra la barra lateral. Si cambiamos el título del sitio en config.toml a otra cosa, el cambio también se reflejará en la interfaz.

Avancemos y cambiemos el parámetro de título en config.toml de Mi nuevo sitio de Hugo a Sitio de Hugo de Kinsta .

Pasando a la descripción del sitio, puede ver que el motor de plantillas de Hugo admite la lógica condicional. Traducido al inglés simple, el siguiente código le indica a Hugo que compruebe si se ha asignado un valor Params a la clave de descripción en el archivo config.toml . Si no, aquí hay una cadena predeterminada 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 presenta de manera predeterminada “Un elegante tema de código abierto y móvil para Hugo creado por @mdo. Originalmente hecho para Jekyll.

Ahora actualicemos nuestro archivo config.toml desde:

 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 ahora también son visibles en la interfaz:

Cómo eliminar páginas del feed de publicaciones

En la mayoría de los blogs, es común que el feed de publicaciones en la página de inicio solo muestre publicaciones. De forma predeterminada, el tema Hyde incluye todos los archivos de contenido en el feed de publicaciones. Para cambiar este comportamiento, deberá editar la función de 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. De forma predeterminada, la plantilla index.html del tema Hyde abarca .Site.RegularPages y filtra datos como el enlace permanente, el título de la publicación y el resumen de la publicación antes de representar el HTML.

Dado que .Site.RegularPages incluye todas las páginas normales de Hugo, incluidas las publicaciones y las páginas, se muestra la página "Acerca de". Al cambiar los elementos del range a .Site.RegularPages "Section" "posts" , podemos indicarle a Hugo que solo filtre las páginas regulares en la sección de publicaciones : los archivos de contenido en la carpeta de publicaciones que creamos anteriormente.

Hagamos ese cambio ahora editando la plantilla desde 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 realizar este cambio, la página de inicio solo mostrará publicaciones como esta:

Cómo usar parciales en Hugo

Una de las funciones de creación de plantillas más potentes de Hugo son las plantillas HTML incrustadas en otra plantilla HTML. Los parciales permiten la reutilización de código en diferentes archivos de plantilla sin administrar el código en cada archivo.

Por ejemplo, es común ver diferentes secciones de página (encabezado, pie de página, etc.) en sus archivos parciales separados, que luego se llaman dentro del archivo de plantilla baseof.html de un tema.

Dentro del archivo baseof.html en el tema Ananke, puede ver un ejemplo de un parcial en la Línea 18: {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} .

En este caso, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} le indica a Hugo que reemplace el contenido de la línea 18 con site-style.html en la carpeta /layouts/ partials. Si navegamos a /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 en un archivo separado, el archivo de plantilla baseof.html puede permanecer organizado y fácil de leer. Si bien los parciales no son necesarios, especialmente para proyectos básicos, son útiles para proyectos más grandes con una funcionalidad más compleja.

Cómo usar códigos cortos en Hugo

Los códigos abreviados de Hugo son similares a los parciales en el sentido de que permiten la reutilización del código en una variedad de 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 códigos abreviados se aplican a las páginas de contenido de Markdown.

En Hugo, los códigos abreviados le permiten desarrollar módulos de funcionalidad que puede usar en las páginas de su sitio sin administrar los cambios de código para cada página.

Si tiene un blog, es probable que deba revisar el contenido del cuerpo de sus publicaciones para actualizar las referencias del año al año actual. Dependiendo de cuántas publicaciones tenga en su sitio, ¡esta tarea puede llevar mucho tiempo!

¡Al usar un código abreviado de Hugo en sus archivos de contenido, no tendrá que preocuparse por actualizar las referencias de años nunca más!

Comencemos por crear un código abreviado en /layouts/shortcodes/current_year.html con el contenido a continuación:

 {{ now.Format "2006" }}

Los códigos abreviados se pueden incrustar en publicaciones 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 ve la publicación en el navegador web, debería ver el año actual en la primera línea de la publicación así:

Cómo agregar imágenes a una publicación en Hugo

A diferencia de WordPress y otros sistemas completos de administración de contenido, Hugo no incluye un sistema de arrastrar y soltar para administrar imágenes. Por lo tanto, el diseño de un sistema de gestión de imágenes se descarga al usuario final.

Si bien Hugo no tiene una forma estandarizada de administrar imágenes, un método popular se basa en almacenar imágenes en la carpeta /estática y hacer referencia a ellas en publicaciones y páginas usando un código abreviado. Veamos cómo puede realizar una organización básica de imágenes en Hugo.

Lo primero que debemos hacer es crear una estructura organizativa para nuestra biblioteca de imágenes. Si bien esto suena complejo, todo lo que se requiere es la creación de algunos directorios adicionales dentro de la carpeta /static .

Comencemos por crear una carpeta de cargas en /static . Dentro de la carpeta de cargas , cree una carpeta llamada 2021 para guardar todas las imágenes cargadas en 2021.

A continuación, agreguemos dos imágenes ( blue1.jpg y blue2.jpg ) a la carpeta 2021 .

En HTML, las imágenes se muestran usando la etiqueta <img> . Por ejemplo, para mostrar blue1.jpg , podemos usar el código HTML siguiente:

 <img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Si bien es posible agregar este HTML directamente al archivo de contenido de Markdown, es mejor crear un código abreviado que pueda usar para mostrar cualquier imagen de la carpeta de carga. De esta manera, si alguna vez necesita actualizar la etiqueta img , puede editar la plantilla de shortcode sin editar cada instancia de la etiqueta img .

Para crear la plantilla de shortcode, cree un nuevo archivo en /layouts/shortcodes/img.html con el contenido a continuación:

 <img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

A continuación, agregue el código abreviado a continuación a una publicación de blog:

 {{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

En la plantilla de shortcode, {{ .Get "src" }} y {{ .Get "alt" }} indican a Hugo que busque el contenido de los parámetros src< y alt< al llamar a un shortcode.

Ahora, si vuelve a cargar la publicación del blog, debería ver la imagen así:

Cómo implementar un sitio de Hugo

Hasta esta publicación, aprendió cómo instalar Hugo, crear un sitio, agregar un tema, realizar ediciones básicas en los archivos de configuración y expandir la funcionalidad de su sitio con parciales y códigos abreviados. En este punto, debe tener un sitio funcional que esté listo para implementarse en línea.

Dado que Hugo es un generador de sitios estáticos, puede implementar 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, puede alojarlos de forma gratuita en una amplia gama de proveedores como Netlify, Vercel, Cloudflare Pages y más.

Anteriormente, usábamos el hugo server -D para activar un servidor de desarrollo local para obtener una vista previa de los cambios en nuestro sitio en tiempo real. Para generar el sitio completo, podemos usar el comando hugo en el directorio raíz de nuestro proyecto. Una vez completada la generación del sitio, debería ver una nueva carpeta pública en el directorio de su proyecto. Dentro de esta carpeta, encontrará todos los archivos que deben cargarse en un servidor o servicio de almacenamiento en la nube como Amazon S3.

Generar su sitio localmente y cargarlo manualmente en Amazon S3 o en un servidor que ejecuta Nginx es una forma de implementar un sitio generado estáticamente. Sin embargo, no es el más eficiente porque requiere que cargue manualmente nuevos archivos cada vez que realiza un cambio.

En cambio, una mejor opción es vincular la carpeta de su proyecto Hugo a un repositorio de GitHub y vincular el repositorio de GitHub a un servicio de implementación automatizado como Netlify. Con esta configuración, puede editar su sitio, enviar los cambios a GitHub y activar una nueva compilación e implementación en Netlify sin ninguna intervención manual. ¡Ahora, veamos cómo hacer todo esto!

Cómo subir tu proyecto Hugo a GitHub

Primero, deberá crear un repositorio de GitHub para su proyecto. Para hacer esto, cree una cuenta de GitHub (si aún no tiene una) y descargue la aplicación de escritorio oficial de GitHub. Después de instalar la aplicación GitHub, haga clic en Archivo en la barra de menú y seleccione Nuevo repositorio . Asigne al repositorio un nombre de su elección, deje las otras opciones en sus estados predeterminados por ahora y haga clic en Crear repositorio .

De forma predeterminada (en macOS), la aplicación GitHub crea nuevos repositorios en /Users/username/Documents/GitHub . Dado que llamamos a nuestro repositorio my-hugo-site , nuestro repositorio se puede encontrar en /Users/brianli/Documents/GitHub/my-hugo-site .

A continuación, mueva todos los archivos de la carpeta del proyecto original a la nueva carpeta del repositorio de GitHub. Asegúrese de eliminar la carpeta pública porque no necesitamos cargar esa carpeta en GitHub.

Si regresa a la aplicación GitHub, ahora debería ver una lista de archivos modificados. Para cargar el repositorio en GitHub, agregue un resumen, haga clic en Confirmar principal y haga clic en Publicar repositorio en la esquina superior derecha.

De forma predeterminada, la opción "Mantener este código privado" está marcada. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Dado que Hugo es un generador de sitios estáticos tan rápido, la implementación solo debería tomar unos segundos para un sitio básico. Una vez que finalice la implementación, podrá ver una URL provisional en el panel de control de Netlify. Haga clic en la URL para ver el sitio implementado.

Aquí está nuestro sitio de Hugo en Netlify. Como puede ver, es idéntico al sitio en nuestro entorno local:

En este punto, puede configurar un dominio personalizado y un certificado SSL para su sitio alojado en Netlify. Para hacer eso, recomendamos consultar la documentación oficial de Netlify.

Dado que hemos vinculado Netlify a GitHub, un nuevo compromiso con el repositorio de GitHub del proyecto Hugo activará automáticamente una nueva implementación en Netlify.

¿Listo para construir un sitio estático en un tiempo récord? Comienza con Hugo ️ Haz clic para twittear

Resumen

Hugo es uno de los generadores de sitios estáticos más populares del mundo, y por una buena razón. No solo tiene un procesamiento de compilación superrápido, sino que también viene con potentes capacidades de creación de plantillas que admiten parciales y códigos abreviados.

En este tutorial, aprendió a configurar Hugo, crear un nuevo proyecto, agregar archivos de contenido, editar archivos de temas e implementar un sitio estático terminado. Recomendamos consultar la documentación oficial de Hugo para obtener más información sobre Hugo y sus funciones más avanzadas, como funciones personalizadas, elementos preliminares y paquetes de compilación CSS/JS.

¿Qué piensas sobre Hugo y otros generadores de sitios estáticos? ¡Por favor háznoslo saber en los comentarios más abajo!