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 :

brew install hugo

En Windows, con Chocolatey :

choco install hugo -confirm

Y en Linux, con snap…

snap install hugo

O apt en Debian y Ubuntu:

sudo apt install hugo

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

Comprobar que está instalado

hugo version

Empezar un blog con Hugo

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

hugo new site nombre-blog

Esto crea la estructura de blogs:

.
├── 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 .

Para instalar los temas de Hugo según estas instrucciones necesitas tener instalado git . Si no lo tienes y no lo conoces, puedes aprender en github o codeacademy .

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

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 :

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

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

hugo server -t nombre-tema

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

theme: nombre-tema

Importante: el nombre del tema es el nombre del directorio del tema en la carpeta themes

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

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

Luego cambiamos al directorio mi-sitio-hugo:

```bash
cd mi-sitio-hugo
```

E inicializamos el tema:

```bash
git submodule update –init –recursive
```

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

```bash
cp -av themes/academic/exampleSite/* .
```

Hugo server

Para arrancar el sitio, escribimos:

 hugo server

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

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:

hugo
Avatar
Adolfo Antón Bravo
Investigador en OEG-UPM

Web Semántica, Periodismo, Visualización y Ciencia de Datos, para empezar.

Siguiente
Anterior