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
-
Servidor basado en Ubuntu 20.04 con un usuario no root con privilegios sudo.
-
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]" -
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 -g El parámetro instala el hexo-cli paquete globalmente 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 _config.yml El archivo contiene la configuración de su blog Hexo. La mayoría de las configuraciones del blog se pueden cambiar desde aquí.
Los node_modules contiene todos los paquetes que Hexo necesita y de los que depende.
El package.json El archivo contiene una lista de todos los paquetes y sus números de versión que necesita Hexo.
El package-lock.json el archivo es generado automáticamente por npm 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.
Los scaffolds El directorio contiene las plantillas en las que se basarán las publicaciones y páginas de su blog.
La source El directorio contiene el contenido real del sitio en formato HTML/CSS que luego se publica en la web. Cualquier carpeta o archivo con el prefijo _ (guiones bajos) es ignorado por Hexo excepto _posts carpeta. Por ahora, el directorio está vacío porque no hemos escrito ni publicado nada.
Los themes El directorio contiene los temas de su Blog.
Configurar Hexo
Abra el _config.yml archivo para editar.
$ nano _config.yml
Verifique 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. 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, comprueba la URL sección 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.htm l al final de cada página, puede cambiar ambas opciones trailing_index y trailing_html a false .
Hay algunas configuraciones más que debe activar.
Cambia el valor de default_layout variable de post para draft . Esto creará nuevas publicaciones como borradores, por lo que deberá publicarlas antes de que aparezcan en el blog.
Cambia el valor de post_asset_folder variable a true . 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 e ingresando Y cuando se le solicite.
Instalando un Tema
Hexo se envía con un tema predeterminado llamado Paisaje. Puede cambiar a un tema diferente instalando otro tema Hexo disponible en su página de Temas.
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 tema Siguiente. Cambie al directorio Hexo y clone el repositorio Github del tema en themes directorio.
$ cd /var/www/hexo
$ git clone https://github.com/theme-next/hexo-theme-next themes/next
Cambie el /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 /var/www/hexo/themes/next/_config.yml archivo.
Crea y publica 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 front-matter configurar. 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 example.jpg al \source\_posts\first-post directorio de donde se recuperarán todas las imágenes de su primera publicación.
Guarde el archivo presionando Ctrl+X e ingresando 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.
Instalando un complemento
Hexo tiene unos pocos cientos de complementos que puede 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 hexo-filter-nofollow complemento.
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'
El enable opción habilita el complemento. El field La opción define el alcance del complemento donde site agrega el atributo nofollow a los enlaces externos en todo el sitio y post agrega el atributo nofollow solo a los enlaces en las publicaciones. El exclude la opción incluye dominios en la lista blanca 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.
Salga del servidor presionando Ctrl + 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 /var/www/hexo/public carpeta. 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 e ingresando Y cuando se le solicite.
Activa la configuración.
$ sudo ln -s /etc/nginx/sites-available/hexo.conf /etc/nginx/sites-enabled/
Abra el /etc/nginx/nginx.conf archivo para editar.
$ 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;
Cambia el valor de la variable types_hash_max_size de 2048 a 4096.
types_hash_max_size 4096;
Presiona Ctrl + X para cerrar el editor y presiona 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 utilizando 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 Ctrl + X e ingresando 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 package.json expediente. Ábrelo para editarlo. Puede pasar directamente al comando de actualización para actualizar a versiones menores.
$ nano package.json
Cambie la siguiente línea debajo de dependencies sección.
"hexo": "^5.0.0",
Cambia el valor 5.0.0 a la próxima versión cada vez que se lance en el futuro. Por ejemplo, si Hexo 6.0 está fuera, cámbielo a seguir.
"hexo": "^6.0.0",
Guarde el archivo presionando Ctrl + X e ingresando Y cuando se le solicite.
Ejecute el siguiente comando para actualizar hexo.
$ npm update
Implementación de 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 comprobar 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. Introduzca . 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.