Cómo instalar y crear un blog con Hexo en Ubuntu 20.04
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
- 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 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.
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.