¿Cómo Desarrollé Mi Sitio Web de Portafolio y Blog?

Mi experiencia sobre el desarrollo de mi primer sitio web de portafolio y un blog usando NextJS y un CMS headless.

Motivación

Siempre he estado pensando en lanzar mi propio sitio web con mi nombre de dominio personalizado (aliencito.es)

Entonces, "¿qué pasa con el blog?" podrías preguntar. Sí, el blog también ha estado en mi lista de proyectos durante algún tiempo. Siempre quise hacer un proyecto de blog usando algunas de las últimas tecnologías. Sin embargo, he estado ocupado con mis trabajos y otros proyectos, por lo que ese proyecto de blog nunca se inició.

En estos días, tiendo a desarrollar mis propios proyectos con el enfoque en la buena calidad más que en la cantidad. Quiero escribir mis experiencias y desafíos. Por lo tanto, decidí hacer mi propio blog. Además, en este punto, tengo experiencias decentes y confianza para desarrollar este proyecto.

Stack Tecnológico

Para el front-end, quería usar React. Pero React solo no es lo suficientemente bueno para SEO; y tuve que considerar muchos factores como enrutamiento, optimización de imágenes, etc. Entonces, elegí NextJS como mi stack principal de front-end. Y por supuesto TypeScript para verificación de tipos. (Se dice que amarás TypeScript cuando te acostumbres a él 😉)

Para el estilo, uso TailwindCSS. Esto es porque amo la experiencia de desarrollador que Tailwind ofrece y tiene mucha flexibilidad en comparación con otras bibliotecas de componentes UI como MUI o React Bootstrap.

Todo el contenido de este proyecto reside dentro del repositorio de GitHub. Todas mis publicaciones del blog (incluida esta) están escritas en formato de archivo Markdown ya que estoy muy acostumbrado a esto. Pero para escribir Markdown junto con su frontmatter sin esfuerzo, uso Forestry headless CMS. Es un CMS basado en git que puede servir Markdown y otros contenidos. Debido a esto, puedo escribir mis contenidos usando Markdown o editor wysiwyg. Además, escribir frontmatters con esto es muy fácil.

Las imágenes y los recursos se cargan y almacenan en Cloudinary. Conecto Cloudinary a través de Forestry y los gestiono directamente en el panel.

En conclusión, estos son el stack tecnológico que he usado para este proyecto.

• Front-end: NextJS (TypeScript)
• Estilos: TailwindCSS
• Animaciones: GSAP
• CMS: Forestry Headless CMS
• Despliegue: Vercel

Características

Las siguientes son ciertas características de mi portafolio y blog

Amigable para SEO

Todo el proyecto está desarrollado con enfoque en SEO. He usado meta tags apropiados, descripciones y alineaciones de encabezados. Este sitio web ahora está indexado por Google.

Además, este sitio web se mostrará bien cuando se comparta en redes sociales debido al uso adecuado de meta tags.

Sitemap Dinámico

El sitemap juega un papel importante en SEO. Por esto, cada página de este sitio debe estar incluida en sitemap.xml. Hice un sitemap generado automáticamente en mi sitio web cada vez que creo un nuevo contenido o etiquetas o categorías.

Temas Claro y Oscuro

Debido a la tendencia del tema oscuro en los últimos años, muchos sitios web incluyen tema oscuro de forma predeterminada hoy en día. Ciertamente, mi sitio web también admite temas claro y oscuro.

Totalmente Accesible

Este sitio web es totalmente accesible. Puedes navegar solo usando el teclado. Puse todas las mejores prácticas de mejora de accesibilidad como incluir texto alternativo en todas las imágenes, no saltar encabezados, usar etiquetas HTML semánticas, usar atributos aria correctamente.

Caja de búsqueda, Categorías y Etiquetas

Todo el contenido del blog puede ser buscado por la caja de búsqueda. Además, el contenido puede ser filtrado por categorías y etiquetas. De esta manera, los lectores del blog pueden buscar y leer lo que realmente quieren.

Rendimiento y Puntuación de Lighthouse

Este sitio web obtuvo muy buen rendimiento y puntuación de Lighthouse gracias al desarrollo adecuado y las mejores prácticas.

Animaciones

Inicialmente usé Framer Motion para agregar animaciones y micro interacciones para este sitio web. Sin embargo, cuando intenté usar algunas animaciones complejas y efectos de parallax, encontré inconveniente integrarlo con Framer Motion (Tal vez no soy muy bueno y estoy acostumbrado a trabajar con él). Por lo tanto, decidí usar GSAP para todas mis animaciones. Es una de las bibliotecas de animación más populares y es capaz de hacer animaciones complejas y avanzadas. Puedes ver animaciones y micro interacciones en prácticamente cada página de este sitio web.

Despliegue en VPS

Una parte importante del proceso fue el despliegue en mi propia VPS. Configuré:

• Nginx como reverse proxy
• PM2 para gestionar el proceso de Node.js
• SSL/HTTPS con Let's Encrypt
• Dominio personalizado aliencito.es

Todo está configurado para que el sitio esté siempre disponible y se reinicie automáticamente si hay algún problema.

Conclusión

En conclusión, este proyecto me da mucha experiencia y confianza sobre el desarrollo de sitios de blog (SSG). Ahora, he adquirido conocimiento de CMS basado en git y cómo interactúa con NextJS. También he aprendido sobre SEO, generación dinámica de sitemap y procedimientos de indexación de Google. Haré mejores proyectos en el futuro. ¡Así que mantente atento! ✌🏻

Enlaces del Proyecto

• Sitio Web: https://aliencito.es
• Blog: https://aliencito.es/blog