隆Bienvenidos al backstage de mi sitio web!
馃殌

隆Bienvenidos al backstage de mi sitio web!

En esta pagina os contare 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! 馃幀

Dependencias b谩sicas
  • Astro: Nuestro protagonista principal, que hace posible todo esto.
  • Axios: Es el chico que se encarga de hablar con otras p谩ginas y servicios para traerme informaci贸n.
  • Date-fns y Date-fns-tz: Los encargados de mantener el tiempo bajo control.
  • Dotenv: El responsable de los secretos y configuraciones privadas.
  • Markdown-it y Marked: Los expertos en darle estilo a los textos.
  • Node-fetch: El mensajero que trae informaci贸n desde el servidor.
  • React-icons: Los dise帽adores de los 铆conos que ves por aqu铆.
  • Sanitize-html: El que se asegura de que el contenido sea seguro y se vea bien.
  • Tailwind CSS: El maestro del dise帽o, aportando elegancia y eficiencia al aspecto del sitio.
隆Automatizando con estilo! 馃捇

Ahora, aqu铆 viene lo emocionante. He creado unos 鈥渟cripts鈥 m谩gicos que se encargan de automatizar muchas tareas. 馃鈥嶁檪锔

  • GitHub 馃悪: Mantengo mi c贸digo en GitHub y estos scripts se aseguran de que todo est茅 actualizado.
  • YouTube 馃摵: Me conecto con YouTube para traer contenido fresco.
  • Spotify 馃幍: 隆La m煤sica es esencial! Mantengo mi playlist actualizada autom谩ticamente.
  • Wakatime 鈴憋笍: Registro cu谩nto tiempo paso programando, 隆es como mi diario personal de coder!
  • Y m谩s: Tambi茅n me conecto con GitLab, Azure DevOps, Unsplash, Anilist, Telegram, Dev.to y Ko-fi. 隆No se me escapa nada! 馃槄
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 es un servicio que se sincroniza con mi repositorio de GitHub. Cuando se detecta un cambio en el c贸digo fuente, Vercel lanza el proceso de construcci贸n, conocido como 鈥渂uild鈥. Esto asegura que mi sitio web est茅 siempre actualizado y listo para brindarte la 煤ltima informaci贸n.

  3. Llamadas a diversas APIs y scraping 馃摗: Durante el proceso de construcci贸n, se llevan a cabo diversas acciones, como llamadas a APIs y 鈥渟craping鈥 de datos. Estos procesos extraen informaci贸n valiosa de fuentes externas, como YouTube, GitHub, Azure DevOps, GitLab, Unsplash, Anilist, Spotify, Wakatime, Telegram, Dev.to y Ko-fi. As铆, mi sitio siempre ofrece contenido fresco y actualizado.

  4. Integraci贸n en real time con Better Stack y Shipshape 馃搱: Los datos generados durante la construcci贸n de mi sitio se env铆an en real time a las plataformas de Better Stack y Shipshape. Estas herramientas proporcionan un seguimiento continuo y an谩lisis del rendimiento y la actividad en mi p谩gina. Esto me ayuda a comprender mejor c贸mo los usuarios interact煤an con mi contenido y a tomar decisiones basadas en datos.

  5. Conexi贸n en real time con Giscus y Discord 馃挰: Mi sitio web tambi茅n se conecta en real time con Giscus y Discord. Esto significa que puedes interactuar conmigo y con otros visitantes en real time. Puedes dejar comentarios, preguntas o simplemente charlar. Es una forma de mantener una experiencia interactiva y social en mi p谩gina.

En resumen, mi sitio web es como un festival de tecnolog铆a, donde Astro es el jefe de escena, los scripts hacen su magia y el diagrama interactivo de ReactFlow ilustra todo el proceso. 隆Gracias por ser parte de esta aventura tecnol贸gica! 馃槃馃寪

Workflow