Web con Hugo

A raíz de elegir Hugo como la herramienta para publicar en la web mis contenidos escritos en Org-mode, comparto mi experiencia con este gestor de contenidos web.

Podemos seguir la guía de instalación de Hugo de su página web:

Instalación

En MacOS, puedes intalarlo con Homebrew:

1

brew install hugo

En Windows, con Chocolatey:

1

choco install hugo -confirm

Y en Linux, con snap…

1

snap install hugo

O apt en Debian y Ubuntu:

1

sudo apt install hugo

Para otros métodos, mira en la página de instalación.

Comprobar que está instalado

1

hugo version

Empezar un blog con Hugo

Para empezar, creamos un blog. Asegúrate de situarte en el directorio que quieres estar.

1

hugo new site nombre-blog

Esto crea la estructura de blogs:

1
2
3
4
5
6
7
8

.
├── archetypes
├── config.toml
├── content
├── data
├── layouts
├── static
└── themes

Ahora tenemos que elegir un tema.

Temas

Al contrario que otros sistemas, Hugo no viene con un tema predeterminado. Los temas de la comunidad se encuentran en themes.gohugo.io, en el repositorio hugoThemes.

Si quieres instalar todos los temas, puedes hacerlo de una vez con:

1

git clone --depth 1 --recursive https://github.com/gohugoio/hugoThemes.git themes

La opción --depth 1 es para que solo se baje la versión más actualizada y la opción --recursive para que se baje recursivamente el directorio. Una vez que lo descargas, puedes borrar el directorio .git.

Instalar tema

Veamos un par de temas, Hyde y Academic.

Hyde

Vamos a la carpeta themes y ahí clonamos el tema seleccionado. Si quisiéramos el tema hyde:

1

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

Para cambiar el tema por la línea de comandos, se puede hacer con:

1

hugo server -t nombre-tema

O bien en el archivo de configuración config.toml:

1

theme: nombre-tema

Academic

El tema academic está muy bien: sencillo, limpio, escalable.

Si nos hemos bajado todos los temas, lo copiamos en el directorio themes: o bien utilizamos su método de instalación.

El tema Academic tiene otra opción de instalación propia, y es previa a la creación de un sitio nuevo con hugo init.

• Clonamos el repositorio de Academic

  Primero clonamos el tema en el destino que queramos

  1	git clone https://github.com/sourcethemes/academic-kickstart.git mi-sitio-hugo

  Luego cambiamos al directorio mi-sitio-hugo:

  1	cd mi-sitio-hugo

  E inicializamos el tema:

  1	git submodule update --init --recursive

  Si queremos que tenga contenidos de prueba, copiamos el contenido de exampleSite a la carpeta raíz:

  cp -av themes/academic/exampleSite/* .
  

Hugo server

Para arrancar el sitio, escribimos:

1

hugo server

Entonces aparece algo parecido a esto en sus últimas líneas por la terminal:

1
2
3
4
5

Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at //localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

Desde el navegador y con la dirección localhost:1313 o 127.0.0.1:1313 se puede navegar por el sitio.

Generación estática

Para general el sitio estático, ejecutamos simplemente hugo:

1

hugo

Publicación del Blog