Hugo es un generador de sitios estático (SSG) escrito en GO (Alias ​​Golang), un lenguaje de programación compilado de alto rendimiento a menudo utilizado para el desarrollo de la espalda y los servicios.
Hoy, Hugo es capaz de generar la mayoría de los sitios web en segundos (<1 ms por página). Esto explica por qué Hugo es autoproclamado "el marco más rápido del mundo para construir sitios web". En este artículo, echaremos un vistazo a la historia de Hugo, lo que lo hace tan rápido y cómo puede comenzar a construir su propio sitio estático de Hugo.
¿Qué es Hugo? ¿Y por qué es popular?

La página inicial del sitio web de Hugo. Steve France inicialmente ha desarrollado el generador de sitios Hugo Static en 2013, y BJRN Erik Pedersen se ha hecho cargo del 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ático, Hugo asume archivos de contenido de Markdown, los ejecuta a través de las plantillas de tarea y escupe archivos HTML que puede implementar fácilmente en línea, y hace todo esto extremadamente rápido. En 2021, hay decenas, 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 tan rápido como otras opciones, fue uno de los primeros generadores de sitios estáticos que vio una adopción a gran escala. Gatsby es otro SSG popular, que es muy adecuado para el desarrollo de sitios implementables estáticos, que tienen funcionalidad dinámica.
Entonces, con tantos SSG allí, ¿qué hace que Hugo se destaque? Hugo es autoproclamado “El marco más rápido del mundo para construir sitios web” ️ Por lo tanto, si está buscando una manera de construir rápidamente un sitio estático, comienza aquí peleando para tuitear a 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 ha demostrado que Hugo es 35 veces más rápido. Del mismo modo, Hugo puede jugar un sitio de 10,000 páginas de 10,000 segundos, una tarea que tomaría a Gatsby más de media hora. No solo Hugo es el SSG más rápido en términos de tiempo de construcción, sino que también es rápido de instalar. Hugo se entrega como un ejecutable autónomo, a diferencia de Jekyll, Gatsby y otros SSG que requieren la instalación de adicciones con un administrador de paquetes. Esto significa que puede descargar y usar Hugo inmediatamente sin preocuparse por las adicciones al software. El modelado es fácil en Hugo en el lenguaje SSG, la “plantilla” se refiere al proceso de agregar sustituyentes por inserción dinámica en una página HTML. Para acceder al título de una página, puede usar la variable {.title}}. Por lo tanto, en una plantilla HTML Hugo, se usa para ver {.title}} empaquetado en etiquetas H1 de la siguiente manera:

{.title}}

Durante la construcción, Hugo asumirá automáticamente el título de un archivo de contenido e introducirá el título entre las dos etiquetas

. Hugo tiene una variedad de variables de plantilla construidas e incluso puede escribir funciones personalizadas para procesar los datos durante la construcción. Para las plantillas, Hugo usa bibliotecas HTML/plantilla y texto/plantilla GO. Esto ayuda a reducir la hinchazón de aplicaciones, ya que Hugo no tiene que instalar bibliotecas del tercer país. Aquí hay un ejemplo de plantilla de página inicial de índice del tema folk de Ananke. Como puede ver, se asemeja a un archivo HTML estándar con una plantilla adicional: TBD: Code Code desde aquí: https://github.com/thenewdynamic/gohugo-theme-ananke cómo Hugo Hugo se configura como un ejecutable compilado, que, que se compilan, que, que se compilan, que, que se compila, que, que es un ejecutable, que, que es un ejecutable, que, que es un ejecutable, que, que es un ejecutable. significa que no tendrá que descargar y administrar muchas adicciones solo para comenzar. Está disponible para macOS, Windows y Linux. Importantes Las instrucciones de instalación a continuación requieren un administrador de paquetes, que descargará el ejecutable de Hugo para usted. Si prefiere construir Hugo desde su fuente, consulte la documentación oficial de Hugo. 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 pedido a continuación en el terminal:
/bin/bash -c “$ (curl -fssl https://raw.githubusercontant.com/homrew/install/head/install.sh)” Después de que homebrew ha instalado, ejecute el comando a continuación para instalar Hugo: Brew Instale Hugo How Hugo está instalado en Windows para los usuarios de Windows, Hugo se puede instalar con administradores de paquetes Chocolatey o Scoop. Debido a que las instrucciones para instalar Chocolate y Scoop son un poco más complejas que Homebrew, le recomendamos que consulte sus páginas de documentación oficiales aquí y aquí. Después de instalar Chocolatey o Scoop, puede instalar Hugo usando uno de los siguientes comandos (dependiendo del Administrador de paquetes): Choco Instale Hugo-Extended Confirm SCOOP Instale Hugo-Extended Cómo verificar si Hugo está instalado correctamente para verificar si Hugo fue fue Instalado correctamente, ejecute el siguiente comando: Versión Hugo Este comando terminal debe liberar información sobre la versión de Hugo actualmente instalada, de la siguiente manera: Hugo V0.85.0+Darwin/ARM64 BuildDate = Comandos desconocidos y configuración de Hugo antes de profundizar en la creación de una estática estática Sitio de Hugo, nos familiaricemos con sus diversos comandos CLI y los parámetros del archivo de configuración. Hugo Cli comandos
Hugo Check – Realice varios cheques de cheques
Hugo Config: muestra la configuración de un sitio de Hugo
Hugo Convertir: Convierta el contenido en diferentes formatos
Hugo implement-implement su sitio a un proveedor de la nube
Hugo Env – Muestra la versión de Hugo y la información ambiental
Hugo Gen – proporciona acceso a varios generadores
Ayuda de Hugo: muestra información sobre un pedido
La importación de Hugo: le permite importar un sitio desde otra ubicación
Hugo List – Muestra una lista de diferentes tipos de contenido: proporciona acceso a varios módulos de ayuda
Hugo nuevo te permite crear contenido nuevo para tu sitio
Hugo Server: inicia un servidor de desarrollo local
Versión de Hugo – 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 banderas Hugo (hay muchas), recomendamos usar el comando Hugo Help para mostrar una lista de todas las banderas disponibles.
Archivo de configuración de Hugo El archivo de configuración de Hugo acepta tres formatos: YAML, TOML y JSON. Además, 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 Hugo.
Archivo de configuración de Hugo. Así es como se ve un archivo de configuración de Hugo típico en Yaml: DefaultContlantLaguage: EN Tema: -Kinsta-State-Site ContentDir: Content LayoutDir: Lights PublishDir: Public Pagined: 5 Títulos: Descripción del sitio estático de Kinsta: “Este es un sitio estático generado SITE SITE SITE SITE SITE SITE SITE. ¡Con Hugo! ” Permalinks: post :: Slug/Page :: Slug/Tags: “Etiqueta/: Slug/” Autor: “Autor/:: Slug/” Si ha usado WordPress u otro CMS, algunas de las opciones de configuración pueden parecerle familiares. Por ejemplo, Kinsta-static-site es el nombre del tema del sitio, Kinsta estática es el SEO de metal y la anexil (el número de publicaciones por página) es 5.
Hugo tiene docenas de opciones de configuración, todo lo que puede explorar en la documentación oficial de Hugo.Si necesita hacer algún cambio de configuración global mientras desarrolla un sitio de Hugo, es posible que deba editar este archivo de configuración.Cómo crear un sitio de Hugo ahora que analizamos cómo instalar y usar Hugo CLI y los elementos básicos del archivo de configuración de Hugo, para crear un nuevo sitio de Hugo.Para crear un sitio de Hugo, use el comando a continuación (siéntase libre de cambiar mi sitio web con algo más si lo desea): Hugo nuevo sitio my-hugo-sitcure un nuevo sitio de Hugo.
Luego navegue por la carpeta del sitio y debería ver los siguientes archivos y carpetas: el archivo config.toml, la carpeta de arqueis, la carpeta de contenido, la carpeta de diseño, la carpeta de temas, la carpeta de datos y la carpeta estática. Repasemos lo que cada uno de estos archivos y carpetas terminan rápidamente. Hugo’s config.toml Como destacamos anteriormente, el archivo de configuración principal de Hugo contiene configuraciones globales para su sitio. Architype Archetype de Hugo El archivo Archetype es el lugar donde almacena el contenido formado en Markdown. Los arquetipos son especialmente útiles si su sitio tiene más formatos de contenido. Con Hugo Archetypes, puede crear una plantilla para cada tipo de contenido en su sitio. Esto le permite preparar los archivos de Markdown generados con todas las configuraciones de configuración necesarias. Por ejemplo, si tiene un tipo de contenido de podcast para mostrar episodios de podcast, puede crear un nuevo arquetipo en arqueypes/podcast.md con el contenido a continuación: — títulos: “{{reemplazar .name”-“” Título ” }} “Datos: {.Date}} Descripción:” “Temporada: Episodios: Draft: True — Con este podcast Archetype, puede usar el comando a continuación 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ía ver esto: — Títulos: “Entrevista con Kinsta CEO” Datos: 2021-05-20T13: 00: 00: 00 Descripción: “” Temporada: 1 Episodios: 6 Draft:
Verdadero — Sin arquetipos, debe especificar manualmente los parámetros básicos para cada nueva publicación que cree. Si bien los arquetipos pueden parecer complejos e inútil al principio, pueden ahorrar tiempo a largo plazo. Archivo de contenido de Hugo El archivo de contenido es el lugar donde va el contenido de publicación real. Hugo acepta los formatos de Markdown y HTML, siendo Markdown la opción más popular debido a su facilidad de uso. Además del hecho de que es el espacio de almacenamiento general para publicaciones, puede usar la carpeta de contenido para continuar organizando el contenido de publicación. Hugo trata a cada director de nivel superior en la carpeta de contenido como una sección de contenido. Las secciones de contenido de Hugo son similares a los tipos de publicaciones personalizadas de WordPress. Por ejemplo, si su sitio tiene publicaciones, páginas y podcasts, su archivo de contenido tendría publicaciones, páginas y directorios de podcasts en los que habría archivos de contenido para estos diferentes tipos de publicaciones. El aspecto del archivo de archivo de aspecto de Hugo contiene archivos HTML que definen la estructura de su sitio en algunos casos, puede ver un sitio de Hugo sin una carpeta de aspectos, porque no tiene que estar en el director raíz del proyecto y puede vivir en – Una carpeta con tema. Similar a los temas de WordPress que usan PHP para plantillas, las plantillas de Hugo consisten en HTML dinámico HTML adicional, alimentado por bibliotecas HTML/Text/Text/Template Golang. Se necesitan diferentes archivos de plantilla HTML para generar el marcado HTML de su sitio.

Se encuentra en la carpeta de aspectos. El archivo de temas de Hugo para sitios que prefieren una forma más autónoma de almacenar archivos y activos de plantilla, Hugo acepta una carpeta. 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 funcione un tema. Mientras que algunos usuarios de Hugo prefieren mantener los temas relacionados con el directorio raíz del proyecto, almacenar estos archivos en la carpeta de temas permite una gestión y compartir más fáciles. La carpeta de datos de Hugo, el archivo de datos de Hugo es el lugar donde puede almacenar datos adicionales (en JSON, YAML o TOML) que se necesitan para generar las páginas de su sitio, que pueden ser pesados ​​para almacenar directamente en un archivo de contenido o plantilla. Por ejemplo, si desea crear una lista de tasas de inflación de USD de 1960 a 2020, se necesitarían aproximadamente 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. La carpeta estática de Hugo, el archivo estático de Hugo es el lugar donde almacena activos estáticos que no requieren ningún procesamiento adicional. La carpeta estática suele ser el lugar donde los usuarios de Hugo almacenan imágenes, fuentes, archivos de verificación DNS y más. Cuando se genera y se guarda un sitio de Hugo en una carpeta para una fácil implementación, todos los archivos en la carpeta estática se copian como están.
Si se pregunta por qué no mencioné los archivos JavaScript o CSS, es porque a menudo se procesan dinámicamente a través de tuberías durante el desarrollo del sitio. En Hugo, los archivos JavaScript y CSS generalmente se almacenan en la carpeta de temas, ya que requiere un procesamiento adicional. Cómo agregar un tema a un sitio de Hugo descargando e instalando un tema prefabricado es una excelente manera de comenzar con Hugo. Los temas de Hugo vienen en todas las formas y dimensiones, y muchos de ellos están disponibles de forma gratuita en el almacén oficial de Hugo Theme. Sigamos e instale el popular tema Hyde en nuestro sitio web de Hugo. Primero, navegue por la carpeta con el tema de su proyecto en la terminal: CD / Temas/ Luego, use GIT para clonar el tema Hyde en el directorio del proyecto. Git Clone https://github.com/spf13/hyde.git, luego agregue la siguiente línea al archivo config.toml para activar el tema hyde: theme = “hyde” En este momento, el tema Hyde está instalado y configurado. El siguiente paso es encender 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 entrega con un servidor web integrado, lo que significa que no tiene que instalar un servidor de terceros como Nginx o Apache solo para ver su sitio local. Para iniciar el servidor web de Hugo, ejecute el comando a continuación en el directorio raíz de su proyecto: Hugo Server -d Hugo luego construirá las páginas de su sitio y las pondrá a disposición en http: // localhost: 1313/::

Hugo Local Development Server. Si visita la URL en su navegador web, debe ver su sitio web de Hugo con el sitio web Hyde: Hugo que se muestra con el tema Hyde. Por defecto, el servidor de desarrollo local de Hugo seguirá los cambios y reconstruirá automáticamente el sitio. Debido a que la velocidad de construcción de Hugo es muy 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, para crear nuestra primera publicación en Hugo. Cómo agregar contenido a un sitio de Hugo La adición de contenido en un sitio de Hugo es muy diferente de un CMS completo como WordPress o Ghost. Con Hugo, no hay una capa construida en CMS para administrar su contenido. En cambio, debe administrar y organizar las cosas como pienses. En otras palabras, no hay una forma explícitamente “correcta” de administrar el contenido en Hugo. Compartiremos un método para agregar y administrar contenido en esta sección, pero no dude en cambiar las cosas a medida que se familiariza con Hugo. Secciones de contenido en Hugo en Hugo, la primera herramienta para organizar el contenido que tiene disponible es la sección de contenido. Una sección de contenido de Hugo es similar a un tipo de publicación en WordPress, no solo puede usarla como filtro de contenido, sino que también puede usarla como identificador al crear temas personalizados. Por ejemplo, si tiene una carpeta con la sección de contenido del blog, puede usarla para almacenar todas las publicaciones de blog y reproducir una determinada plantilla de página que solo se aplica a las publicaciones de blog.
Cómo agregar publicaciones a Hugo teniendo en cuenta esto, creemos una sección de contenido para publicaciones de blog y agregemos algunas piezas de contenido. Cree un nuevo archivo llamado publicaciones en la carpeta de contenido de su proyecto: esta es la sección de contenido. Creemos otra capa organizacional en el archivo de publicación creando una carpeta 2021. En este momento, el director de contenido debería verse así: director de contenido de Hugo. Ahora, creemos nuestra primera publicación. Como discutimos anteriormente, Hugo acepta archivos de Markdown y HTML para el contenido. En general, es mejor permanecer en los archivos de 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 (extensión del archivo Markdown). Puede nombrar el archivo como desee, pero la sintaxis recomendada para el nombre de un archivo de contenido de Hugo es aaaa-ll-dzz –sample-pos.md. Además de crear manualmente un archivo de contenido, también puede usar Hugo CLI para crear una nueva publicación con el comando a continuación (asegúrese de ejecutar el pedido desde el administrador del proyecto): Hugo Nuevas publicaciones/2021/2021-08-30- A A -Sample-Post.MD Observe cómo falta la carpeta de contenido en el camino anterior. Esto se debe a que Hugo supone que todos los archivos de contenido ingresarán la carpeta de contenido de forma predeterminada. Si abre el archivo de contenido recién creado, debería ver algunas filas de metadatos en la parte superior del documento, que se ve así: — títulos: “2021 08 30 una publicación de muestra”
Datos: 2021-08-30T13: 44: 28+09: 00 Draft: Verdadero — Estos metadatos, que se forman en YAML, se llaman “materia frontal”. El material frontal generado automáticamente es un beneficio significativo del uso de Hugo Cli. El tema principal es el lugar donde se almacenan los datos únicos para una publicación (nombre de publicación, datos, estado inacabado, etiquetas, categorías, etc.). El formato predeterminado para el material frontal se puede configurar en la sección usando Archetypes. Ahora agregemos algún texto a la publicación. Al escribir una publicación, siempre asegúrese de que su contenido esté por debajo del tema principal, como: Regístrese en el boletín
¿Quieres saber cómo aumentar nuestro tráfico por más del 1000%? ¡Únase a las más de 20,000 personas que reciben nuestro boletín semanal con los consejos de WordPress!
Suscríbase ahora
Publicación de blog en Hugo. Una vez que guarde el archivo de contenido, debería ver que Hugo reconstruye su sitio en la terminal. ¡En la captura de pantalla a continuación, puede ver que Hugo ha reconstruido todo el sitio en 22 ms!

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

Sitio de Hugo con una publicación. Cómo agregar una página a Hugo ahora que agregamos una publicación en nuestro sitio web de Hugo, agregue una página. La mayoría de los sistemas de gestión de contenido, incluidos WordPress, marcan la diferencia entre publicaciones y páginas. Por lo general, una publicación es una pieza de contenido fechada, mientras que una página consiste en contenido eternamente 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. Después de eso, use el comando a continuación para agregar una nueva página “Acerca de” en su sitio web: Hugo New Pages/About.md Vea cómo difiere la convención de nombre para publicar páginas. A diferencia de las publicaciones, las páginas no están relacionadas con una determinada fecha, por lo que no es necesario incluir la fecha de creación en nombre del archivo. Ahora, agregemos algún texto a la página “Acerca de”: Acerca de la página en Hugo. En este momento debería ver la página sobre su navegador web:
Acerca de la página del navegador web. Ahora que tenemos dos secciones de contenido-posts y páginas, vea cómo hacer algunas personalizaciones del sitio, como editar el título y la descripción, agregar la página sobre el menú de la barra lateral, cambiar el formato del permanente y eliminar las páginas del flujo 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 del Sitio y/o el tema activo. En el caso del tema HYDE, el título y la descripción del sitio se pueden modificar en el archivo de configuración de Hugo (config.toml). Sabemos esto debido al siguiente código de tema que reproduce la barra lateral:

{{.site.itle}}

{{con .site.params.decscription}} {}}} { {else}} Un elegante código abierto y primer tema móvil para Hugo Hecho por @mdo . Original hecho para Jekyll. {{End}}

<a href="{ .Site.Baseurl}/
{{rande .site.menus.main -}} <a href="{ /urlthatication {.nameh}
{{ – end}}
{{con .site.params.copyright} {{.}} {{else} {{Now.Format “2006”}}. Reservados todos los derechos. {{end}}
Las dos partes que necesita enfocar son: {{.site.itle}} y … {{con .site.params.decscription}} {® Twitter .com/mdo “>@mdo
.Original hecho para Jekyll. {End}} El manillar {{}} es parte del motor de plantilla Hugo y permiten los datos generados dinámicamente en las páginas llovidas.Por ejemplo, {{.Site.title}} le pide a Hugo que verifique el archivo config.toml y tome el valor del mapa en la clave de título.Debido a que la configuración predeterminada de Hugo usa mi nuevo sitio de Hugo como título de sitio, esto muestra la barra lateral.Si cambiamos el título del sitio en config.toml con algo más, el cambio se reflejará en el frente.Sigamos y cambiemos el parámetro de título en config.toml desde mi nuevo sitio de Hugo al sitio de Kinsta Hugo.
Cambiar el título del sitio en Hugo. Al ir a la descripción del sitio, puede ver que la plantilla de la plantilla de Hugo acepta la lógica condicional. Traducido al inglés simple, el siguiente código le pide a Hugo que verifique si se asigna un valor de params a la tecla Descripción de config.toml. Si no, aquí hay una cadena predeterminada para usar en su lugar. {{con .site.params.decscription}} {{.} {{{else}} un código abierto elegante y primer tema móvil para hugo Hecho por <a href="http://twitter.com/mdo @mdo . Original hecho para Jekyll. {{End}} Debido a que no tenemos una descripción configurada en el archivo config.toml, Hugo muestra implícitamente “un tema elegante con código abierto y en móvil primero para Hugo, hecho por @mdo. Originalmente hecho para Jekyll “. Ahora actualicemos el archivo config.toml de: baseurl = “http://example.org/” languageCode = “en-us” title = “Kinsta’s Hugo Site” theme = “hyde” a: baseURL = “http:///// / Ejemplo .org/ “languageCode =” en-us “title =” Kinsta’s Hugo Site “theme =” hyde ” Como se esperaba, los cambios ahora son visibles en el front-end:
Cambie la descripción del sitio de Hugo. Cómo eliminar las páginas de la publicación de publicaciones en la mayoría de los blogs, está acostumbrado que el flujo de publicaciones en la página inicial solo mostrará publicaciones. Por defecto, el tema Hyde incluye todos los archivos de contenido en el flujo de publicación. Para cambiar este comportamiento, deberá editar la función de rango en la plantilla index.html, que genera la página inicial. La función de alcance del Hugo está sobre un conjunto definido de elementos y luego hacer algo con los datos. Por defecto, se extiende la plantilla de índice del tema HYDE. Desde .site. RegularPages incluye todas las páginas habituales en Hugo, incluidas publicaciones y páginas, se reproduce la página “Acerca de”. Cambiando los elementos del rango en .Seite. Regular Pagas “Sección” “Publicaciones”, podemos entrenar a Hugo para filtrar solo a través de las páginas habituales en la sección Publicación: los archivos de contenido en la carpeta de publicación que creamos anteriormente. De extremadamente rápido y confiable ¿Y completamente seguro para su sitio de WordPress? Kinsta ofrece toda esta y 24/7 asistencia de clase mundial de expertos en WordPress. Revise nuestros planes
Hagamos este cambio ahora, editando la plantilla en ella: {{Define “Main” -}}
{{-rande. = “Post -title”> {.Date.Format “lon, 2 de enero de 2006”}} {{.summary}} {{if .truncado} }