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
Servidor basado en Ubuntu 20.04 con un usuario no root con privilegios sudo.
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]"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.
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.