{"id":44763,"date":"2022-01-19T15:27:25","date_gmt":"2022-01-19T14:27:25","guid":{"rendered":"https:\/\/kinqsta.com\/es\/?p=44763&preview=true&preview_id=44763"},"modified":"2023-10-12T16:45:29","modified_gmt":"2023-10-12T14:45:29","slug":"hugo-sitio-estatico","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/es\/blog\/hugo-sitio-estatico\/","title":{"rendered":"C\u00f3mo construir un sitio est\u00e1tico rapid\u00edsimo con Hugo"},"content":{"rendered":"

Hugo es un generador de sitios est\u00e1ticos (SSG) escrito en Go<\/a> (tambi\u00e9n conocido como Golang), un lenguaje de programaci\u00f3n compilado de alto rendimiento que se utiliza a menudo para desarrollar aplicaciones y servicios de backend.<\/p>\n

En la actualidad, Hugo es capaz de crear la mayor\u00eda de los sitios web en pocos segundos (<1 ms por p\u00e1gina). Esto explica porqu\u00e9 Hugo se anuncia como \u00abel framework m\u00e1s r\u00e1pido del mundo para construir sitios web\u00bb.<\/p>\n

En este art\u00edculo, veremos la historia de Hugo, lo que lo hace tan r\u00e1pido y c\u00f3mo puedes empezar a construir tu propio sitio est\u00e1tico con Hugo.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

\u00bfQu\u00e9 es Hugo? \u00bfY por qu\u00e9 es tan popular?<\/h2>\n
\"P\u00e1gina<\/a>
P\u00e1gina web de Hugo.<\/figcaption><\/figure>\n

Steve Francia desarroll\u00f3 inicialmente el generador de sitios est\u00e1ticos Hugo<\/a> en 2013, y Bj\u00f8rn Erik Pedersen tom\u00f3 el relevo como desarrollador principal del proyecto en 2015. Hugo es un proyecto de c\u00f3digo abierto, lo que significa que su c\u00f3digo puede ser visto y mejorado por cualquiera.<\/p>\n

Como generador de sitios est\u00e1ticos, Hugo toma archivos de contenido Markdown, los ejecuta a trav\u00e9s de las plantillas del tema, y devuelve archivos HTML<\/a> que puedes desplegar online f\u00e1cilmente – y hace todo esto extremadamente r\u00e1pido.<\/p>\n

En 2021, hay docenas, si no cientos, de generadores est\u00e1ticos. Cada generador de sitios est\u00e1ticos tiene su atractivo<\/a>. Jekyll es popular entre los desarrolladores de Ruby, y aunque no es tan r\u00e1pido como otras opciones, fue uno de los primeros generadores de sitios est\u00e1ticos en conseguir una adopci\u00f3n generalizada. Gatsby<\/a> es otro SSG popular adecuado para desarrollar sitios desplegables est\u00e1ticamente que son din\u00e1micos en la funcionalidad.<\/p>\n

As\u00ed que, con tantas SSG por ah\u00ed, \u00bfqu\u00e9 hace que Hugo destaque?<\/p>\n\n

Hugo es r\u00e1pido<\/h3>\n

En t\u00e9rminos de rendimiento bruto, Hugo es el mejor generador de sitios est\u00e1ticos del mundo. Comparado con Jekyll, Hugo ha demostrado ser 35 veces m\u00e1s r\u00e1pido<\/a> por Forestry. Adem\u00e1s, Hugo puede renderizar un sitio de 10.000 p\u00e1ginas en 10 segundos, una tarea que a Gatsby tardar\u00eda en completar m\u00e1s de media hora. Hugo no s\u00f3lo es el SSG m\u00e1s r\u00e1pido en t\u00e9rminos de tiempos de construcci\u00f3n, sino que tambi\u00e9n es muy r\u00e1pido de instalar.<\/p>\n

Hugo se env\u00eda como un ejecutable aut\u00f3nomo, a diferencia de Jekyll, Gatsby y otros SSG que requieren la instalaci\u00f3n 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.<\/p>\n

La creaci\u00f3n de plantillas es f\u00e1cil en Hugo<\/h3>\n

En la jerga de SSG, \u00abtemplating\u00bb se refiere al proceso de a\u00f1adir marcadores de posici\u00f3n para la inserci\u00f3n del contenido din\u00e1mico dentro de una p\u00e1gina HTML. Para acceder al t\u00edtulo de una p\u00e1gina, se puede utilizar la variable {{ .Title }}<\/code>. Por lo que, dentro de una plantilla HTML de Hugo, es com\u00fan ver el {{ .Title }}<\/code> envuelto en etiquetas H1 de esta manera:<\/p>\n

<h1>{{ .Title }}<\/h1><\/code><\/pre>\n
En el momento de la construcci\u00f3n, Hugo tomar\u00e1 autom\u00e1ticamente el t\u00edtulo dentro de un archivo de contenido e insertar\u00e1 el t\u00edtulo entre las dos etiquetas <h1><\/code>. Hugo tiene una gran cantidad de variables de plantillas incorporadas, e incluso puedes escribir funciones personalizadas para procesar los datos en tiempo de construcci\u00f3n. Para la creaci\u00f3n de plantillas, Hugo utiliza las bibliotecas integradas html\/template<\/code> y text\/template<\/code> de Go. Esto ayuda a reducir el exceso de aplicaciones ya que Hugo no necesita instalar librer\u00edas de terceros para las plantillas.<\/p>\n
C\u00f3mo instalar Hugo<\/h2>\n
Hugo se env\u00eda como un ejecutable compilado, lo que significa que no tendr\u00e1s que descargar y gestionar muchas dependencias para empezar. Est\u00e1 disponible para macOS, Windows y Linux.<\/p>\n