Cómo instalar y crear un blog con Hexo en Ubuntu 20.04

Hexo es un framework de blogging estático construido sobre Node.js. Hexo te permite escribir entradas en formato Markdown. Estas entradas del blog se procesan y se convierten en archivos HTML estáticos utilizando temas predefinidos.

Es diferente del software de blogging habitual, como WordPress, ya que genera archivos estáticos. WordPress carga el blog dinámicamente ejecutando código PHP cada vez que se recarga el sitio, lo que lo hace susceptible a las vulnerabilidades.

En este tutorial, aprenderás a instalar Hexo y a utilizarlo para crear un blog en un servidor basado en Ubuntu 20.04.

Requisitos previos

  1. Servidor basado en Ubuntu 20.04 con un usuario no root con privilegios sudo.

  2. Git debe estar instalado. Si no tienes git instalado, puedes hacerlo mediante los siguientes comandos.

    $ sudo apt install git
    $ git config --global user.name "Your Name"
    $ git config --global user.email "[email protected]"
    
  3. Una cuenta en Github.

Configurar el cortafuegos

Ubuntu 20.04 viene con Uncomplicated Firewall(UFW) por defecto. En caso de que no lo tenga, instálalo primero.

$ sudo apt install ufw

Habilita el puerto SSH.

$ sudo ufw allow "OpenSSH"

Habilita el cortafuegos.

$ sudo ufw enable

Habilita el puerto 4000 que utiliza el servidor Hexo.

$ sudo ufw allow 4000

Abre también los puertos HTTP y HTTPS que necesitaremos más adelante.

$ sudo ufw allow http
$ sudo ufw allow https

Comprueba el estado del cortafuegos.

$ sudo ufw status
Status: active

To                         Action      From
--                         ------      ----
OpenSSH                    ALLOW       Anywhere
80/tcp                     ALLOW       Anywhere
4000                       ALLOW       Anywhere
443/tcp                    ALLOW       Anywhere
OpenSSH (v6)               ALLOW       Anywhere (v6)
80/tcp (v6)                ALLOW       Anywhere (v6)
4000 (v6)                  ALLOW       Anywhere (v6)
443/tcp (v6)               ALLOW       Anywhere (v6)

Instala Node.js

Como Hexo se basa en Node.js, necesitas instalarlo primero.

Ejecuta el siguiente comando para añadir el repositorio de Node.js.

$ curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Instala Node.js.

$ sudo apt-get install nodejs

Confirma si está instalado correctamente.

$ node --version
v14.15.0

Instalar Hexo

Ejecuta el siguiente comando para instalar el paquete Hexo.

$ sudo npm install hexo-cli -g

El parámetro -g instala el paquete hexo-cli de forma global, lo que te permitirá instalar el blog de Hexo en cualquier directorio de tu elección.

Crea el directorio en el que instalarás Hexo.

$ sudo mkdir -p /var/www/hexo

Establece los permisos y la propiedad necesarios.

$ sudo chown -R $USER:$USER /var/www/hexo
$ sudo chmod -R 755 /var/www/hexo

A continuación, debes inicializar y configurar los archivos necesarios para el blog de Hexo. Para ello, pasa al directorio que acabas de crear.

$ cd /var/www/hexo

Inicializa el blog de Hexo.

$ hexo init
INFO  Cloning hexo-starter https://github.com/hexojs/hexo-starter.git
INFO  Install dependencies
added 185 packages from 430 contributors and audited 191 packages in 6.47s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

INFO  Start blogging with Hexo!

Instala Hexo.

$ npm install
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

added 5 packages from 1 contributor and audited 191 packages in 1.567s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

Ahora puedes comprobar la estructura de directorios.

$ ls
_config.yml  node_modules  package-lock.json  package.json  scaffolds  source  themes

El archivo _config.yml contiene la configuración de tu blog de Hexo. La mayor parte de la configuración del blog se puede cambiar desde aquí.

El directorio node_modules contiene todos los paquetes que Hexo necesita y de los que depende.

El archivo package.json contiene una lista de todos los paquetes y sus números de versión que Hexo necesita.

El archivo package-lock.json es generado automáticamente por npm cada vez que realizas una instalación o un cambio en el paquete de Hexo. Contiene información sobre los paquetes y las versiones que se han instalado o modificado.

El directorio scaffolds contiene las plantillas en las que se basarán las entradas y páginas de tu blog.

El directorio source contiene el contenido real del sitio en formato HTML/CSS que luego se publica en la web. Hexo ignora cualquier carpeta o archivo con el prefijo _(guiones bajos), excepto la carpeta _posts. Por ahora, el directorio está vacío porque no hemos escrito ni publicado nada.

El directorio themes contiene los temas de tu Blog.

Configurar Hexo

Abre el archivo _config.yml para editarlo.

$ nano _config.yml

Comprueba la sección del archivo titulada Site

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Hexo
subtitle: ''
description: ''
keywords:
author: John Doe
language: en
timezone: ''

Las opciones son bastante autoexplicativas. Cambia el nombre de tu sitio, pon un subtítulo si quieres. Añade una descripción de tu sitio y algunas palabras clave para describirlo. Cambia el nombre del autor y la zona horaria de tu sitio.

A continuación, comprueba la sección URL del archivo.

# URL
## If your site is put in a subdirectory, set url as 'http://example.com/child' and root as '/child/'
url: http://example.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

Cambia la URL de tu sitio por tu nombre de dominio. Asegúrate de utilizar HTTPS en tu URL, ya que instalaremos SSL más adelante.

Si no quieres que la URL de tu sitio muestre index.html al final de cada página, puedes cambiar las opciones trailing_index y trailing_html por false.

Hay algunos ajustes más que deberías activar.

Cambia el valor de la variable default_layout de post a draft. Esto creará nuevas entradas como borradores, por lo que tendrás que publicarlas antes de que aparezcan en el blog.

Cambia el valor de la variable post_asset_folder por true. Esto te permitirá tener carpetas de imágenes individuales para cada entrada en lugar de una única carpeta de imágenes para todas las entradas.

Guarda el archivo pulsando Ctrl+X e introduciendo Y cuando se te pida.

Instalar un tema

Hexo viene con un tema por defecto llamado Paisaje. Puedes cambiar de tema instalando otro tema de Hexo disponible en su página de Temas.

Todos los temas de Hexo están disponibles a través de Github, por lo que debes clonar el repositorio de Github del tema.

Para nuestro tutorial, vamos a instalar el tema Next. Cambia al directorio de Hexo y clona el repositorio de Github del tema en el directorio themes.

$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next

Cambia el archivo /var/www/hexo/_config.yml para cambiar el tema de Landscape a Next.

$ nano _config.yml

Realiza el cambio en la variable de tema para cambiar el tema.

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

Puedes cambiar la configuración del tema modificando el archivo /var/www/hexo/themes/next/_config.yml.

Crear y publicar un post

Es hora de crear nuestro primer post.

$ hexo new first-post
INFO  Validating config
INFO  Created: /var/www/hexo/source/_drafts/first-post.md

Abre el nuevo post para editarlo.

$ nano ./source/_drafts/first-post.md

Cada post necesita tener su front-matter configurado. El front-matter es un bloque corto de JSON o YAML que configura detalles esenciales como el título del post, la fecha de publicación, las categorías, las etiquetas, etc. Sustituye los datos por defecto por las opciones correctas.

title: Howtoforge's First Post
tags:
  - test
categories:
  - Hexo
comments: true
date: 2020-11-14 00:00:00
---

## Markdown goes here.

**This is our first post!**

Si quieres insertar una imagen en tu post, añade el siguiente código en tu post.

{% asset_img "example.jpg" "This is an example image" %}

Después, copia el archivo example.jpg en el directorio \source\_posts\first-post que es de donde se recuperarán todas las imágenes para tu primer post.

Guarda el archivo pulsando Ctrl+X e introduciendo Y cuando te lo pida una vez que hayas terminado de escribir el post.

A continuación, publica el post.

$ hexo publish first-post
INFO  Validating config
INFO  Published: /var/www/hexo/source/_posts/first-post.md

Este post será visible una vez que alojemos el blog.

Instalar un plugin

Hexo tiene unos cientos de plugins que puedes instalar. Puedes instalar uno o varios plugins dependiendo de tu uso.

Todos los plugins de Hexo son paquetes Node.js y están alojados en Github, donde puedes encontrar los detalles de su instalación y configuración.

Para nuestro tutorial, instalaremos el hexo-filter-nofollow plugin.

Asegúrate primero de que estás en el directorio de Hexo y luego instala el plugin.

$ cd /var/www/hexo
$ npm i hexo-filter-nofollow --save

Abre el archivo de configuración de Hexo para editarlo.

$ sudo nano _config.yml

Pega el siguiente código al final del archivo.

nofollow:
  enable: true
  field: site
  exclude:
    - 'exclude1.com'
    - 'exclude2.com'

La opción enable habilita el plugin. La opción field define el alcance del plugin donde site añade el atributo nofollow a los enlaces externos en todo el sitio y post añade el atributo nofollow sólo a los enlaces en los posts. La opción exclude establece una lista blanca de dominios en los que no se añadirá el atributo nofollow.

Servidor de pruebas

Hexo incluye un servidor web básico. Ahora que nuestro post está publicado, es el momento de iniciar el servidor de pruebas de Hexo.

$ hexo server

Ahora puedes lanzar la URL http://yourserverIP:4000 en tu navegador y verás la siguiente página.

Página de inicio del blog de Hexo

Sal del servidor pulsando Ctrl + C en el terminal.

Generar archivos estáticos de Hexo

El servidor de pruebas de Hexo puede servir el blog tanto de forma dinámica como a través de los archivos estáticos. El comando anterior sirvió el blog de forma dinámica.

Hay varias formas de servir el blog de Hexo públicamente. Para nuestro tutorial, serviremos los archivos estáticos de Hexo utilizando el servidor Nginx.

Ejecuta el siguiente comando para generar los archivos estáticos.

$ hexo generate

El comando anterior genera archivos estáticos que se almacenan en la carpeta /var/www/hexo/public. Utilizaremos el servidor Nginx para servir los archivos de esta carpeta.

Instalar y configurar Nginx

Instala el servidor Nginx.

$ sudo apt install nginx

Crea y abre el archivo de configuración de Hexo para Nginx.

$ sudo nano /etc/nginx/sites-available/hexo.conf

Pega en él el siguiente código.

server {
    server_name hexo.example.com;

    root /var/www/hexo/public;
    index index.html index.htm;

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/hexo.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/hexo.example.com/privkey.pem;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_session_timeout 1d;
    ssl_session_cache shared:MozSSL:10m;  # about 40000 sessions
    ssl_session_tickets off;
    ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES25>             ssl_prefer_server_ciphers off;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    
    location / {
        try_files $uri $uri/ =404;
    }
}
server {
    if ($host = hexo.example.com) {
        return 301 https://$host$request_uri;
    }
    server_name hexo.example.com;
    listen 80;
    listen [::]:80;
    return 404;
}

Guarda el archivo pulsando Ctrl+X e introduciendo Y cuando te lo pida.

Activa la configuración.

$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/

Abre el archivo /etc/nginx/nginx.conf para editarlo.

$ sudo nano /etc/nginx/nginx.conf	

Pega la siguiente línea antes de la línea include /etc/nginx/conf.d/*.conf

server_names_hash_bucket_size 64;

Cambia el valor de la variable types_hash_max_size de 2048 a 4096.

types_hash_max_size 4096;

Pulsa Ctrl + X para cerrar el editor y pulsa Y cuando se te pida que guardes el archivo.

Comprueba que no hay errores de sintaxis en tu configuración.

$ sudo nginx -t

Si no hay ningún problema, reinicia el servidor Nginx.

$ sudo systemctl restart nginx

Instalar SSL

Es el momento de instalar el SSL utilizando el servicio Let's Encrypt para nuestro blog hexo.

Para ello, instala Certbot.

$ sudo apt install certbot

Detén Nginx porque interferirá con el proceso de Certbot.

$ sudo systemctl stop nginx

Genera el certificado. También necesitamos crear un certificado DHParams.

$ sudo certbot certonly --standalone -d hexo.yourdomain.com --preferred-challenges http --agree-tos -n -m [email protected] --keep-until-expiring 
$ sudo systemctl start nginx
$ sudo openssl dhparam -out /etc/ssl/certs/dhparam.pem 2048

También necesitamos configurar una tarea cron para renovar el SSL automáticamente. Para abrir el editor crontab, ejecuta el siguiente comando.

$ sudo crontab -e
no crontab for root - using an empty one

Select an editor.  To change later, run 'select-editor'.
  1. /bin/nano        <---- easiest
  2. /usr/bin/vim.basic
  3. /usr/bin/vim.tiny
  4. /bin/ed

Choose 1-4 [1]: 1

El comando anterior abre el editor Crontab. Si lo ejecutas por primera vez, se te pedirá que elijas el editor para editar las tareas Cron. Elige 1 para el editor Nano.

Pega la siguiente línea en la parte inferior.

25 2 * * * /usr/bin/certbot renew --quiet --pre-hook “systemctl stop nginx” --post-hook “systemctl start nginx”

La tarea cron anterior ejecutará certbot a las 2:25 de la madrugada todos los días. Puedes cambiarlo por lo que quieras.

Guarda el archivo pulsando Ctrl + X e introduciendo Y cuando se te pida.

Actualizar Hexo

Cambia a la carpeta Hexo.

$ cd /var/www/hexo

Si vas a cambiar a una versión mayor de Hexo, tienes que actualizar el archivo package.json. Ábrelo para editarlo. Puedes pasar directamente al comando de actualización para actualizar a versiones menores.

$ nano package.json

Cambia la siguiente línea en la sección dependencies.

"hexo": "^5.0.0",

Cambia el valor 5.0.0 por el de la siguiente versión cuando se publique en el futuro. Por ejemplo, si sale Hexo 6.0, cámbialo por lo siguiente.

"hexo": "^6.0.0",

Guarda el archivo pulsando Ctrl + X e introduciendo Y cuando se te pida.

Ejecuta el siguiente comando para actualizar Hexo.

$ npm update

Desplegar Hexo

Hexo no sólo puede alojarse directamente en tu servidor, sino que también puede desplegarse directamente en Git, Netlify, Vercel, Heroku, OpenShift y varios otros métodos.

La mayoría de los plugins de despliegue requieren que instales un plugin. Para nuestro tutorial, configuraremos el despliegue de Hexo en Netlify. Si quieres desplegar en Netlify, no necesitas seguir los pasos relacionados con Nginx y SSL, ya que Netlify viene con SSL gratuito.

Un sitio de Netlify suele desplegarse desde un repositorio Git. Pero para nuestro propósito, publicaremos directamente el sitio estático en Netlify utilizando su herramienta CLI.

Instala Netlify CLI.

$ sudo npm install netlify-cli -g

Puedes verificar si la herramienta CLI fue instalada.

$ netlify --version
netlify-cli/2.68.5 linux-x64 node-v14.15.0

Inicia sesión en Netlify.

$ netlify login
Logging into your Netlify account...
Opening https://app.netlify.com/authorize?response_type=ticket&ticket=dfb575d97d07213c9cf73848c8d19e90

You are now logged into your Netlify account!

Run netlify status for account details

To see all available commands run: netlify help

Copia el login del terminal en tu navegador y entra en tu cuenta de Netlify para autentificarte.

Puedes comprobar si has iniciado la sesión con el siguiente comando.

$ netlify status
???????????????????????
 Current Netlify User ?
???????????????????????
Name:  Your Name
Email: [email protected]
Teams:
  Your Team's team: Collaborator

Cambia al directorio público de Hexo.

$ cd /var/www/hexo/public

Despliega el sitio en Netlify.

$ netlify deploy
This folder isn't linked to a site yet
? What would you like to do? +  Create & configure a new site
? Team: Navjot Singh's team
Choose a unique site name (e.g. isnt-yourname-awesome.netlify.app) or leave it blank for a random name. You can update the site name later.
? Site name (optional): Howtoforge

Site Created

Admin URL: https://app.netlify.com/sites/Howtoforge
URL:       https://Howtoforge.netlify.app
Site ID:   986c931c-3f06-40a1-a89b-59621f337c18
Please provide a publish directory (e.g. "public" or "dist" or "."):
/var/www/hexo/public
? Publish directory /var/www/hexo/public
Deploy path: /var/www/hexo/public
Deploying to draft URL...
? Finished hashing 37 files
? CDN requesting 9 files
? Finished uploading 9 assets
? Deploy is live!

Logs:              https://app.netlify.com/sites/howtoforge/deploys/5fb0c9b806e72eb9c5f073c8
Website Draft URL: https://5fb0c9b806e72eb9c5f073c8--howtoforge.netlify.app

If everything looks good on your draft URL, deploy it to your main site URL with the --prod flag.

Elige con las flechas crear un nuevo sitio e introduce un nombre para tu sitio. Introduce . como directorio de despliegue, que hace referencia al directorio actual.

Se te dará un borrador de la URL. Copia la URL y cárgala en un navegador. Si todo parece correcto, ejecuta el siguiente comando para realizar un despliegue de producción.

$ netlify deploy --prod

Tu sitio debería estar ahora en funcionamiento. Puedes añadir un dominio personalizado en la configuración de Netlify para que apunte a un sitio real.

Cada vez que publiques una nueva entrada y generes nuevos archivos, ejecuta el siguiente comando desde el directorio principal de Hexo para desplegar los cambios en Netlify.

$ netlify deploy --dir ./public --prod

Conclusión

Con esto concluye nuestro tutorial para instalar y crear un blog utilizando el framework Hexo Blog en un servidor basado en Ubuntu 20.04. Si tienes alguna pregunta, publícala en los comentarios de abajo.

También te podría gustar...