Back to Projects
In developmentAstroStarlightMDXMarkdown2025

Hacking Notes

Static site built with Astro 5 and the Starlight theme: notes live in the `docs` collection (`src/content/docs`) via Content Collections, using Markdown and MDX where needed. The sidebar and topic order are defined in `starlight-sidebar.mjs`; look and feel use custom CSS (`theme.css`, `markdown-layout.css`) through Starlight's `customCss`. Includes search over titles and body, table of contents when relevant, light/dark theme, and GitHub Pages deployment with a configured `base` path.

View DemoView Code

Project Screenshots

Hacking Notes — vista previa

1 / 7

What I learned

  • Building documentation with Astro 5 and Starlight (static output and SEO)
  • Organizing content with Content Collections and Starlight's `docsLoader`
  • Controlling the sidebar explicitly via `starlight-sidebar.mjs`
  • Customizing Starlight with project CSS and MDX for richer pages

Extra information

  • The project was initially built with React; that version is preserved on the GitHub branch `archive/react`.
  • It includes a custom 404 page that follows the interface theme selected by the user (dark by default).

Technical Details

  • •Astro 5 (`output: 'static'`) with Starlight and `@astrojs/mdx` integrations
  • •`docs` collection in `src/content.config.ts` using Starlight's `docsSchema`
  • •Sidebar driven by `starlight-sidebar.mjs`
  • •`customCss`: `theme.css` and `markdown-layout.css`
  • •GitHub Pages: `site` + `base: '/WEB-Notas-de-Hacking'`
  • •Custom 404 at `src/pages/404.astro` (Starlight `disable404Route`)