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

P√°gina de inicio del blog Hexo

Hexo es un marco de blogs est√°ticos construido en Node.js. Hexo te permite escribir publicaciones en formato Markdown. Estas publicaciones de blog se procesan y convierten en archivos HTML est√°ticos utilizando temas predefinidos.

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

En este tutorial, aprenderá cómo instalar Hexo y usarlo 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 tiene git instalado, puede 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 cortafuegos

Ubuntu 20.04 viene con Firewall sin complicaciones (UFW) de forma predeterminada. En caso de que no lo sea, inst√°lelo primero.

$ sudo apt install ufw

Habilitar puerto SSH.

$ sudo ufw allow "OpenSSH"

Habilite el cortafuegos.

$ sudo ufw enable

Habilite el puerto 4000 que utiliza el servidor Hexo.

$ sudo ufw allow 4000

Adem√°s, abra los puertos HTTP y HTTPS que necesitaremos m√°s adelante.

$ sudo ufw allow http
$ sudo ufw allow https

Compruebe 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)

Instalar Node.js

Dado que Hexo se basa en Node.js, primero debe instalarlo.

Ejecute el siguiente comando para agregar el repositorio de Node.js.

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

Instale Node.js.

$ sudo apt-get install nodejs

Confirme si est√° instalado correctamente.

$ node --version
v14.15.0

Instalar Hexo

Ejecute el siguiente comando para instalar el paquete Hexo.

$ sudo npm install hexo-cli -g

El parámetro -g instala el paquete hexo-cli globalmente, lo que le permitirá instalar Hexo blog en cualquier directorio de su elección.

Cree el directorio para instalar Hexo.

$ sudo mkdir -p /var/www/hexo

Establezca los permisos y la propiedad necesarios.

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

A continuación, debe inicializar y configurar los archivos necesarios para el blog de Hexo. Para hacer eso, cambie al directorio que acaba 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 puede comprobar la estructura del directorio.

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

El archivo _config.yml contiene la configuración de su blog Hexo. La mayoría de las configuraciones del blog se pueden 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 necesita Hexo.

npm genera automáticamente el archivo package-lock.json cada vez que realiza una instalación o un cambio en el paquete Hexo. Contiene información sobre los paquetes y las versiones que se instalaron o cambiaron.

El directorio de scaffolds contiene las plantillas en las que se basar√°n las publicaciones y p√°ginas de su blog.

El directorio de origen 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 de temas contiene los temas de su Blog.

Configurar hexadecimal

Abra el archivo _config.yml para editarlo.

$ nano _config.yml

Consulte la sección del archivo titulada Sitio

# 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. Cambie el nombre de su sitio, establezca un subtítulo si lo desea. Agregue una descripción de su sitio y algunas palabras clave para describirlo. Cambie el nombre del autor y la zona horaria de su sitio.

A continuación, compruebe 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

Cambie la URL de su sitio a su nombre de dominio. Aseg√ļrese de usar HTTPS en su URL ya que instalaremos SSL m√°s adelante.

Si no desea que la URL de su sitio muestre index.html al final de cada p√°gina, puede cambiar las opciones trailing_index y trailing_html a falso.

Hay algunas configuraciones m√°s que debe activar.

Cambie el valor de la variable default_layout de publicación a borrador. Esto creará nuevas publicaciones como borradores, por lo que deberá publicarlas antes de que aparezcan en el blog.

Cambie el valor de la variable post_asset_folder a verdadero. Esto le permitirá tener carpetas de imágenes individuales para cada publicación en lugar de una sola carpeta de imágenes para todas las publicaciones.

Guarde el archivo presionando Ctrl+X y entrando Y Cuando se le solicite.

Instalar un tema

Hexo se envía con un tema predeterminado llamado Paisaje. Puede cambiar a un tema diferente instalando otro tema Hexo disponible desde su Temas página.

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

Para nuestro tutorial, estamos instalando el siguiente tema. Cambie al directorio Hexo y clone el repositorio de Github del tema en el directorio de temas.

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

Cambie el archivo /var/www/hexo/_config.yml para cambiar el tema de Paisaje a Siguiente.

$ nano _config.yml

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

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

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

Crear y publicar una publicación

Es hora de crear nuestra primera publicación.

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

Abre la nueva publicación para editarla.

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

Cada publicación debe tener su materia prima configurada. Front-matter es un bloque corto de JSON o YAML que configura detalles esenciales como el título de la publicación, la fecha de publicación, las categorías, las etiquetas, etc. Reemplace los datos predeterminados con 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 desea insertar una imagen en su publicación, agregue el siguiente código en su publicación.

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

Después de eso, copie el archivo ejemplo.jpg en el directorio \source\_posts\first-post, que es de donde se recuperarán todas las imágenes de su primera publicación.

Guarde el archivo presionando Ctrl+X y entrando Y cuando se le solicite una vez que haya terminado de escribir la publicación.

A continuación, publique la publicación.

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

Esta publicación será visible una vez que alojemos el blog.

Instalar un complemento

Hexo tiene pocos cien complementos que puedes instalar. Puede instalar uno o m√°s complementos seg√ļn su uso.

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

Para nuestro tutorial, instalaremos el hexo-filtro-nofollow enchufar.

Primero aseg√ļrese de estar en el directorio hexo y luego instale el complemento.

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

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

$ sudo nano _config.yml

Pegue el siguiente código al final del archivo.

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

La opción habilitar habilita el complemento. La opción de campo define el alcance del complemento donde el sitio agrega el atributo nofollow a los enlaces externos en todo el sitio y la publicación agrega el atributo nofollow solo a los enlaces en las publicaciones. La opción de exclusión incluye en la lista blanca los dominios en los que no se agregará el atributo nofollow.

Servidor de prueba

Hexo se envía con un servidor web básico. Ahora que nuestra publicación está publicada, es hora de iniciar el servidor de prueba Hexo.

$ hexo server

Ahora puede iniciar la URL http://yourserverIP:4000 en su navegador y ver√° la siguiente p√°gina.

P√°gina de inicio del blog Hexo

Salga del servidor presionando Control + C en la terminal

Generar archivos hexo est√°ticos

El servidor de prueba de Hexo puede servir el blog de forma dinámica, así como a través de archivos estáticos. El comando anterior sirvió al blog dinámicamente.

Hay varias formas de servir el blog de Hexo p√ļblicamente. Para nuestro tutorial, serviremos los archivos est√°ticos de Hexo usando el servidor Nginx.

Ejecute 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. Usaremos el servidor Nginx para servir archivos desde esta carpeta.

Instalar y configurar Nginx

Instale el servidor Nginx.

$ sudo apt install nginx

Cree y abra el archivo de configuración de Hexo para Nginx.

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

Pegue el siguiente código en él.

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;
}

Guarde el archivo presionando Ctrl+X y entrando Y Cuando se le solicite.

Activa la configuración.

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

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

$ sudo nano /etc/nginx/nginx.conf	

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

server_names_hash_bucket_size 64;

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

types_hash_max_size 4096;

Prensa Control + X para cerrar el editor y pulsar Y cuando se le solicite guardar el archivo.

Pruebe para asegurarse de que no haya errores de sintaxis en su configuración.

$ sudo nginx -t

Si no hay ning√ļn problema, reinicie el servidor Nginx.

$ sudo systemctl restart nginx

Instalar SSL

Es hora de instalar SSL usando el servicio Let’s Encrypt para nuestro blog hexo.

Para eso, instale Certbot.

$ sudo apt install certbot

Detenga Nginx porque interferir√° con el proceso de Certbot.

$ sudo systemctl stop nginx

Generar 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 un trabajo cron para renovar el SSL automáticamente. Para abrir el editor crontab, ejecute 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 est√° ejecutando por primera vez, se le pedir√° que elija el editor para editar trabajos de Cron. Elija 1 para el editor Nano.

Pegue 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‚ÄĚ

El trabajo cron anterior ejecutará certbot a las 2:25 am todos los días. Puedes cambiarlo a lo que quieras.

Guarde el archivo presionando Control + X y entrando Y Cuando se le solicite.

Actualizar hexadecimal

Cambia a la carpeta Hexo.

$ cd /var/www/hexo

Si est√° cambiando a una versi√≥n principal de Hexo, debe actualizar el archivo package.json. √Ābrelo para editarlo. Puede pasar directamente al comando de actualizaci√≥n para actualizar a versiones menores.

$ nano package.json

Cambie la siguiente línea en la sección de dependencias.

"hexo": "^5.0.0",

Cambie el valor 5.0.0 a la próxima versión cada vez que se publique en el futuro. Por ejemplo, si Hexo 6.0 está fuera, cámbielo a siguiente.

"hexo": "^6.0.0",

Guarde el archivo presionando Control + X y entrando Y Cuando se le solicite.

Ejecute el siguiente comando para actualizar hexo.

$ npm update

Implementando Hexo

Hexo no solo se puede alojar directamente en su servidor, sino que también se puede implementar directamente en Git, Netlify, Vercel, Heroku, OpenShift y varios otros métodos.

La mayoría de los complementos de implementación requieren que instale un complemento. Para nuestro tutorial, configuraremos la implementación de Hexo en Netlify. Si desea realizar la implementación en Netlify, no necesita seguir los pasos relacionados con Nginx y SSL, ya que Netlify viene con SSL gratuito.

El sitio de Netlify generalmente se implementa desde un repositorio de Git. Pero para nuestro propósito, publicaremos directamente el sitio estático en Netlify usando su herramienta CLI.

Instale la CLI de Netlify.

$ sudo npm install netlify-cli -g

Puede verificar si se instaló la herramienta CLI.

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

Inicie 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

Copie el inicio de sesión del terminal en su navegador e inicie sesión en su cuenta de Netlify para autenticarse.

Puede verificar si ha iniciado sesión utilizando 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

Implemente 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.

Elija con las teclas de flecha para crear un nuevo sitio e ingrese un nombre para su sitio. Ingresar . como el directorio para implementar desde el cual se refiere al directorio actual.

Se le dará un borrador de URL. Copie la URL y cárguela en un navegador. Si todo se ve bien, ejecute el siguiente comando para realizar una implementación de producción.

$ netlify deploy --prod

Su sitio ahora debería estar activo. Puede agregar un dominio personalizado en la configuración de Netlify para apuntarlo a un sitio real.

Cada vez que publique una nueva publicación y genere archivos nuevos, ejecute el siguiente comando desde el directorio principal de Hexo para implementar los cambios en Netlify.

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

Conclusión

Esto concluye nuestro tutorial para instalar y crear un blog utilizando el marco Hexo Blog en un servidor basado en Ubuntu 20.04. Si tiene alguna pregunta, publíquela en los comentarios a continuación.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *