Ir al contenido

Development

Primeros pasos con Hugo y Docker

Aprende a montar un sitio estático con Hugo usando contenedores Docker, ¡sin necesidad de instalar nada en local! Esta guía paso a paso te muestra cómo crear, desarrollar y compilar sitios Hugo en un entorno aislado y reproducible.

4 min de lectura

Contenedor Docker

Descarga el contenedor Docker desde Docker Hub:

docker pull registry.gitlab.com/pages/hugo/hugo_extended:latest

Etiqueta

Por comodidad, vamos a crear un alias (etiqueta) para no tener que escribir la URL completa en cada comando de Docker.

docker tag registry.gitlab.com/pages/hugo/hugo_extended:latest hugo_extended

Para más información, consulta docker tag.

Crear un sitio nuevo

Podemos empezar a usar el contenedor de Hugo para crear un sitio nuevo:

docker run --rm -v ${PWD}:/src hugo_extended hugo new site quickstart
  • docker run indica a Docker que ejecute (cree un contenedor nuevo).
  • --rm indica a Docker que queremos eliminar el contenedor cuando termine de ejecutarse.
  • -v ${PWD}:/src monta el directorio actual de la máquina host en una carpeta dentro del contenedor de Hugo, en /site.
  • hugo_extended es el contenedor de Hugo que descargamos antes.
  • hugo new site <site_name> ejecuta los subcomandos new site de Hugo. El contenedor de Hugo ya define el comando hugo como punto de entrada principal del contenedor. El último argumento es el nombre del sitio que estamos creando.

Tras ejecutar el comando anterior, verás:

Congratulations! Your new Hugo site is created in /src/quickstart.

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.

  1. Hemos ejecutado Hugo dentro del contenedor; Hugo no está instalado en el host.

  2. Los archivos resultantes (o artefactos) de ejecutar hugo new site se han conservado y siguen disponibles en el host incluso después de destruir el contenedor, gracias al volumen que montamos.

Añadir un tema

Antes de añadir un tema, tratemos esto como un proyecto real:

cd quickstart
git init
git add .
git commit -m "initial commit"

Ahora que tenemos un repositorio git, podemos añadir un tema como submódulo:

git submodule add https://github.com/calintat/minimal.git themes/minimal
git submodule init
git submodule update
echo 'theme = "minimal"' >> config.toml

Si este tema no te convence, puedes explorar https://themes.gohugo.io/ para ver más opciones.

En este punto podemos levantar el sitio con:

docker run --rm -v ${PWD}:/src -p 1313:1313 hugo_extended hugo server --bind 0.0.0.0
  • docker run indica a Docker que ejecute (cree un contenedor nuevo).
  • --rm indica a Docker que queremos eliminar el contenedor cuando termine de ejecutarse.
  • -v ${PWD}:/src monta el directorio actual de la máquina host en una carpeta dentro del contenedor de Hugo, en /src.
  • -p 1313:1313 redirige el puerto 1313 de nuestro host al 1313 de nuestro contenedor.
  • hugo_extended es el contenedor de Hugo que descargamos antes.
  • hugo server --bind 0.0.0.0 ejecuta el subcomando hugo server. La opción adicional bind es necesaria al ejecutarlo en un contenedor; de lo contrario, no podrás abrir el sitio en local en tu navegador.

Obtendrás una salida como esta:

                   | EN
+------------------+----+
  Pages            |  7
  Paginator pages  |  0
  Non-page files   |  0
  Static files     |  3
  Processed images |  0
  Aliases          |  0
  Sitemaps         |  1
  Cleaned          |  0

Total in 42 ms
Watching for changes in /src/{content,data,layouts,static,themes}
Watching for config changes in /src/config.toml
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 0.0.0.0)
Press Ctrl+C to stop

Abre un navegador y ve a http://localhost:1313.

Cuando termines de echar un vistazo, pulsa Ctrl+C en el Terminal para detener el contenedor Docker de Hugo en ejecución.

Confirmar los cambios

git add .
git commit -m "add theme submodule"

Simplificar con Docker Compose

Docker Compose nos ofrece un mecanismo para escribir menos y poner en marcha todo lo que necesitamos. En este caso solo hay un servicio, pero imagina que necesitas bases de datos, servicios de registro, servicios clave-valor y un servicio de API. Es mucho más cómodo ejecutar una sola cosa y tener el sistema listo para ponerme manos a la obra.

Otro motivo es la integración y el despliegue continuos. A menudo oirás a mucha gente hablar de usar Docker para mantener la coherencia entre entornos: lo que se ejecuta en desarrollo es lo mismo que en integración, preproducción y producción, solo con diferencias de configuración. Aunque es cierto, la otra gran ventaja de Docker Compose es que proporciona un conjunto componible de comandos de despliegue. Hablaremos de ello más adelante.

Crea un docker-compose.yml en la raíz del proyecto con el siguiente contenido:

version: "3"
services:
  hugo:
    image: registry.gitlab.com/pages/hugo/hugo_extended:latest
    working_dir: /src
    ports:
      - "1313:1313"
    volumes:
      - ".:/src"
    command: server --bind 0.0.0.0

Iniciar Hugo

docker-compose up -d hugo

Abre un navegador y ve a http://localhost:1313.

Confirmar los cambios

git add .
git commit -m "add docker-compose"
Etiquetas: #Hugo #Docker #Docker Compose
Compartir