Hola a todos,
TL/DR
A través de esta serie de publicaciones aprenderemos a crear un sitio web rápido, accesible, full-SEO y multi-idioma usando Storyblok, Next.js y otras tecnologías web modernas; así como buenas prácticas, metodologías y arquitecturas (JAMStack).
Introducción
En esta serie de publicaciones vamos a aprender a crear un sitio web "profesional" desde 0 con múltiples tecnologías de la web moderna.
Los conocimiento mínimos para seguir esta serie publicaciones sin problemas son:
- Conocimiento en HTML, CSS y Javascript, no a un nivel muy avanzado pero sí con cierta experiencia.
- Conocimientos básicos de WEB, como APIs, Verbos HTTP, AJAX, etc.
- Conocimientos básicos de infraestructura en tecnología.
Objetivo principal
El objetivo de esta serie de publicaciones es introducirnos en el desarrollo de sitios web ágiles y en el mundo del headless, no necesariamente volvernos unos expertos pero sí tener la idea de cómo se puede llevar a cabo un desarrollo web profesional de esta índole.
Crearemos un sitio web "estático" (generado con SSG) rápido y administrable que culpla con los requerimientos típicos del desarrollo web actual, y a medida que vayamos expandiendo el mismo ir profundizando en otros temas como comercio, búsquedas personalizadas, recomendaciones, etc.
Tecnologías
Las principales tecnologías a usar en este tutorial son las siguientes:
Next.js
Framework para la creación/desarrollo de sitios/aplicaciones web con reactjs como biblioteca principal para construcción de interfaces; con múltiples características que nos ayudarán a tener sitios web rápidos, escalables, amigables y accesibles.
Storyblok
Headless CMS con editor visual para la administración y distribución de contenido por medio de API's REST y GraphQL; este cuenta con previsualización, manejo de contenid por árbol, richtext, roles, flujos de trabajo, entro otras características que nos ayudara a crear estructuras de contenido de manera fácil y rápida.
Tailwindcss
Podríamos llamarlo framework (como su sitio oficial lo dicta) o simplemente una librería CSS/JS que nos ayuda a crear e implementar interfaces de manera rápida y óptima en el sentido de generar un build con solo lo que usaremos.
Vercel
Plataforma como servicio (PaaS) unificada en la nube que permite a los desarrolladores desplegar, gestionar y escalar sus aplicaciones y sitios web de manera fácil y cómoda.
Además de las tecnologías ya mencionadas, expandíremos nuestro proyecto en una eta "final" con otras integraciones tales como algolia, storybook, commercelayer, etc.
Disclaimer: Mis conocimientos actuales y mis desconocimientos y dificultad de encontrar manuales/tutoriales para este stack en el pasado me llevaron a escribir esta serie de tutoriales; tengo cierta experiencia, pero como cualquier persona puedo errar y/o tener equivocaciones en lo que escriba por lo que pido por favor si encuentran algún fallo en lo que publique me lo hagan saber. Mi objetivo, además de ayudar a quien a penas comienza, también es profundizar y afianzar muchos conocimientos en mi experiencia.
Nota: esta serie de manuales se irán traduciendo al inglés a medida que vaya publicando los mismos.
Nos vemos en la siguiente publicación. Si tienen alguna corrección, queja, duda, sugerencia, estaré bien atento.
Saludos.
Top comments (0)