Autonomía digital y tecnológica

Código e ideas para una internet distribuida

Guía rápida para crear un sitio web con Hugo

Imago voragine.net
[actualizado el ]

Hugo es un generador de sitios web estáticos escrito en Go, y es software libre. Los generadores de sitios web estáticos, aunque tienen limitaciones, son muy interesantes por generar sitios muy rápidos y seguros.

Instalar Hugo

En la página oficial de Hugo hay una buena documentación para instalar Hugo en distintos sistemas operativos. En la mayoría de distribuciones Linux Hugo está incluido en los repositorios oficiales, así que se puede instalar fácilmente desde el gestor de paquetes. En esta guía se explica cómo instalar y usar Hugo en Linux Debian:

sudo apt install hugo

Hugo no tiene dependencias así que merece la pena instalar la última versión disponible en los repositorios unstable. Es posible habilitar la sección unstable de los repositorios de Debian, y así poder instalar algunos paquetes unstable mientras se mantiene una distribución stable o testing. Una vez activos la sección unstable:

sudo apt-get -t unstable install hugo

Cómo crear un nuevo sitio web con Hugo

Para crear un sitio con Hugo:

hugo new site {nombre}
Congratulations! Your new Hugo site is created in /ruta/al/nuevo/sitio/{nombre}

Just a few more steps and you're ready to go:

1. Download a theme into the same-named folder.
   Choose a theme from https://themes.gohugo.io/, or
   create your own with the "hugo new theme <THEMENAME>" command.
2. Perhaps you want to add some content. You can add single files
   with "hugo new <SECTIONNAME>/<FILENAME>.<FORMAT>".
3. Start the built-in live server via "hugo server".

Visit https://gohugo.io/ for quickstart guide and full documentation.

Hugo puede funcionar con git como sistema de control de cambios, de manera que el proyecto completo sea un repositorio. Para ello una vez creado el sitio se puede crear el repositorio en la carpeta:

git init

Configuración básica

Una vez creado un proyecto Hugo, podemos configurarlo usando los archivos config.toml, config.yaml o config.json que encontraremos en el raíz de la instalación. Se pueden usar varios archivos de configuración o cambiar el archivo de configuración, por ejemplo para cargar una configuración en la fase de desarrollo diferente a la de producción:

hugo --config devconfig.toml

Se puede consultar en la documentación de Hugo la lista completa de variables de configuración.

Organización de los archivos de Hugo

Principales carpetas de una instalación de Hugo:
/archetypes. Plantillas para la creación de contenido.

config.toml. Archivo de configuración del sitio. Puede estar en formato TOML, YAML o JSON.

/content. Archivos con el contenido ordenado en carpetas que siguen la misma jerarquía que mostrará el contenido en el sitio público, alojado en /public. El contenido puede estar en formato markdown (archivos .md) o directamente en formato HTML. Esta carpeta no aloja los archivos de imagen, las hojas de estilo o los archivos javascript, únicamente el contenido.

/data. Contenido adicional para incluir en el sitio web. Esta carpeta contiene archivos en formato TOML, YAML, JSON, incluso CSV, y constituye una especie de base de datos de contenido estructurado y accesible a través de un sistema de objetos y propiedades.

/layouts. Plantillas en formato HTML para mostrar partes de contenido, shortcodes…

/public. Contienen el sitio web listo para publicar generado a partir del contenido de /content, los archivos estáticos de /static y según las reglas y las plantillas definidas en el resto de carpetas de Hugo.

/static. Archivos estáticos como hojas de estilo o imágenes.

/themes. Themes instalados.

Themes en Hugo

Para instalar un theme en hugo basta copiarlo en la carpeta themes. En casi todos los casos los themes están disponibles en el listado oficial de themes o como repositorios de git en github, así que para instalarlos se puede clonar el repo o añadirlo como módulo de nuestro repositorio git. Por ejemplo, para instalar el theme Learn:

git submodule add https://github.com/matcornic/hugo-theme-learn.git themes/learn

Para activar un theme se puede editar el archivo de configuración del sitio e incluir la línea:

theme: themename

O utilizar la opción -t cuando se construya el sitio:

hugo -t learn

Los themes se pueden personalizar a través de un sistema de componentes y modificando la estructura de estilos.

Crear y gestionar el contenido

Los contenidos se pueden crear a mano, directamente añadiendo un archivo .md o .html en la carpeta /content. También con la línea de comandos. Por ejemplo, para crear una nueva sección:

hugo new {nombre.de.sección}/_index.md

Para crear una página dentro de una sección:

hugo new {nombre.de.sección}/{nombre.página}.md

O de manera equivalente:

hugo new {nombre.de.sección}/{nombre.página}/_index.md

Se pueden crear nuevos tipos de contenido (archetypes).

Crear un nuevo contenido de un tipo personalizado, por ejemplo los capítulos del theme Learn:

hugo new --kind chapter &lt;name&gt;/_index.md

1 comentario

Dejar un comentario

*
*

 

Un trackback