Nueva web, renovada y recargada con NuxtJs
Ha pasado un poco más de un año desde que publiqué en twitter que mi sitio web ya estaba en línea, sin embargo, nunca volví a publicar algo, pero todo cambió desde hace dos semanas aproximadamente, cuando tomé la decisión de relanzar mi sitio web, pero esta vez lo renové desde cero y lo recargue con NuxtJs.
La idea detrás de este sitio es tener mi propio espacio en internet, un lugar donde puedo compartir las cosas que me gustan y que voy aprendiendo, los temas principales van a estar dirigidos al ecosistema de VueJs y NuxtJs, la verdad el stack completo del desarrollador frontend y algunas cosas que voy aprendiendo sobre el backend, también vas a conseguir una que otra publicación sobre temas ajenos a la tecnología.
Tecnologías
Al elegir qué tecnologías usar, decidí basarme en dos cosas:
- Velocidad: necesitaba publicar rápidamente.
- Experiencia: quería usar las tecnologías que realmente disfruto.
Al final, me decidí por trabajar con Nuxtjs, WindiCss y TypeScript.
NuxtJs
NuxtJs es el framework híbrido de vue, está construido sobre vue 3 y vite, es de código abierto y la verdad es que la experiencia de desarrollo (DX) es simple y poderosa. Algunas características que puedo mencionar:
- Configurable mediante nuxt-modules.
- La generación de rutas dinámicas y anidadas.
- Importación automática.
- Integración con TypeScript.
- Capa de servidor.
- Construido con vue 3 y vite.
Al momento de querer utilizar NuxtJs, poco sabía de él, así que fue un reto interesante.
WindiCss
WindiCss es un framework utility-class, si ha trabajado con tailwind entonces estoy seguro que se puede familiarizarse rápidamente con Windicss, la verdad es que no tengo mucho que decir, decidí probarlo ya que lo había visto mucho con proyectos de NuxtJs.
Algunas características que puedo mencionar:
- Utilidades a pedido.
- Tiempos de carga más rápidos.
- HMR rápido en desarrollo.
En este enlace podrá conseguir más información sobre algunas características que tailwind no tiene Windi Features
TypeScript
Este es un viejo conocido para muchos, es un lenguaje construido sobre javascript y esencialmente añade tipado. NuxtJs está completamente escrito con TypeScript, así que proporciona tipado directo.
VSCode tiene muchas ventajas y beneficios al momento de trabajar con TypeScript.
Prisma
Prisma es una herramienta para interactuar con bases de datos, con Prisma y NuxtJs se reduce la complejidad de construir un back-end. Prisma me permite definir fácilmente un esquema y con Prisma Client realizo consultas a la base de datos, con Nuxt server puedo consultar mis datos creando un archivo en el directorio server.
Módulos de NuxtJs
Como he dicho anteriormente NuxtJs es un proyecto de código abierto, así que la misma comunidad ha creado una gran cantidad de módulos para integrarse con NuxtJs, algunos de los que use para mi web fueron:
- @nuxt/content.
- @nuxt/image-edge.
- @nuxt/color-mode.
- @nuxt/critters.
- @nuxt/algolia
- nuxt-icon.
- nuxt-windicss.
- @vueuse/nuxt.
Vercel
Vercel podría decirse que es una plataforma de implementación y colaboración para desarrolladores frontend.
Cada vez que envío un cambio a mi rama principal, este se implementa automáticamente en mi sitio web mediante la integración de github con vercel. Esto me permite concentrarme en la codificación y que Vercel se dedique a la entrega continua y todas las complejidades de alojar un sitio web.
Lo que se viene
La base de esta web fue realizada en poco menos de 2 semanas, no tenía idea de NuxtJs, no tenía un diseño claro, no sabía cuál iba a ser el resultado final así que aun no la termino ya que tengo muchas ideas en mente, pero quiero empezar a publicar sobre la construcción del mismo. Un pequeño listado de las cosas que quiero hacer:
- Reorganizar la estructura del proyecto.
- Crear la página sobre mi.
- Agregar las búsquedas por algolia.
- Agregar cuantas veces ha sido vista una publicación.
- Agregar likes a las publicaciones.
- Crear un playground para permitir interactuar con el código.
Si tiene alguna pregunta, comentario o sugerencia para este sitio, no dude en comunicarse conmigo en Twitter o GitHub. ¡Me encantaría conocerte!