Primeros pasos con Headless Hashnode en DigitalOcean

Introducción

Hashnode es una plataforma gratuita de publicación de contenido y una comunidad de desarrolladores diseñada para mantener a los entusiastas de la tecnología conectados. Ofrece un espacio para que los usuarios creen y compartan entradas de blog y construyan una comunidad en torno a diversas áreas tecnológicas. HashNode busca simplificar la creación y el mantenimiento de un blog técnico fácil de usar y optimizado para SEO, ofreciendo funciones como dominios personalizados, un editor integrado y una integración perfecta con sistemas de control de versiones populares como GitHub. Su nueva oferta, Headless Hashnode, permite crear un blog desde cero utilizando las innovadoras API GraphQL de Hashnode. Puedes crear un blog desde cero o usar su kit de inicio Next.js.

En este tutorial, configuraremos Hashnode sin cabeza en DigitalOcean Droplets.

Introducción a HeadLess HashNode

Un sistema de gestión de contenido headless, o CMS, es una arquitectura que separa las capas de gestión de contenido y presentación. Con un CMS tradicional, el contenido se crea, almacena y muestra en un solo sistema, pero con una arquitectura headless, el almacenamiento y la presentación del contenido se pueden gestionar por separado, lo que permite a diseñadores y desarrolladores experimentar con la apariencia del blog para sus usuarios.

Headless Hashnode es un CMS especialmente diseñado que ayuda a los usuarios a crear blogs personales o corporativos para que puedan jugar con su dominio utilizando el editor WYSIWYG, la inteligencia artificial y las herramientas de optimización SEO de Hashnode sin preocuparse por el seguimiento de contenido y análisis durante el alojamiento.

Comenzar

Prerrequisitos:

1. Una cuenta en DigitalOcean
2. Una cuenta en Hashnode.

 Uso de gotas de DigitalOcean

Los Droplets de DigitalOcean son máquinas virtuales simples, escalables y confiables que se pueden implementar fácilmente en menos de un minuto.

Para empezar, ve al panel de control de DigitalOcean y haz clic en el botón verde "Crear" en la esquina superior derecha de la página. En el menú desplegable, selecciona "Droplets", que también será la primera opción.

En la siguiente ventana, deberá especificar sus preferencias de región, imagen, tamaño y otros detalles. Se recomienda encarecidamente elegir la región más cercana a sus lectores potenciales, incluso si el centro de datos ya está seleccionado.

En la siguiente opción, "Imágenes", ve a la pestaña Marketplace y busca NodeJS en Ubuntu. El Marketplace de DigitalOcean ofrece una colección de herramientas y recursos listos para implementar, llamadas Apps de un solo clic. En lugar de descargar manualmente todas las dependencias, puedes ir al Marketplace y ejecutar una App de un solo clic que incluye imágenes y configuraciones preconfiguradas, además de todos los paquetes y dependencias que necesitas para tu proyecto. Tu pantalla debería verse así:

En la siguiente ventana, puede elegir el tamaño del droplet. Elija el que mejor se adapte a usted o a su empresa, teniendo en cuenta la cantidad de blogs que planea publicar en el futuro. Idealmente, si desea ejecutar esta implementación a nivel de producción, recomendamos usar un disco duro SSD de al menos 25 GB. Recomendamos elegir un droplet premium para un rendimiento más rápido, compatible con procesadores Intel, AMD y SSD NVMe. Puede elegir un droplet premium según sus necesidades, al igual que un droplet estándar.

Una vez hecho esto, deberá elegir un método de autenticación. Puede iniciar sesión en su Droplet mediante una clave SSH o una contraseña. En este tutorial, usaremos una contraseña, así que agregue la cadena que elija y anótela. En la siguiente sección, puede agregar monitoreo y alertas de métricas mejoradas sin costo marcando la casilla junto a la opción, y listo. Asegúrese de agregar un nombre de host más simple para su Droplet y revise todos los detalles antes de hacer clic en "Crear Droplet".

Aprovisionar un Droplet toma aproximadamente un minuto. Una vez que haya terminado, haga clic en el enlace "Comenzar" para obtener una descripción general de la aplicación Marketplace y ver qué incluye.

Configuración de gotas

Para iniciar su Droplet, acepte las conexiones entrantes y rediríjalas a la aplicación en su terminal local:

ssh root@YOUR-DROPLET-IP

«Reemplace "YOUR-DROPLET-IP" con la dirección IP de su Droplet en el panel de control. Ingrese la contraseña cuando se le solicite.

El siguiente paso es actualizar y mejorar los paquetes en el Droplet, y para eso, ejecutar los siguientes comandos:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://get.pnpm.io/install.sh | sh - to install pnpm.

Para eliminar la página predeterminada que se muestra en el Droplet y que ocupa el puerto 3000, utilice los siguientes comandos.

cd /var/www
rm -r html
cd ~
cd /etc/nginx/sites-enabled/
rm -r default

Si los cambios no se reflejan en 5 minutos, es posible que tengas que apagar y encender tu Droplet. En ese caso, tendrás que volver a acceder a tu Droplet por SSH en tu terminal local. Para los siguientes pasos, usaremos Node.js, npm y Nginx, que ya están instalados en el Droplet. Nginx es la herramienta que gestiona todo el enrutamiento a nuestra aplicación Next.js.

Configuración de Nginx

Cree un nuevo archivo de configuración de Nginx utilizando el siguiente comando:

sudo nano /etc/nginx/sites-available/hashnode

Pegue la siguiente configuración, reemplazando server_name con su dirección IP de Droplet:

server {
listen 80;
server_name YOUR_IP_ADDRESS;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}

Una vez hecho esto, guarde y cierre el archivo. Ahora necesitamos crear un enlace simbólico para habilitar la configuración usando lo siguiente:

sudo ln -s /etc/nginx/sites-available/hashnode /etc/nginx/sites-enabled/

Para probar su configuración de Nginx en busca de errores de sintaxis, puede ejecutar lo siguiente:

sudo nginx -t

El resultado ideal debería ser así:

Ahora estamos listos para reiniciar Nginx y podemos hacerlo usando el comando:

sudo service nginx restart

Instalación de Hashnode sin cabeza

Vaya al directorio de la derecha:

cd /var/www

Clonar el repositorio de Github de Headless Hashnode:

git clone https://github.com/hashnode/starter-kit

Elige una plantilla y navega a su directorio. En este tutorial, usaremos el tema Personal:

cd starter-kit/packages/blog-starter-kit/themes/personal

Copiar el archivo de variables de entorno:

cp .env.example .env.local

Luego edite el archivo de variables de entorno:

nano .env.local

Debes cambiar las variables de entorno para que apunten a tu cuenta de Hashnode. Cambia NEXT_PUBLIC_HASHNODE_PUBLICATION_HOST a tu punto final y NEXT_PUBLIC_MODE a producción. El archivo se verá así:

Para instalar las dependencias, ejecute lo siguiente:

pnpm install

Su pantalla debería verse así:

Con todo listo, puedes ejecutar el siguiente comando para implementar Headless Hashnode en tu Droplet. Ten en cuenta que la compilación tardará un minuto. Tu terminal debería verse así:

pnpm dev

Una vez compilado, ¡puedes visitar tu dirección IP de Droplet para ver tu sitio Headless Hashnode en funcionamiento!

Con esto, hemos implementado Hashnode sin cabeza en un Droplet de DigitalOcean usando un proxy inverso proporcionado por Nginx.

Configuración de un gestor de procesos PM2

A veces, el comando de ejecución que estamos ejecutando puede detenerse porque el servidor se ha reiniciado o necesita instalar una actualización. Usaremos la herramienta PM2 para asegurarnos de que nuestra aplicación siempre esté en ejecución. PM2 se reiniciará incluso si la aplicación falla.

Con la imagen de Node.js Marketplace, PM2 viene preinstalado. Para garantizar que su aplicación siempre se ejecute con PM2:

cd /var/www/starter-kit
pm2 start npm --name "hashnode" --start

Para garantizar que PM2 se inicie al arrancar, ejecute los siguientes comandos. Esto creará un script que podrá copiar y pegar en su terminal para iniciar PM2 al arrancar y guardar la configuración.

pm2 startup 
pm2 save

Resultado

Las herramientas CMS headless son ideales para personalizar interfaces de usuario, y Hashnode facilita una herramienta altamente escalable y flexible. Para mejorar la seguridad y el SEO de tu blog, considera configurar certificados SSL con Let's Encrypt e implementar conexiones HTTPS. Si quieres añadir tu propio nombre de dominio, recuerda configurar tus ajustes de DNS. Apunta el registro A de tu dominio a la dirección IP de tu Droplet para poder acceder a la aplicación con tu nombre de dominio. Crea una cuenta hoy mismo. ¡Estamos deseando ver tus blogs con DigitalOcean!