¡Bienvenidos al backstage de mi sitio web!

🚀

En esta página os contaré la tecnología que impulsa mi web y cómo todo este alboroto tecnológico funciona en la práctica. 😎

Nuestro héroe: Astro 🌟

Mi sitio web se construyó con el poderoso Astro, un todoterreno para crear páginas web. En pocas palabras, Astro se encarga de dar vida a mi sitio y de hacer que todo se vea espectacular. Es como el director de una película, ¡pero para páginas web! 🎬

Frontend: El rostro de la web 🖥️

El frontend es la parte visible de mi sitio web, donde interactúas directamente. Aquí es donde todo el diseño y la interactividad cobran vida.

Dependencias básicas del Frontend

• Astro: Nuestro protagonista principal, que hace posible todo esto.
• Axios: El encargado de comunicarme con otras páginas y servicios para traer información.
• Date-fns y Date-fns-tz: Mantienen el tiempo bajo control.
• Dotenv: Gestiona los secretos y configuraciones privadas.
• Markdown-it y Marked: Dan estilo a los textos.
• React-icons: Diseñan los íconos que ves por aquí.
• Sanitize-html: Asegura que el contenido sea seguro y se vea bien.
• Tailwind CSS: El maestro del diseño, aportando elegancia y eficiencia al aspecto del sitio.

Scripts del Frontend

He creado unos “scripts” mágicos que automatizan muchas tareas:

• dev y start: Inician el servidor de desarrollo de Astro.
• build: Construye el sitio con el contenido y los datos locales ya guardados.
• refresh:data: Actualiza los JSON locales consultando servicios como YouTube, X/Twitter, GitHub, DEV.to y Ko-fi. Se ejecuta de forma explícita.
• build:refresh: Actualiza esos datos y después construye el sitio.
• preview: Previsualiza la versión construida de la web.
• sync:posts: Envía los artículos a Azure Table Storage de forma explícita.
• execute-custom-scripts: Combina la actualización de datos con la sincronización de artículos.
• version: Verifica las dependencias desactualizadas.
• formato y lint: Aseguran que el código esté bien formateado y libre de errores.

Tecnologías clave del Frontend

• React y ReactDOM: Para construir interfaces de usuario dinámicas.
• Solid: Da vida a otras partes interactivas del sitio mediante islas de Astro.
• Tailwind CSS: Facilita la creación de diseños responsivos y modernos.
• ReactFlow: Crea diagramas interactivos que ilustran la arquitectura y el flujo de datos de mi sitio web.

Backend: El motor que funciona tras bastidores ⚙️

El backend es el corazón de mi sitio web, manejando la autenticación, las bases de datos y los servicios externos. La API de Next.js funciona como proyecto independiente; el sitio Astro también tiene funciones de Vercel para contacto, suscripciones y tareas programadas.

Dependencias básicas del Backend

• Next.js: Framework de React para aplicaciones web rápidas y escalables.
• Axios: Para realizar solicitudes HTTP a APIs externas.
• Dotenv: Gestiona variables de entorno y configuraciones sensibles.
• OpenAI: Integra funcionalidades avanzadas de inteligencia artificial.
• Vercel: Plataforma para desplegar y escalar aplicaciones backend.
• Neon PostgreSQL: Guarda los datos persistentes de la aplicación.
• Servicios de Azure: Utilizo una variedad de servicios de Azure para potenciar las capacidades de mi backend:
  • Azure AI Text Analytics: Para análisis de texto y extracción de información relevante.
  • Azure Cognitive Services - Reconocimiento Facial: Servicios de reconocimiento facial.
  • Azure Cognitive Services - Traducción de Texto: Traducción de texto en tiempo real.
  • Azure Data Tables: Almacenamiento y gestión de datos estructurados.
  • Azure Event Hubs: Gestión de eventos y procesamiento en tiempo real.
  • Azure AI Search: Implementación de funcionalidades de búsqueda avanzadas.
  • Azure Blob Storage: Almacenamiento de blobs para manejar archivos y datos no estructurados.
  • Azure AI Speech: Procesamiento de voz.
• RSS-Parser: Para manejar y procesar feeds RSS.
• Resend: Gestiona el correo desde las funciones del sitio y la API del backend.

Scripts del Backend

Los scripts en el backend están diseñados para facilitar el desarrollo y la implementación:

• dev: Inicia el servidor de desarrollo de Next.js.
• build: Construye la aplicación para producción.
• start: Inicia la aplicación en modo producción.
• version: Verifica las dependencias desactualizadas.
• lint: Analiza el código en busca de errores y aplica buenas prácticas.

Tecnologías clave del Backend

• Azure Cognitive Services: Añade capacidades de reconocimiento de texto, traducción y análisis de imágenes.
• OpenAI: Implementa funcionalidades avanzadas de procesamiento de lenguaje natural.
• Neon PostgreSQL: Gestiona la base de datos mediante el cliente serverless de Neon.
• Caché en memoria y HTTP: Reutiliza respuestas frecuentes. La memoria pertenece a cada instancia del backend y las cabeceras HTTP controlan la caché de las respuestas.
• GitHub OAuth: Permite iniciar sesión con una cuenta de GitHub.
• Formidable: Maneja formularios y carga de archivos de manera segura.
• Next.js: Facilita la creación de APIs y rutas dinámicas para mi aplicación.

¡Automatizando con estilo! 💻

He creado unos “scripts” mágicos que se encargan de actualizar los datos cuando ejecuto refresh:data. 🧙‍♂️ La compilación habitual utiliza los JSON locales, sin consultar estos servicios.

• GitHub 🐙: Mantengo mi código en GitHub y consulto las estadísticas de mi perfil.
• YouTube 📺: Me conecto con YouTube para traer contenido fresco.
• Spotify 🎵: ¡La música es esencial! Actualizo los datos musicales que aparecen en el sitio.
• Wakatime ⏱️: Registro cuánto tiempo paso programando, ¡es como mi diario personal de coder!
• Y más: También consulto X/Twitter, Twitch, Unsplash, AniList, Telegram, DEV.to, Ko-fi y Ecologi. 😅
• GitLab y Azure DevOps: Tienen scripts opcionales independientes; sus datos guardados también aparecen en el dashboard.
• Funko: Selecciono figuras de mi colección a partir de un archivo local, sin hacer una consulta a HobbyDB durante la actualización.

Diagrama interactivo con ReactFlow 🌐

El corazón de mi página web es un diagrama interactivo creado con ReactFlow. Este diagrama es como un mapa que ilustra de manera visual la arquitectura y el flujo de datos de mi sitio web. Permíteme guiarte a través de los elementos clave de este diagrama:

1. Código de Astro en GitHub 🚀: Mi proyecto se encuentra alojado en un repositorio de GitHub. Aquí es donde reside todo el código fuente que alimenta mi sitio web. Astro, que es el marco principal de desarrollo, se encarga de darle vida.
2. Integración con Vercel 🛠️: Vercel construye y aloja el sitio Astro y las funciones del sitio. La API de Next.js se despliega por separado. El proyecto también configura una tarea diaria que llama a un hook de despliegue y envía una señal de estado.
3. Actualización de datos y construcción 📡: Las llamadas a APIs y el scraping se ejecutan con los scripts de actualización. Sus resultados se guardan en JSON locales que Astro utiliza al construir las páginas. build:refresh reúne ambos pasos; build utiliza los datos que ya están guardados. La sincronización de artículos con Azure Table Storage se ejecuta por separado.
4. Analítica y rendimiento 📈: El sitio integra Vercel Web Analytics, Speed Insights y Google Analytics para observar las visitas y el rendimiento de las páginas.
5. Comentarios y presencia 💬: Giscus permite comentar los artículos mediante GitHub Discussions. Lanyard muestra mi estado y actividad de Discord en el dashboard.
6. Servicios del backend ⚙️: La API de Next.js conecta el inicio de sesión con GitHub, los datos de Neon PostgreSQL y las funciones de inteligencia artificial de OpenAI y Azure. Resend gestiona el correo desde las APIs del sitio y del backend.

Resumen: Un Festival de tecnología 🎉

Mi sitio web es como un festival de tecnología, donde Astro es el jefe de escena, los scripts preparan los datos y el diagrama interactivo de ReactFlow ilustra cómo se conectan las piezas. Next.js, Neon PostgreSQL, OpenAI y los servicios de Azure completan lo que ocurre entre bastidores. ¡Gracias por ser parte de esta aventura tecnológica! 😄🌐