Introducción

Durante los últimos años, he iniciado varios blogs (sin mucho éxito, todo hay que decirlo). Uno de tecnología, mi web de fotografía, y un blog con temas personales, que decidí cerrar. Todos ellos realizados con la misma plataforma CMS: WordPress.

WordPress tiene algunas ventajas, como su facilidad de uso o la gran comunidad que hay detrás. Sin embargo, estaba cansado de la gran cantidad de recursos que necesitaba para desplegar el CMS y dar una buena experiencia a los lectores de mi blog. Es necesario instalar una base de datos MySQL, desplegar PHP en el servidor e instalar varios plugins en WordPress para optimizar la experiencia.

Entonces busqué alternativas a WordPress y encontré Hugo.

¿Qué es Hugo?

Como se menciona en el sitio oficial de referencia, Hugo es un generador de sitios estáticos escrito en Go, y diseñado para hacer la creación de sitios web divertida de nuevo.

Lo que me encanta de Hugo es el rendimiento que da a la web. La velocidad a la que carga la web es asombrosa… y en este mundo en el que queremos todo cuanto más rápido mejor, creo que esto es algo bastante importante.

Además es fácil de configurar y empezar a escribir un blog… Me encanta escribir mi blog usando un terminal y una conexión SSH; ¡es muy sencillo!

Requisitos previos

  • Una máquina con sistema Linux, que será el servidor web. Podrías usar una Raspberry Pi, sin embargo, para un servidor web, recomiendo un VPS por su estabilidad. Con DigitalOcean, puedes tener un VPS por $4/mes. Merece la pena.

  • Un dominio. Es necesario tener un dominio para tener una página web. Hay varias empresas de registro de dominios que ofrecen servicios de nombres, como Namecheap o GoDaddy.

Instalar y Configurar NGINX

En primer lugar, tenemos que instalar el servidor web, en nuestro caso vamos a utilizar NGINX. Como tengo Ubuntu en mi servidor, voy a usar apt para instalar NGINX, pero podrias encontrarlo en casi todos los repositorios por defecto.

sudo apt install nginx

A continuación vamos a crear el fichero de configuración (por favor, tened en cuenta que he usado mysite y mysite.com como ejemplo).

cd /etc/nginx/sites-available
cp default mysite
vi mysite

La configuración tendrá más líneas, pero debería tener este aspecto:

servidor {
       listen 80;
       listen [::]:80;

       server_name mysite.com www.mysite.com;
       root /var/www/mysite/public;
       index index.html;

       location / {
               try_files $uri $uri/ =404;
       }
}

Una vez hecha la configuración, tenemos que habilitarlo creando un enlace simbólico en sites-enabled.

sudo ln -s /etc/nginx/sites-available/mysite /etc/nginx/sites-enabled/mysite

Para comprobar la configuración, podemos hacerlo ejecutando este comando:

sudo service nginx configtest

Si la configuración es correcta, entonces podemos iniciar y habilitar NGINX.

sudo systemctl start nginx
sudo systemctl enable nginx

Añadiendo SSL

El cifrado SSL hoy en día es un básico en cualquier web. Si una web no soporta encriptación SSL, los navegadores actuales marcarán la web como insegura, y perderá la mayor parte de su tráfico. Para añadir SSL a la web, vamos a utilizar Let’s Encrypt.

Let’s Encrypt es una autoridad de certificación gratuita, automatizada y abierta: te permite crear e instalar certificados TLS gratuitos en tu servidor web con unos pocos argumentos de línea de comandos. Con Let’s Encrypt, puedes proporcionar HTTPS en tu sitio web para todos los usuarios sin gastar dinero ni preocuparte por las fechas de renovación.

Certbot

El primer paso es instalar certbot, y el pluggin para NGINX.

sudo apt install certbot python3-certbot-nginx

Y ahora puede generar el certificado para su web:

sudo certbot --nginx -d mysite.com

El archivo /etc/nginx/sites-enabled/mysite debería haber sido modificado por certbot.

Cómo instalar Hugo

En el sitio oficial de referencia de Hugo puedes encontrar la guía de instalación y suficiente documentación. En mi caso, utilizaré mi repositorio apt de Ubuntu para instalar Hugo.

sudo apt install hugo

Podemos comprobar el éxito de la instalación comprobando la versión instalada.

hugo version

Si la salida es la versión, Hugo está instalado correctamente.

Comenzando una web rápida

Antes de iniciar nuestro proyecto Hugo, tenemos que ir a la ruta donde queremos generar los archivos. En nuestro caso, /var/www como hemos configurado previamente en NGINX .

cd /var/www

Ahora estamos listos para iniciar el proyecto Hugo. Para ello, tienes que ejecutar

hugo new site mysite

Donde mysite es el nombre de la web, y se debe crear una nueva carpeta /var/www/mysite con todos los archivos del proyecto. Dentro de la carpeta, debería tener la siguiente estructura:

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

y el fichero config.toml, que es el más importante, ya que es el fichero de configuración.

Añadir un tema

Una vez tenemos la estructura de carpetas Hugo creada, podemos añadir el tema para la web. Hay un montón de temas en el Repositorio de temas de Hugo. Navega por la lista hasta que encuentres uno que te guste, búscalo en GitHub, y clónalo en tu directorio de temas.

Yo elegí el tema m10c:

git clone https://github.com/vaga/hugo-theme-m10c themes/m10c

A continuación, agregue la siguiente línea:

theme = "m10c"

en tu archivo config.toml en la carpeta raíz del sitio web:

vi /var/www/mysite/config.toml

Añadir un post

Para crear un nuevo post (en este caso, el primero), basta con ejecutar

cd /var/www/mysite
hugo new posts/primer-post.md

Entonces se creará un nuevo archivo primer-post.md en la carpeta /var/www/mysite/posts/. Ahora podemos editar este archivo para añadir el contenido del post. El lenguaje para escribir el post es Markdown. Es un lenguaje de marcado ligero para crear texto formateado utilizando un editor de texto plano.

Si no conoces este lenguaje, te recomiendo que consultes la Guía Markdown.

Ejecutando el modo desarrollador

Hugo tiene un modo para ver en tiempo real la edición de la web con su propio servidor web. Es muy útil para crear nuevos posts y comprobar cómo va antes de publicarlos (Modo Desarrollo).

Cambia el directorio a la carpeta raíz del sitio:

cd /var/www/mysite

y ejecuta

hugo server -b http://mysite.com -D --bind=X.X.X.X

Donde http://mysite.com es tu URL (definida en el DNS) y X.X.X.X es tu dirección IP.

Ahora, puedes abrir un navegador web (Firefox es mi favorito), y ver el resultado del render de la web en el servidor con puerto 1313 (http://mysite.com:1313).

Construyendo el sitio

Una vez hayas escrito los posts y quieras publicar o actualizar la web, ve a la carpeta raíz del sitio:

cd /var/www/mysite

y ejecuta

hugo

El sitio se construye como una web estática en la carpeta pública (/var/www/mysite/public). Como NGINX estaba antes configurado para usar esta carpeta como raíz de la web, puedes visitar la URL https://mysite.com para ver el resultado.

Conclusión

Ahora tienes todas las herramientas para desarrollar una web estática con Hugo. Me encanta la velocidad que nos da Hugo websites, espero que a ti también.