Despliegue de una página web estática con Hugo en Debian 12
¿Que es hugo?
Hugo es un generador de sitios web estáticos de código abierto escrito en Go que facilita la creación de sitios web.
Requisitos
- Sistema Debian 12 actualizado.
- Privilegios de root o sudo.
- Acceso a internet.
Instalación de Hugo
Para instalar hugo en Debian 12 solo necesitamos ejecutar el siguiente comando:
root@hugo:~# apt install hugo -y
Creación de un sitio web con Hugo
Para crear un sitio web con hugo solo necesitamos ejecutar el siguiente comando:
root@hugo:~# hugo new site blog
Instalación de un tema
Nota: Tanto la intalación como configuración de la plantilla puede variar dependiendo de la plantilla que hayamos elegido en este caso usaremos la plantilla Gists.
Para instalar la plantilla Gists solo tenemos que ejecutar los siguientes comandos:
root@hugo:~/blog# git init
root@hugo:~/blog# git submodule add https://github.com/dmachard/hugo-theme-gists.git themes/gists
root@hugo:~/blog# cat themes/gists/config.template.toml > config.toml
Configuración de la plantilla
Para configurar la plantilla tenemos que editar el archivo de configuración de hugo, para ello ejecutamos el siguiente comando:
root@hugo:~/blog# nano config.toml
El archivo puede variar dependiendo de la plantilla que hayamos instalado, configurenlo a su gusto y necesidades.
Creación de un post
Antes de crear el post vamos a comprobar que la plantilla funciona correctamente utilizando el servidor de prueba de hugo, para ello ejecutamos el siguiente comando:
root@hugo:~/blog# hugo server -D --bind='0.0.0.0'
–bind=‘0.0.0.0’: para que la página de prueba sea accesible desde cualquier dispositivo de la red.
Para crear un post solo tenemos que ejecutar el siguiente comando:
root@hugo:~/blog# hugo new posts/mi-primer-post.md
Configuración del post
Para configurar el post tenemos que editar el archivo que acabamos de crear, para ello ejecutamos el siguiente comando:
root@hugo:~/blog# nano content/posts/mi-primer-post.md
---
title: "Mi Primer Post"
date: 2023-09-19T11:11:19Z
draft: true
---
Configuramos el post a nuestro gusto y agregramos el contenido que queramos.
---
author: "user"
title: "Mi Primer Post"
image: "hugo.png"
date: 2023-09-19
description: "Este es mi primer post"
draft: false
tags: [
"prueba",
"hugo"
]
archives: ["2023/09"]
---
## Post de prueba
Cuando terminemos de configurar el post solo tenemos que guardar los cambios y salir del editor de texto.
Si hemos detenido el servidor de prueba de hugo tenemos que volver a iniciarlo para ver los cambios que hemos realizado, para ello ejecutamos el siguiente comando:
root@hugo:~/blog# hugo server -D --bind='0.0.0.0'
Como podemos ver en la imagen de abajo el post que acabamos de crear se ha añadido correctamente.
Si pulsamos sobre el post podemos ver el contenido que hemos añadido.
Generación de la página web
Para generar la página web solo tenemos que ejecutar el siguiente comando:
root@hugo:~/blog# hugo
Despliegue de la página web
Nota: Antes de desplegar la página web tenemos que configurar adecuadamente la lina baseURL del archivo de configuración de hugo. En mi caso la url será “http://192.168.50.33” que es la ip de mi servidor web.
Una vez configurada la url solo tenemos que guardar los cambios, salir del editor de texto y generar la página web con el siguiente comando:
root@hugo:~/blog# hugo
Para desplegar la página web solo tenemos que copiar el contenido de la carpeta public a nuestro servidor web, en este caso usaremos apache2.
En mi caso el servidor web esta en otra máquina virtual (he eliminado el fichero index.html que viene por defecto en apache2 para que no haya problemas al acceder a la página web.), para copiar el contenido de la carpeta public a mi servidor web he utilizado el siguiente comando:
root@hugo:~/blog# scp -r public/* root@ip-servidor-web:/var/www/html/
Acceso a la página web
Para acceder a la página web solo tenemos que abrir un navegador web y escribir la url que hemos configurado en el archivo de configuración de hugo.
Como podemos ver en la imagen de abajo la página web se ha desplegado correctamente.
Si pulsamos sobre el post podemos ver el contenido que hemos añadido.
