Volver a Proyectos
En desarrolloAstroStarlightMDXMarkdown2025

Notas de Hacking

Sitio estático generado con Astro 5 y el tema Starlight: las notas viven en la colección `docs` (`src/content/docs`) con Content Collections, Markdown y MDX donde hace falta. La barra lateral y el orden de los temas se definen en `starlight-sidebar.mjs`; el aspecto se personaliza con CSS (`theme.css`, `markdown-layout.css`) como `customCss` de Starlight. Incluye búsqueda sobre títulos y cuerpo, tabla de contenidos cuando aplica, tema claro/oscuro y despliegue en GitHub Pages con `base` configurado.

Ver DemoVer Código

Capturas del Proyecto

Notas de Hacking — vista previa

1 / 7

Qué aprendí

  • montar documentación con Astro 5 y Starlight (salida estática y SEO)
  • organizar contenido con Content Collections y `docsLoader` de Starlight
  • controlar el menú lateral explícitamente con `starlight-sidebar.mjs`
  • personalizar tema Starlight con CSS propio y MDX para páginas más ricas

Información extra

  • El proyecto se creó inicialmente con React; esa versión está guardada en la rama `archive/react` de GitHub.
  • Incluye una página 404 personalizada alineada con el tema de interfaz seleccionado por el usuario (por defecto, oscuro).

Detalles Técnicos

  • •Astro 5 (`output: 'static'`) con integraciones Starlight y `@astrojs/mdx`
  • •Colección `docs` en `src/content.config.ts` con `docsSchema` de Starlight
  • •Barra lateral importada desde `starlight-sidebar.mjs`
  • •`customCss`: `theme.css` y `markdown-layout.css`
  • •GitHub Pages: `site` + `base: '/WEB-Notas-de-Hacking'`
  • •404 personalizado en `src/pages/404.astro` (`disable404Route` en Starlight)