Skip to content
This repository has been archived by the owner on Apr 25, 2022. It is now read-only.

asturiashacking/website

Repository files navigation

Sitio web de AsturiasHacking

Twitter

Este proyecto contiene el código fuente para el sitio web oficial de AsturiasHacking. La aplicación está construida utilizando las siguientes tecnologías: React, NEXT.js y MDX.

Desarrollo

Como cualquier otro proyecto Node, lo primero es instalar las dependencias a través del comando: npm install. Después, puedes arrancar un servidor de desarrollo a través del comando: npm run dev, esto debería hacer que una versión local de la web de AsturiasHacking se cargue en la URL: http://localhost:3000.

Cómo crear una nueva página

Los ficheros .mdx bajo la carpeta pages se convierten automáticamente en nuevas páginas en la web. Puedes utilizar como referencia algún otro fichero .mdx para ver cómo configurar correctamente el layout.

¿Dónde están los componentes?

Los componentes reutilizables se encuentran bajo la carpeta components. Todos los elementos situados en esa carpeta deben ser context-free y, por tanto, potencialmente utilizables en cualquier página de la web. Algunos componentes ya disponibles son:

  • Títulos
  • Listas
  • Enlaces

Cómo estilar los componentes React

Para los estilos, estamos utilizando styled-jsx (una implementación de Vercel para CSS-in-JS), que viene integrado por defecto en NEXT.js.

Testing

Como el sitio web es 100% estático y no tiene ninguna lógica de negocio, hay una pequeña capa de smoke tests construidos utilizando Cypress. Los test se pueden ejecutar localmente a través del comando: npm run test. Además, se ejecutarán automáticamente utilizando GitHub Actions con cada nuevo push y pull request.

Puedes ver los tests bajo la carpeta cypress/integration.

Despliegue

Vercel despliega automáticamente el sitio web con cada push. Si este se produce sobre main, se realiza un despliegue a producción. Si se hace a cualquier otra rama, Vercel crea un despliegue temporal en un entorno de preview para poder ver los cambios.